Search
valle_tmp_880820168898077728093213546584606
@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
@peterhartree
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,
sketch
@ff6347
P5 sketch Easily turn a p5.js sketch into a val. See https://www.val.town/v/saolsen/p5_sketch for an example. Usage Make a p5 sketch, you can import the p5 types to make it easier. import type * as p5 from "npm:@types/p5"; Export any "global" p5 functions. These are functions like setup and draw that p5 will call. Set the val type to http and default export the result of sketch , passing in import.meta.url . A full example looks like this. import type * as p5 from "npm:@types/p5";
export function setup() {
createCanvas(400, 400);
}
export function draw() {
if (mouseIsPressed) {
fill(0);
} else {
fill(255);
}
ellipse(mouseX, mouseY, 80, 80);
}
import { sketch } from "https://esm.town/v/saolsen/p5";
export default sketch(import.meta.url); How it works The sketch function returns an http handler that sets up a basic page with p5.js added. It then imports your module from the browser and wires up all the exports so p5.js can see them. All the code in your val will run in the browser (except for the default sketch export) so you can't call any Deno functions, environment variables, or other server side apis.
Script
# P5 sketch
Easily turn a p5.js sketch into a val. See https://www.val.town/v/saolsen/p5_sketch for an example.
## Usage
* Make a p5 sketch, you can import the p5 types to make it easier.
```typescript
* Export any "global" p5 functions. These are functions like `setup` and `draw` that p5 will call.
export function sketch(module: string, title = "P5 Sketch") {
return async function(req: Request): Promise<Response> {
// console.log("module:", module)
const url = new URL(req.url)
stevekrouse_minimal
@stevekrouse
@jsxImportSource https://esm.sh/react
HTTP (deprecated)
/** @jsxImportSource https://esm.sh/react */
const linkClass = "text-blue-500 hover:underline";
async function getHits() {
const [, , { rows: [[allHits]] }, { rows: [[todayHits]] }] = await sqlite.batch([
"CREATE TABLE IF NOT EXISTS stevekrouse_com_hits (timestamp DATETIME DEFAULT CURRENT_TIMESTAMP)",
"INSERT INTO stevekrouse_com_hits DEFAULT VALUES",
"SELECT COUNT(*) FROM stevekrouse_com_hits",
"SELECT COUNT(*) from stevekrouse_com_hits where timestamp > datetime('now', '-1 day')",
if (allHits % 100 === 0) email({ subject: `You got ${todayHits} hits today! (${allHits} total)` });
return { allHits, todayHits };
exa
@yawnxyz
// console.log(await search('banana'))
Script
const exa = new Exa(Deno.env.get("EXA_API_KEY"));
export const exaSearch = async ({ query, type, useAutoprompt, numResults, text, summary=true, highlights }) => {
const result = await exa.searchAndContents(
query,
type: type || "auto" || "neural",
useAutoprompt: useAutoprompt || true,
numResults: 10,
highlights: highlights || {
numSentences: 3,
highlightsPerUrl: 1,
parseXMLFastXML
@rustyb
An interactive, runnable TypeScript val by rustyb
Script
export const parseXMLFastXML = async (
xml: string
): Promise<Record<string, any>> => {
// Load the external dependency
const { XMLParser } = await import("npm:fast-xml-parser");
// Set some default options so we don't ignore attributes
const xmlOptions = {
ignoreAttributes: false,
attributeNamePrefix: "@_",
ignoreDeclaration: true,
decorator_router
@yieldray
Decorator Router Fair simple decorator based router, with GET/POST and middleware support. demo live demo: https://yieldray-decorator_router_demo.web.val.run/ import { get, post, all, use, registered, handler, type Context } from "https://esm.town/v/yieldray/decorator_router";
import { parseBearerAuth, transformResponse } from "https://esm.sh/serve-router@1.1.0/utils";
interface User {
id: number;
name: string;
}
const users: User[] = [
{ id: 0, name: "Alice" },
{ id: 1, name: "Ray" },
];
class _Server {
/**
* Decorator @get: Parses URLSearchParams into an object as the first parameter.
*/
@get("/users")
getAllUsers() {
return users; // Automatically wrapped in a Response.json
}
@get("/getUserByName") // GET /getUserByName?name=Alice
getUserByName({ name }: Record<string, string>) {
const user = users.find((u) => u.name === name);
if (user) {
return user; // Automatically wrapped as Response.json(user)
}
// Optionally, manually return a Response object
return Response.json({ error: "not found" }, { status: 404 });
}
@get("/user/:id") // GET /user/123
user(_: unknown, { params: { id } }: Context) {
return users.find((u) => u.id === Number(id));
}
/**
* Decorator @post: Parses the request body into an object as the first parameter.
*/
@post("/user") // POST /user
async createUser(user: User) {
if (users.find((u) => u.id === user.id)) {
return { error: "already exists!" };
}
await users.push(user); // Assume insertion into a database
return { ok: true, users };
}
@post("/user/:id") // POST /user/123
async updateUser(user: User, { params: { id }, request }: Context) {
const token = parseBearerAuth(request.headers.get("Authorization")!);
// Additional logic here...
}
@all("/")
home({ request }: { request: Request }) {
return {
registered,
method: request.method,
url: request.url,
headers: Object.fromEntries(request.headers.entries()),
};
}
@use("/*")
async corsMiddleware({ next, request }: Context) {
const resp = await next();
return transformResponse(resp, {
headers: {
"Access-Control-Allow-Origin": request.headers.get("origin") || "*",
},
});
}
}
// For Deno:
Deno.serve(handler);
// For val.town:
export default handler;
Script
# Decorator Router
Fair simple decorator based router, with GET/POST and middleware support.
## demo
live demo: <https://yieldray-decorator_router_demo.web.val.run/>
```ts
interface User {
export const app = ServeRouter({
onError(error) {
console.log(error);
const _registered: Array<{ method: string; path: string }> = [];
myApi
@tonycheal
An interactive, runnable TypeScript val by tonycheal
Script
export function myApi(name) {
return "hi " + name;
helloFriend
@nickgehring
An interactive, runnable TypeScript val by nickgehring
Script
import { myName } from "https://esm.town/v/rodrigotello/myName?v=1";
export let helloFriend = "Hello, " + myName;
watchAnthropicCircuitsBlog
@jsomers
An interactive, runnable TypeScript val by jsomers
Cron
export const watchWebsite = async () => {
const url = "https://transformer-circuits.pub";
const newHtml = await fetch(url).then(r => r.text());
const key = "watch:" + url;
let oldHtml = "";
try {
oldHtml = await blob.get(key).then(r => r.text());
} catch (error) {
console.log("error");
await blob.set(key, newHtml);
verifyToken
@pomdtr
An interactive, runnable TypeScript val by pomdtr
Script
async function fetchUser(token: string): Promise<{ id: string }> {
const resp = await fetch("https://api.val.town/v1/me", {
headers: {
Authorization: `Bearer ${token}`,
if (resp.status !== 200) {
throw new Error("Could not fetch user");
return resp.json();
export async function verifyToken(token: string) {
try {
const [currentUser, requestUser] = await Promise.all([fetchUser(Deno.env.get("valtown")), fetchUser(token)]);
animatedReadmeSVG
@maxm
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") {
pekoExample
@maxm
An interactive, runnable TypeScript val by maxm
HTTP (deprecated)
import * as Peko from "https://deno.land/x/peko@2.0.0/mod.ts";
export const pekoExample = async (request) => {
const server = new Peko.Router();
server.get("/", () => new Response("Yes? Peko is also serving something at /hello"));
server.get("/hello", () => new Response("Hello world!"));
return server.requestHandler(request);
mermaidHtml
@jdan
An interactive, runnable TypeScript val by jdan
Script
export async function mermaidHtml() {
const numElements = 30;
const ngram = 2;
const mermaid = mermaidStateDiagramOfMarkov(
markov(
elements.slice(0, numElements),
ngram,
return new Response(
<!DOCTYPE html>
<html lang="en">
inventory
@ejfox
* This val creates an interactive tech stack wizard that generates a video game-style inventory screen.
* It uses React for the UI, leverages emoji and Unicode symbols for a visually rich experience, and
* incorporates Tailwind CSS for elegant, grayscale styling.
* The wizard allows users to select tools, libraries, and APIs, then displays them in a shareable format.
HTTP
* This val creates an interactive tech stack wizard that generates a video game-style inventory screen.
* It uses React for the UI, leverages emoji and Unicode symbols for a visually rich experience, and
* incorporates Tailwind CSS for elegant, grayscale styling.
* The wizard allows users to select tools, libraries, and APIs, then displays them in a shareable format.
/** @jsxImportSource https://esm.sh/react */
// Define tech options with emojis or Unicode symbols as icons
const techOptions = [
{ name: "React", icon: "⚛️" },
{ name: "Vue", icon: "🖖" },
{ name: "Angular", icon: "🅰️" },