Search
scarletSole
@tempdev
An interactive, runnable TypeScript val by tempdev
HTTP (deprecated)
interface Context {
url: string;
const app = new Hono();
app.get("/dood/:dood", async (c) => {
const { dood } = c.req.param();
const ctx = { url: "https://d000d.com/e/" + dood };
return c.json(await doodstream(ctx));
app.get("/tape/:tape", async (c) => {
const { tape } = c.req.param();
const ctx = { url: "https://streamtape.com/e/" + tape };
neutralLimeAlbatross
@stevekrouse
@jsxImportSource https://esm.sh/hono@latest/jsx
HTTP
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
const app = new Hono();
// Add a middleware to include the viewport meta tag and additional CSS in all HTML responses
app.use("*", async (c, next) => {
await next();
if (c.res.headers.get("Content-Type")?.includes("text/html")) {
const html = await c.res.text();
const updatedHtml = html.replace(
"</head>",
<meta name="viewport" content="width=device-width, initial-scale=1.0">
gitReleaseNotes
@kylem
Github Release Notes from package.json Enter a raw github URL to a package.json, https://raw.githubusercontent.com/username/repo/branch/package.json and get a response of all release notes for all packages from current to latest. Roadmap [ ] GenAI summary [ ] Weekly cron email reports [ ] Send update PRs [ ] Other package managers like PyPi [ ] Formatting/styling [ ] Loading spinner
HTTP (deprecated)
# Github Release Notes from `package.json`
Enter a raw github URL to a package.json,
https://raw.githubusercontent.com/username/repo/branch/package.json
and get a response of all release notes for all packages from current to latest.
## Roadmap
- [ ] GenAI summary
/** @jsxImportSource npm:hono@3/jsx */
interface PackageJson {
dependencies?: Record<string, string>;
devDependencies?: Record<string, string>;
gitReleaseNotes
@stevekrouse
Github Release Notes from package.json Enter a raw github URL to a package.json, https://raw.githubusercontent.com/username/repo/branch/package.json and get a response of all release notes for all packages from current to latest. Roadmap [ ] GenAI summary [ ] Weekly cron email reports [ ] Other package managers like PyPi [ ] Formatting/styling [ ] Loading spinner
HTTP (deprecated)
# Github Release Notes from `package.json`
Enter a raw github URL to a package.json,
https://raw.githubusercontent.com/username/repo/branch/package.json
and get a response of all release notes for all packages from current to latest.
## Roadmap
- [ ] GenAI summary
/** @jsxImportSource npm:hono@3/jsx */
interface PackageJson {
dependencies?: Record<string, string>;
devDependencies?: Record<string, string>;
hackernews
@pomdtr
An interactive, runnable TypeScript val by pomdtr
Script
#!/usr/bin/env -S deno run -A
const manifest = {
title: "Hacker News",
description: "Browse Hacker News",
commands: [
name: "browse",
title: "Show a feed",
mode: "filter",
params: [{ name: "topic", label: "Topic", type: "text" }],
} as const satisfies sunbeam.Manifest;
valwriter
@yawnxyz
Doesn't seem to work on val.town, should work in principle
HTTP (deprecated)
Doesn't seem to work on val.town, should work in principle
/** @jsxImportSource npm:hono@3/jsx */
const examples = [
user: "website that shows the current time",
content: `/** @jsxImportSource npm:react */
export default function() {
return <h1>{new Date().toLocaleTimeString()}</h1>;
user: `A collaborative poem builder.
It stores each line of the poem in sqlite.
It has a textbox that lets anyone input a new line to the poem.`,
scarletSole
@tempguy
An interactive, runnable TypeScript val by tempguy
HTTP (deprecated)
interface Context {
url: string;
const app = new Hono();
app.get("/dood/:dood", async (c) => {
const { dood } = c.req.param();
const ctx = { url: "https://d000d.com/e/" + dood };
return c.json(await doodstream(ctx));
app.get("/tape/:tape", async (c) => {
const { tape } = c.req.param();
const ctx = { url: "https://streamtape.com/e/" + tape };
meta
@postpostscript
An interactive, runnable TypeScript val by postpostscript
Script
const moduleCache = new Map<string, any>();
const moduleSourceCache = new Map<string, string>();
export async function importModule<ModuleType>(moduleName: string, checkPrivacy = true) {
const url = moduleName[0] === "@"
? `https://esm.town/v/${moduleName.slice(1)}`
: moduleName;
const name = getValNameFromUrl(url).slice(1);
const res = await fetch(`https://api.val.town/v1/alias/${name}`, {
headers: {
authorization: `Bearer ${Deno.env.get("valtown")}`,
personalWebsite
@willthereader
@jsxImportSource https://esm.sh/hono@latest/jsx
HTTP
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
const app = new Hono();
// Add a middleware to include the viewport meta tag and additional CSS in all HTML responses
app.use("*", async (c, next) => {
await next();
if (c.res.headers.get("Content-Type")?.includes("text/html")) {
const html = await c.res.text();
const updatedHtml = html.replace(
"</head>",
<meta name="viewport" content="width=device-width, initial-scale=1.0">
honoExample
@willthereader
@jsxImportSource https://esm.sh/hono@latest/jsx
HTTP (deprecated)
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
const app = new Hono();
app.get("/", (c) =>
c.html(
<html>
<head>
<title>Will Krouse</title>
<style
dangerouslySetInnerHTML={{
__html:
VALLErun
@janpaul123
The actual code for VALL-E: https://www.val.town/v/janpaul123/VALLE
HTTP (deprecated)
The actual code for VALL-E: https://www.val.town/v/janpaul123/VALLE
/** @jsxImportSource https://esm.sh/react */
function parseSearchReplaceBlocks(content: string): Array<{ searchStart: string; searchEnd: string; replace: string }> {
content = content.replaceAll("\r\n", "\n");
const regex =
/\[SEARCH_START_SINGLE_LINE\]\n([\s\S]*?)\n\[\/SEARCH_START_SINGLE_LINE\]\s*\[SEARCH_END_SINGLE_LINE\]\n([\s\S]*?)\n?\[\/SEARCH_END_SINGLE_LINE\]\s*\[REPLACE\]\n([\s\S]*?)\n\[\/REPLACE\]/g;
const blocks = [];
let match;
while ((match = regex.exec(content)) !== null) {
blocks.push({
npmExample
@andybak
An interactive, runnable TypeScript val by andybak
Script
export let npmExample = (async () => {
const { default: multiavatar } = await import("npm:@multiavatar/multiavatar");
return multiavatar("fsdfsd");
greenWren
@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>
<style>{"html { font-family: sans-serif; }"}</style>
welcomeEmail
@rodrigotello
An interactive, runnable TypeScript val by rodrigotello
Script
export let welcomeEmail = `
<p>Welcome to Val Town! Here are some resources to help you set up:</p>
<ol style="padding-left:16px;">
<li style="margin-bottom:32px">
<h3>What is a val?</h3>
<p>A val is small JavaScript or TypeScript snippet of code, written in the browser and run in our servers.
Create scheduled functions, email yourself, and persist small pieces of data — all from the browser.<p>
</li>
<li style="margin-bottom:32px">
<h3>Join our Discord</h3>
orangeHello
@kirineko
@jsxImportSource npm:react
HTTP (deprecated)
/** @jsxImportSource npm:react **/
export default (req: Request) => {
return new Response(
renderToString(
<html>
<link rel="stylesheet" href="https://unpkg.com/missing.css@1.1.1" />
<main>
<h1>Hello kirineko!</h1>
<p>This is your first val. hello world!</p>
</main>