Search
indirection
@jxnblk
A game of riddles to play with your friends How to play To start a game, choose a 3-20 letter word. The game generates a riddle based on your word. Copy the link to share with your friends to see if they can guess the word. If they guess the word correctly, they get to pick a new word and can send you a new clue back. If they guess wrong, the next riddle is based on the word they guessed You can play with 2 or as many people as you want.
You can follow a long chain, like the game Telephone or games can branch with multiple players. TODO [ ] Reload after updating the URL to support native share sheets [ ] Incorrect state / helpers [x] Trim and lowercase guesses
HTTP
/** @jsxImportSource https://esm.sh/react */
import copy from "https://esm.sh/copy-text-to-clipboard";
import leven from "https://esm.sh/fast-levenshtein";
import { useEffect, useState } from "https://esm.sh/react";
import { DataRequest, render } from "https://esm.town/v/jxnblk/ReactStream";
import { useStreamingAPI } from "https://esm.town/v/jxnblk/useStreamingAPI";
import api, { decode } from "https://esm.town/v/jxnblk/IndirectionAPI";
import { GoogleFonts } from "https://esm.town/v/jxnblk/reactGoogleFonts";
import { Typewriter } from "https://esm.town/v/jxnblk/useTypewriter";
headers
@agmm
An interactive, runnable TypeScript val by agmm
HTTP (deprecated)
return new Response(text);
if (url.pathname === "/ip") {
return new Response(req.headers.get("true-client-ip"));
if (url.pathname === "/agent") {
return new Response(req.headers.get("user-agent"));
sparklineEx2
@stevekrouse
Sparkline SVG Sparklines make with vanilla js via @stevekrouse.sparklineSVG Example usage:  Contrast with @stevekrouse.sparklineEx which uses react-sparklines.
Express
Contrast with [@stevekrouse.sparklineEx](/v/@stevekrouse.sparklineEx) which uses react-sparklines.
bedtimeStoryMaker
@dthyresson
Bedtime Story Maker Inspired from a RedwoodJS demo I mde last year, this adds generative art powered by Fal to the bedtime story maker. Start writing a story by picking a style (spooky, colofrol, adventurous an animal (penguin, mouse, unicorn, whale ...) a color for the animal and activity (befriends aliens, goes to the doctor, rides a rollercoaster, bakes a cake for friends) It uses OpenAI to write a children's bedtime story title summary story for a "fantastical story about a green whale who rides the bus" or the "spooky story about the tomato fox who explores a cave". Then using the summary, OpenAI geenrates another prompt to describe the instructions to geneate a childrens story book image. That's sent to Fal to generate an image. Stories get saved to bedtime_stories in SQLite for viewing, searching and maybe sharing. You then get a bedtime story to enjoy!
HTTP
import { ValTownLink } from "https://esm.town/v/dthyresson/viewOnValTownComponent";
import { chat } from "https://esm.town/v/stevekrouse/openai";
import * as fal from "npm:@fal-ai/serverless-client";
export const falConfig = () => {
fal.config({
npmExample
@whatrocks
An interactive, runnable TypeScript val by whatrocks
Script
export let npmExample = (async () => {
// const { getSSLHubRpcClient } = await import("npm:@farcaster/hub-nodejs");
// console.log("hi: ", getSSLHubRpcClient);
// return "foo";
const _ = await import("npm:lodash-es"); // The Lodash library exported as ES modules.
openaiproxy
@mmrech
OpenAI Proxy This OpenAI API proxy injects Val Town's API keys. For usage documentation, check out https://www.val.town/v/std/openai
HTTP (deprecated)
import { RateLimit } from "npm:@rlimit/http";
const client = new OpenAIUsage();
const allowedPathnames = [
// We don't await this promise so that it's not adding to request time.
client.writeUsage({
userId: user.id,
if (user.tier == "pro" && isExpensiveModel(input.model)) {
const count = await client.recentGpt4Usage(user.id);
if (count <= 10) {
svg_favicon
@jxnblk
SVG favicon service, with support for custom text/letters and colors <img src="https://jxnblk-svg_favicon.web.val.run?text=Hi&color=000&bg=f0f" />
HTTP (deprecated)
/** @jsxImportSource https://esm.sh/preact */
import { render } from "npm:preact-render-to-string";
const HEXRE = /^[A-Fa-f0-9]{3,6}$/;
const toHex = (str) => HEXRE.test(str) ? "#" + str : str;
sqliteKyselyClient
@stevekrouse
An interactive, runnable TypeScript val by stevekrouse
Script
import { LibsqlDialect } from "npm:@libsql/kysely-libsql";
import { Kysely } from "npm:kysely";
export const sqliteKyselyClient = new Kysely({
dialect: new LibsqlDialect({
client: sqlite,
bwellSDK
@kylewadebwell
// should produce an InvalidClientKeyError
Script
import { BWellSDK } from "npm:@icanbwell/bwell-sdk-ts@next";
const BAD_KEY = "nogoodkeythatdoesntwork";
// should produce an InvalidClientKeyError
try {
const sdk = new BWellSDK({ clientKey: BAD_KEY });
} catch (e) {
console.log(e);
r2Demo
@stevekrouse
Demo using an s3 client to access cloudflare r2
Script
# Demo using an s3 client to access cloudflare r2
import { S3Client } from " https://deno.land/x/s3_lite_client@0.6.1/mod.ts";
const s3client = new S3Client({
endPoint: Deno.env.get("r2_endpoint_url").replace("https://", ""),
secretKey: Deno.env.get("r2_secret_access_key"),
const putResponse = await s3client.putObject(
"stevekrouse/demo",
console.log(putResponse); // { etag, version }
const getResponse = await s3client.getObject("stevekrouse/demo");
const json = await getResponse.json();
httpStatusBehavior
@maxm
HTTP Status Behavior In a bunch of iframes, how does Val Town (cloudflare) handle getting various HTTP status responses.
HTTP (deprecated)
/** @jsxImportSource https://esm.sh/react */
import { renderToString } from "npm:react-dom/server";
// dprint-ignore
300, 301, 302, 303, 304, 305, 306, 307, 308, // 3xx Redirection
400, 401, 402, 403, 404, 405, 406, 407, 408, 409, 410, 411, 412, 413, 414, 415, 416, 417, 418, 421, 422, 423, 424, 425, 426, 428, 429, 431, 451, // 4xx Client Error
500, 501, 502, 503, 504, 505, 506, 507, 508, 510, 511 // 5xx Server Error
accessibleScarletToad
@fahmi
An interactive, runnable TypeScript val by fahmi
HTTP (deprecated)
const response = await fetch(url);
const jsonData = await response.json();
// Extract the array inside the "data" field
const dataArray = jsonData.data;
// Extract the email parameter from the query string
htmlResponse
@neverstew
An interactive, runnable TypeScript val by neverstew
Script
import { html } from "https://esm.town/v/neverstew/html";
import type { VNode } from "npm:preact";
export const htmlResponse = (htmlNode: VNode, options?: ResponseInit) =>
new Response(
