Search

Results include substring matches and semantically similar vals. Learn more
mahictn avatar
snake_game
@mahictn
@jsxImportSource https://esm.sh/react@18.2.0
HTTP
const INITIAL_SNAKE = [{ x: 10, y: 10 }];
function SnakeGame() {
const [snake, setSnake] = useState(INITIAL_SNAKE);
useEffect(() => {
async function fetchHighScore() {
const { blob } = await import("https://esm.town/v/std/blob");
if (score > highScore) {
async function updateHighScore() {
const { blob } = await import("https://esm.town/v/std/blob");
}, [score, highScore]);
function generateFood() {
return {
</div>
function client() {
createRoot(document.getElementById("root")).render(<SnakeGame />);
if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise<Response> {
return new Response(`
stevekrouse avatar
emailGPT3
@stevekrouse
Email with GPT-3 Send an email to stevekrouse.emailGPT3@valtown.email, it will forward it to gpt3, and email you back the response.
Script
import { mail } from "https://esm.town/v/stevekrouse/mail";
import { runVal } from "https://esm.town/v/std/runVal";
export async function emailGPT3(email) {
let response = await runVal("patrickjm.gpt3", { prompt: email.text });
return mail({
andreterron avatar
comments
@andreterron
An interactive, runnable TypeScript val by andreterron
Script
import { searchParams } from "https://esm.town/v/stevekrouse/searchParams?v=9";
import { fetchJSON } from "https://esm.town/v/stevekrouse/fetchJSON?v=41";
export function comments({ token, since, until, offset, limit, relationship }: {
token: string;
since?: Date;
vladimyr avatar
signedFetch
@vladimyr
// SPDX-License-Identifier: 0BSD
Script
signFn?: (message: string, pkcs8: string, algorithm: SignatureOptions["algorithm"]) => Promise<string>;
export function createSignedFetch(
options: SignatureOptions & {
const fetch = options.fetch ?? globalThis.fetch;
return async function signedFetch(
input: Request | URL | string,
return fetch(signedReq);
export async function signRequest(
input: Request | URL | string,
return req;
function createMessage(req: Request) {
const { pathname, search } = new URL(req.url);
return message;
function createSignatureHeader(
signature: string,
.join(",");
export async function nodeSign(
message: string,
throw new TypeError(`error: unsupported algorithm: ${algorithm}`);
export async function webcryptoSign(
message: string,
jpatel1007 avatar
distinguishedCoralWolf
@jpatel1007
// Fetches a random joke.
Script
function fetchRandomJoke() {
const SAMPLE_JOKE = {
"setup": "What do you call a group of disorganized cats?",
import { email } from "https://esm.town/v/std/email?v=9";
// Fetches a random joke.
function fetchRandomJoke() {
const SAMPLE_JOKE = {
"setup": "What do you call a group of disorganized cats?",
vsp05 avatar
orangeReptile
@vsp05
An interactive, runnable TypeScript val by vsp05
Cron
import { email } from "https://esm.town/v/std/email?v=9";
async function fetchRandomJoke() {
const response = await fetch(
"https://official-joke-api.appspot.com/random_joke",
oscarlaris avatar
valentine
@oscarlaris
Hello!!! Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right. You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen! Have fun with it and hopefully your crush says yes hehe.
HTTP
</div>
function App() {
const [state, setState] = useState({
100% { transform: rotate(360deg); }
function client() {
createRoot(document.getElementById("root")).render(<App />);
client();
export default async function server(request: Request): Promise<Response> {
return new Response(
tmcw avatar
bedtimeStoryMaker
@tmcw
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
* 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
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.
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"
// apiId: "rlns_2AMjVgwwMksmssLVb56LVmkpB56C",
function parseStory(text) {
// Split the text into lines and remove empty lines
gloodata avatar
extutil
@gloodata
An interactive, runnable TypeScript val by gloodata
Script
export function replyJSON(data: any, status: number) {
return new Response(JSON.stringify(data), {
headers: { "Content-Type": "application/json" },
export function replyText(data: string, status: number) {
return new Response(data, {
headers: { "Content-Type": "text/plain" },
export function opNotFoundError(opName: string) {
return {
info: { opName },
function formatGetBody(url: string, info: ExtInfo) {
const { ns = "?", title = "?" } = info ?? {};
type HandleRequestFn = (info: any) => Promise<any>;
export function makeExtServer(getInfo: GetInfoFn, handleRequest: HandleRequestFn) {
return async (req: Request) => {
stevekrouse avatar
insecureFetch
@stevekrouse
Insecure SSL Cert Fetch This will be useful if you're getting a invalid peer certificate: UnknownIssuer error . If you need to make a fetch request to a website with a dubious or non-standard SSL certificate, you can use this proxy we made on Cloudflare workers (which doesn't verify SSL certs): https://unsecure-fetch.val-town.workers.dev/ import { insecureFetch } from "https://esm.town/v/stevekrouse/insecureFetch"; const url = "https://assignment-api.uspto.gov/patent/basicSearch?query=1234567&fields=main&rows=20"; const data = await insecureFetch(url) const text = await data.text(); console.log(text)
Script
export function insecureFetch(input: string | URL | Request, init?: RequestInit) {
const origReq = new Request(input, init);
const proxyURL = new URL("https://unsecure-fetch.val-town.workers.dev");
pomdtr avatar
bookmarklets
@pomdtr
Bookmarklet Manager Write your bookmarklets in val.town. Usage You val should just contain your bookmarklet code. alert("Hi mom!"); Make sure that your val is either unlisted or public, and not named bookmarklets . Then navigate to https://pomdtr-bookmarklets.web.val.run/v/:author/:name to generate the bookmarklet link. Sharing a bookmarklet Make sure that your val is public, and add a #bookmarklet tag anywhere in the code. alert("Hi mom!"); // #bookmarklet It should automatically appears on https://pomdtr-bookmarklets.web.val.run . โš ๏ธ If you are using the Arc Browser , you can use the Powerlet extension to install bookmarklets.
HTTP
import { minify } from "npm:terser";
const app = new Hono();
async function bookmarkletUrl(author: string, name: string) {
const resp = await fetch(`https://esm.town/v/${author}/${name}`);
const { code } = await minify(await resp.text());
padac avatar
question
@padac
@jsxImportSource https://esm.sh/react@18.2.0
HTTP
"That's it I'm stealing your pc",
function App() {
const [noClicks, setNoClicks] = useState(0);
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise<Response> {
return new Response(
pomdtr avatar
echoParams
@pomdtr
An interactive, runnable TypeScript val by pomdtr
HTTP
import { html } from "https://esm.town/v/stevekrouse/html";
export async function echoParams(
req: Request
const url = new URL(req.url)
iamseeley avatar
pyodideDataAnalysis
@iamseeley
An interactive, runnable TypeScript val by iamseeley
HTTP
<div id="plotContainer"></div>
<script>
async function main() {
let pyodide = await loadPyodide();
await pyodide.loadPackage(['numpy', 'pandas', 'matplotlib']);
just_be avatar
highlight
@just_be
Highlight This val exposes and endpoint that you can post code to and get back syntax highlighted html via Shiki . Shiki does server side highlighting, so it's perfect for val.town. You can switch themes by providing ?theme=<theme> and specify the language via ?lang=<language> Example You can play with a working example here . const res = await fetch(`https://just_be-highlight.web.val.run?lang=${lang}&theme=${theme}`, { method: "POST", body: code, }); console.log(await res.text()) Why? I want to add syntax highlighting to my blog soon and I'm experimenting with what it mean to offload parts of my rendering to val.town (behind a content-addressible cache, of course).
HTTP
// `shiki/wasm` contains the wasm binary inlined as base64 string.
engine: createOnigurumaEngine(shikiWasm),
export default async function(req: Request): Promise<Response> {
if (req.method !== "POST") return new Response(null, { status: 405 });
const { searchParams } = new URL(req.url);
โ€ฆ
181
โ€ฆ
Next