Search

falSDXLExample

@stevekrouse

An interactive, runnable TypeScript val by stevekrouse

HTTP (deprecated)

import * as fal from "npm:@fal-ai/serverless-client";

fal.config({

// Can also be auto-configured using environment variables:

credentials: Deno.env.get("FAL_KEY"),

const prompt = "a cute and happy dog";

const result: any = await fal.run("fal-ai/fast-lightning-sdxl", { input: { prompt } });

export default () => html(`<img src="${result.images[0].url}" />`);

HTMX_template

@deepfates

@jsxImportSource https://esm.sh/preact

HTTP (deprecated)

/** @jsxImportSource https://esm.sh/preact */

export default async function(req: Request) {

if (req.method === "POST") {

const name = (await req.formData()).get("name");

return new Response(render(<>Hello {name || "World"}!</>));

return new Response(

render(

<html>

<head>

<title>Title</title>

notifyHackerNewsReplies

@chet

An interactive, runnable TypeScript val by chet

Cron

const username = "ccorcos";

export default async function(interval: Interval) {

const url = "https://news.ycombinator.com/threads?id=" + username;

const html = await fetchText(url);

console.log("html", html.slice(0, 100));

const { document } = (new JSDOM(html)).window;

const comments = Array.from(document.querySelectorAll(".athing.comtr")) as any[];

const currentIds = new Set(comments.map(x => x.id));

const newIds = new Set(comments.map(x => x.id));

const key = "hn2:" + username;

anime

@tempguy

@jsxImportSource npm:hono@3/jsx

HTTP (deprecated)

/** @jsxImportSource npm:hono@3/jsx */

const app = new Hono();

app.get("/embed/:id/:ep/:dub", async (c) => {

const id = c.req.param("id");

const ep = Number(c.req.param("ep"));

const dub = c.req.param("dub") === "dub";

const results = [];

const metaResponse = await fetch(

`https://cool-proxy.koyeb.app/hdiuhmalkmc9d0ck7UCFVGBJHN?destination=https://api.malsync.moe/mal/anime/${id}`,

const metaData = await metaResponse.json();

valle_tmp_701816702132716405607952805626981

@janpaul123

// Initialize sample stories and store them in blob storage

HTTP (deprecated)

// Initialize sample stories and store them in blob storage

const SAMPLE_STORIES_KEY = "hn_sample_stories";

async function initializeSampleStories() {

const existingStories = await blob.getJSON(SAMPLE_STORIES_KEY);

if (!existingStories) {

const sampleStories = Array.from({ length: 30 }).map((_, idx) => ({

id: idx + 1,

title: `Sample Story ${idx + 1}`,

url: `https://example.com/story${idx + 1}`,

votes: Math.floor(Math.random() * 100),

sqliteExplorerApp

@wxw

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/stev

![image.webp](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/c8e102fd-39ca-4bfb-372a-8d36daf43900/public)

## Install

Install the latest stable version (v86) by forking this val:

[![Install Stable Release (v86)](https://stevekrouse-button.express.val.run/Install%20Stable%20Release%20(v81))](https://www.

/** @jsxImportSource https://esm.sh/hono@latest/jsx **/

EditorSection,

MockTable,

Separator,

duckDB

@hamilton

An interactive, runnable TypeScript val by hamilton

1 1

Script

export async function duckDB(url) {

const { Database } = await import("npm:duckdb-async");

const db = await Database.create(":memory:");

await db.all("load httpfs");

return await db.all(`select * from "${url}" LIMIT 5`);

cron_client_side_script_fork

@stevekrouse

CronGPT This is a minisite to help you create cron expressions, particularly for crons on Val Town. It was inspired by Cron Prompt , but also does the timezone conversion from wherever you are to UTC (typically the server timezone). Tech Hono for routing ( GET / and POST /compile .) Hono JSX HTML (probably overcomplicates things; should remove) @stevekrouse/openai, which is a light wrapper around @std/openai

HTTP (deprecated)

# CronGPT

This is a minisite to help you create cron expressions, particularly for crons on Val Town. It was inspired by [Cron Prompt](

## Tech

* Hono for routing (`GET /` and `POST /compile`.)

* Hono JSX

* HTML (probably overcomplicates things; should remove)

/** @jsxImportSource npm:hono@3/jsx */

const app = new Hono();

export default app.fetch;

app.get("/", (c) =>

valle_tmp_629217472160119437705927512967885

@janpaul123

// This val will serve an HTML page emulating a Hacker News clone.

HTTP (deprecated)

// This val will serve an HTML page emulating a Hacker News clone.

// It uses plain HTML and CSS to create the frontend. Eventually,

// we can make it interactive with additional scripts.

export default async function(req: Request): Promise<Response> {

const htmlContent = `

<!DOCTYPE html>

<head>

reluctantCoffeeGayal

@kaz

* This app implements a "Would You Rather" game with a ranking system for answers and a progress bar. * It uses React for the frontend and SQLite for persistent storage on the backend. * The ranking system updates based on user choices and displays in the Answers tab. * A progress bar is added to show completion of 20 questions.

HTTP

* This app implements a "Would You Rather" game with a ranking system for answers and a progress bar.

* It uses React for the frontend and SQLite for persistent storage on the backend.

* The ranking system updates based on user choices and displays in the Answers tab.

* A progress bar is added to show completion of 20 questions.

/** @jsxImportSource https://esm.sh/react */

BrowserRouter as Router,

Link,

Route,

Routes,

useLocation,

shotclip

@kousun12

SHOTCLIP Demo of embedding images with substrate , and querying them for semantic relevance. Use the query parameter prompt to control the search.

HTTP (deprecated)

#### SHOTCLIP

Demo of embedding images with [substrate](https://www.substrate.run/), and querying them for semantic relevance.

Use the query parameter `prompt` to control the search.

![preview](https://media.substrate.run/shotclip-preview.png)

/** @jsxImportSource npm:react **/

type ShotResult = {

id: string;

distance: number;

metadata: {

doc: string; // base64 img data

whoIsHiring

@vawogbemi

WIP Searcher for HN whos hiring posts HonoJs doesn't support render for async components so the style is off for the home page. And the state changes don't register in html rendering so thinking of using react instead.

1 1

HTTP

# WIP

Searcher for HN whos hiring posts

HonoJs doesn't support render for async components so the style is off for the home page.

And the state changes don't register in html rendering so thinking of using react instead.

/** @jsxImportSource https://esm.sh/react */

function App() {

const tabs = { "/": "Home", "/about": "About" };

const [activeTab, setActiveTab] = useState("/");

const [showScrollTop, setShowScrollTop] = useState(false);

const [selectedComment, setSelectedComment] = useState(null);

packageInfo

@ws_

An interactive, runnable TypeScript val by ws_

Script

import { fetchJSON } from "https://esm.town/v/stevekrouse/fetchJSON?v=41";

export const packageInfo = (packageName: string) =>

fetchJSON(`https://registry.npmjs.org/${packageName}`);

exampleTldJSInvalid

@stevekrouse

An interactive, runnable TypeScript val by stevekrouse

Script

import tldjs from "npm:tldjs";

export let exampleTldJSInvalid = tldjs.parse("https://stevekrouse_invalid.web.val.run/");

example_ssr

@pomdtr

SSR + Hydration Demo Look at @pomdtr/island and @pomdtr/hydrate_islands to read the whole library source code (less than 50 rows!).

HTTP (deprecated)

# SSR + Hydration Demo

Look at @pomdtr/island and @pomdtr/hydrate_islands to read the whole library source code (less than 50 rows!).

/** @jsxImportSource https://esm.sh/react */

// will run on both client and server

export function Demo(props: { items: string[] }) {

const [items, setItems] = useState(props.items);

useEffect(() => {

items.push("This item is rendered only on the client, after the hydration");

setItems([...items]);

// fetch data from the server

…

67 68

70 71

…

364