Search
movieMashup
@dthyresson
Movie Mashup It's Blader Runner meets Pretty in Pink. OpenAI generated movie maship title, tagline and treatments. Fal generated movie posters.
HTTP
# Movie Mashup
It's Blader Runner meets Pretty in Pink.
OpenAI generated movie maship title, tagline and treatments.
Fal generated movie posters.
/** @jsxImportSource npm:hono@3/jsx */
movieMashupMashupRoute,
movieNewMashupMashupRoute,
} from "https://esm.town/v/dthyresson/movieMashupMashupRoute";
const app = new Hono();
homeRoute(app);
reactClientDemo
@keenanzucker
Idiomatic SSR and hydration of a React app
HTTP (deprecated)
Idiomatic SSR and hydration of a React app
/** @jsxImportSource https://esm.sh/react */
const Counter = () => {
const [count, setCount] = React.useState(0);
return (
<button onClick={() => setCount(count + 1)}>
I've been clicked {count} times
</button>
const App = () => (
<html>
honoJsxHtmlTemplates
@yawnxyz
Base working example of combining Hono, React/JSX, and html templates
HTTP (deprecated)
Base working example of combining Hono, React/JSX, and html templates
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
const app = new Hono()
interface SiteData {
title: string
children?: any
const Layout = (props: SiteData) =>
html`
<html>
<head>
myspace
@stevekrouse
Create your own Myspace profile, deployed to Val town. https://jdan-myspace.web.val.run Click "..." and select Fork to create your own. From there you can: Customize your own profile Or post on my wall by appending to messages and sending me a pull request
HTTP (deprecated)
Create your own Myspace profile, deployed to Val town. https://jdan-myspace.web.val.run
Click "..." and select Fork to create your own.
From there you can:
* Customize your own profile
// TODO: Fetch from key-value
const profile = {
displayName: "Jordan",
seo: {
zhangxiaoke
@webup
// This approach will create a personal card using React and Lucide React icons.
HTTP
// This approach will create a personal card using React and Lucide React icons.
// We'll use ESM imports for React and Lucide icons.
// The card will be responsive and styled using Tailwind CSS classes.
/** @jsxImportSource https://esm.sh/react */
function PersonalCard() {
return (
<div className="flex justify-center items-center min-h-screen bg-gray-100 p-4">
<div className="bg-white shadow-2xl rounded-xl max-w-md w-full overflow-hidden">
<div className="bg-gradient-to-r from-blue-500 to-purple-600 p-4 text-white">
<div className="w-24 h-24 mx-auto bg-white rounded-full border-4 border-white shadow-lg mb-4 overflow-hidden">
getChatgpt
@bingo16
An interactive, runnable TypeScript val by bingo16
Script
export let getChatgpt = async ({ prompts, token }) => {
let text = "";
const postdata = {
model: "text-davinci-003",
prompt: `${prompts}`,
temperature: 0.7,
n: 1,
logprobs: null,
max_tokens: 1024,
const headers = {
weatherGPT
@seflless
If you fork this, you'll need to set OPENAI_API_KEY in your Val Town Secrets .
HTTP (deprecated)
If you fork this, you'll need to set `OPENAI_API_KEY` in your [Val Town Secrets](https://www.val.town/settings/secrets).
/** @jsxImportSource https://esm.sh/react */
export function WeatherSuggest() {
// const onClick = () => alert("Button clicked!");
const [data, setData] = useState(null);
useEffect(async () => {
const results = await fetch("https://seflless-weatherGPT.web.val.run/data");
const data = await results.json();
console.log(data);
setData(data);
hello
@chilly
An interactive, runnable TypeScript val by chilly
Script
export function hello() {
return "hello";
sqliteExplorerApp
@hunty
SQLite Explorer View and interact with your Val Town SQLite data. It's based off Steve's excellent SQLite Admin val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by LibSQL Studio by invisal . This is now more an SPA, with tables, queries and results showing up on the same page. Install Install the latest stable version (v86) by forking this val: Authentication Login to your SQLite Explorer with password authentication with your Val Town API Token as the password. Todos / Plans [ ] improve error handling [ ] improve table formatting [ ] sticky table headers [x] add codemirror [ ] add loading indication to the run button (initial version shipped) [ ] add ability to favorite queries [ ] add saving of last query run for a table (started) [ ] add visible output for non-query statements [ ] add schema viewing [ ] add refresh to table list sidebar after CREATE/DROP/ALTER statements [ ] add automatic execution of initial select query on double click [x] add views to the sidebar [ ] add triggers to sidebar [ ] add upload from SQL, CSV and JSON [ ] add ability to connect to a non-val town Turso database [x] fix wonky sidebar separator height problem (thanks to @stevekrouse) [x] make result tables scrollable [x] add export to CSV, and JSON (CSV and JSON helper functions written in this val . Thanks to @pomdtr for merging the initial version!) [x] add listener for cmd+enter to submit query
HTTP (deprecated)
# SQLite Explorer
View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by [LibSQL Studio](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page.
## Install
Install the latest stable version (v86) by forking this val:
[)](https://www.val.town/v/nbbaier/sqlite_explorer/fork)
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
EditorSection,
MockTable,
Separator,
perplextiyAPI
@nbbaier
An interactive, runnable TypeScript val by nbbaier
Script
import { pplx as perplextiyAPI } from "https://esm.town/v/nbbaier/perplexityAPI";
export default perplextiyAPI;
amethystGoldfish
@willthereader
Fancy animated SVGs in readmes, along with centering and image sizing. <div align="center"><img width=200 src="https://gpanders.com/img/DEC_VT100_terminal.jpg"></div> <p align="center">
<img src="https://maxm-animatedreadmesvg.web.val.run/comet.svg" />
</p> <p align="center">
<img src="https://maxm-animatedreadmesvg.web.val.run/custom text!" />
</p>
HTTP (deprecated)
Fancy animated SVGs in readmes, along with centering and image sizing.
<div align="center"><img width=200 src="https://gpanders.com/img/DEC_VT100_terminal.jpg"></div>
<div align="center"><img width=200 src="https://gpanders.com/img/DEC_VT100_terminal.jpg"></div>
<p align="center">
<img src="https://maxm-animatedreadmesvg.web.val.run/comet.svg" />
</p>
/** @jsxImportSource https://esm.sh/react */
const genSVG = (request: Request): string => {
let pathname = new URL(request.url).pathname;
if (pathname === "/comet.svg") {
aloneAquaGopher
@parthstown
An interactive, runnable TypeScript val by parthstown
HTTP
console.log("potato", main);
export default async function printWeather(req: Request) {
if (typeof main === "function") {
const newWeather = await main(req);
const data = await newWeather.json();
console.log(newWeather);
return new Response(JSON.stringify(data));
} else {
console.error("main is not a function");
return new Response("Error: main is not a function", { status: 500 });
jsr2gh
@vladimyr
jsr2gh Redirect to jsr package's GitHub repository page, like vladimyr-jsr2gh.web.val.run/@luca/flag Usage https://vladimyr-jsr2gh.web.val.run/<scope>/<name> Example https://vladimyr-jsr2gh.web.val.run/@luca/flag https://vladimyr-jsr2gh.web.val.run/@std/assert
HTTP (deprecated)
# jsr2gh
[](https://spdx.org/licenses/0BSD.html)
Redirect to [jsr](https://jsr.io) package's GitHub repository page, like [vladimyr-jsr2gh.web.val.run/@luca/flag](https://vladimyr-jsr2gh.web.val.run/@luca/flag)
## Usage
`https://vladimyr-jsr2gh.web.val.run/<scope>/<name>`
## Example
// SPDX-License-Identifier: 0BSD
const PackageDataSchema = v.object({
githubRepository: v.nullable(v.object({
owner: v.string(),
jsoninvoice_editor
@pomdtr
@jsxImportSource npm:hono/jsx
Script
/** @jsxImportSource npm:hono/jsx */
const example_invoice: Invoice = {
"id": "20240401",
"issued": "2024-01-01",
"due": "2024-01-15",
"currencies": [{ "code": "USD" }, { "code": "EUR", rate: 0.94 }],
"tax": 10,
"from": {
"name": "pomdtr",
"to": {
fluxImageGenerator
@danyslicer
// This app uses the fal.ai API to generate images based on user prompts.
HTTP
// This app uses the fal.ai API to generate images based on user prompts.
// It features a clean UI with an input field for the prompt and a button to generate the image.
// The generated image is displayed below the input field.
// React is used for the UI and the fal.ai serverless client for image generation.
// The app measures and displays the latency for each image generation.
// The background features randomly placed pixelart lightning bolts in neon yellow.
/** @jsxImportSource https://esm.sh/react */
// Constants for background
const GRID_SIZE = 100; // Size of each grid cell
const BOLT_CHANCE = 0.2; // 20% chance to place a bolt in each cell