Search

tealRattlesnake

@pomdtr

An interactive, runnable TypeScript val by pomdtr

HTTP (deprecated)

const app = new Hono();

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

return streamText(c, async (stream) => {

// Write a text with a new line ('\n').

await stream.writeln("Hello");

// Wait 1 second.

await stream.sleep(1000);

// Write a text without a new line.

await stream.write(`Hono!`);

export default app.fetch;

safeMessageBoard

@stevekrouse

@jsxImportSource npm:hono@3/jsx

HTTP (deprecated)

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

const app = new Hono();

const filter = new Filter();

sqlite.execute(`

delete from messages_safe (

id INTEGER PRIMARY KEY AUTOINCREMENT,

content TEXT,

time TIMESTAMP DEFAULT CURRENT_TIMESTAMP

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

return c.html(

getModelBuilder

@webup

An interactive, runnable TypeScript val by webup

1 1 53

Script

export async function getModelBuilder(spec: {

type?: "llm" | "chat" | "embedding";

provider?: "openai" | "huggingface";

} = { type: "llm", provider: "openai" }, options?: any) {

const { extend, cond, matches, invoke } = await import("npm:lodash-es");

// Set up LangSmith tracer

const { Client } = await import("npm:langsmith");

const { LangChainTracer } = await import("npm:langchain/callbacks");

const client = new Client({

apiUrl: "https://api.smith.langchain.com",

htmxExample

@neverstew

@jsxImportSource https://esm.sh/preact

HTTP (deprecated)

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

export const htmxExample = async (request: Request): Promise<Response> => {

const app = new Hono();

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

c.html(html(

<head>

<script

oldstyle

@easrng

oldstyle bring back the old @import.syntax usage: import oldstyle from "https://esm.town/v/easrng/oldstyle"; const fn = await oldstyle` export default async () => { // import vals const fetchFns = [@std.fetch, @easrng.moduleFetch]; console.log( await Promise.all( fetchFns.map((fn) => fn("https://icanhazip.com").then((res) => res.text()), ), ), ); // get environment variables with @me.secrets console.log(@me.secrets.FORCE_COLOR); // update vals console.log(@easrng.counter++); }; // you don't have to have an export btw `; fn();

Script

# oldstyle

bring back the old @import.syntax

## usage:

```tsx

const fn = await oldstyle`

export default async () => {

// (c) easrng 2024

// SPDX-License-Identifier: CC-BY-NC-SA

type Token =

| { type: "StringLiteral"; value: string; closed: boolean }

dominoDomExample

@tmcw

domino example Domino is an implementation of the document object model that you can use to build "webpages" without requiring a browser or a heavy browser-like abstraction. If you need even less DOM-compatibility and just want to parse some HTML, cheerio is an even more lightweight abstraction that works great.

Script

# domino example

[Domino](https://github.com/fgnass/domino) is an implementation of the document object model that you can use to build "webpa

If you need even less DOM-compatibility and just want to parse some HTML, [cheerio](https://www.val.town/v/tmcw.cheerioExampl

export let dominoDomExample = (async () => {

const { default: domino } = await import("npm:domino");

const document = domino.createDocument();

document.body.innerHTML = "<div class=\"container\"></div>";

const container = document.querySelector(".container");

const button = document.createElement("button");

button.textContent = "click me!";

nhttpExample

@maxm

An interactive, runnable TypeScript val by maxm

1 1

HTTP (deprecated)

import { nhttp } from "npm:nhttp-land@1";

export const nhttpExample = async (request) => {

const app = nhttp();

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

return "Hello from nhttp";

app.get("/cat", () => {

return { name: "cat" };

return app.handleRequest(request);

monetaryBronzeMongoose

@perbhat

@jsxImportSource npm:react

HTTP (deprecated)

/** @jsxImportSource npm:react **/

const TrackpadScale = () => {

const [forceText, setForceText] = useState("Place object here");

useEffect(() => {

const maxForce = 3.0;

const gramsPerForceUnit = 1000 / maxForce;

const handleForce = (event: MouseEvent) => {

if ("webkitForce" in event) {

const force = (event as any).webkitForce;

const grams = Math.round(force * gramsPerForceUnit);

remarkHtmlTest

@stevekrouse

// Forked from @nbbaier.remarkHtmlTest

Script

export const remarkHtmlTest = (async () => {

const { unified } = await import(

"https://cdn.jsdelivr.net/npm/unified@10/+esm"

const { default: remarkParse } = await import("npm:remark-parse");

const { default: remarkHTML } = await import("npm:remark-html");

const output = await unified()

.use(remarkParse)

.use(remarkHTML)

.process("# Hello World")

.then((file) => console.log(String(file)));

dialog

@jdan

dialog Renders windows 98 dialog boxes as SVGs. Using satori and styles from 98.css Usage https://jdan-dialog.web.val.run/? w =200& h =110& title =Hello& caption =World w (default: 200): the width of the dialog h (default: 110): the height of the dialog title (default: "{title}"): the text in the title bar caption (default: "{caption}"): the caption text

HTTP

## dialog

Renders windows 98 dialog boxes as SVGs. Using [satori](https://github.com/vercel/satori) and styles from [98.css](https://jd

### Usage

![A window with title "Hello" and caption "World" with two buttons – OK and Cancel](https://jdan-dialog.web.val.run/?w=200&h=

[https://jdan-dialog.web.val.run/?**w**=200&**h**=110&**title**=Hello&**caption**=World](https://jdan-dialog.web.val.run/?w=2

* `w` (default: 200): the width of the dialog

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

const app = new Hono();

const colors = {

textColor: "#222222",

cliOld

@pomdtr

Cli Vals Cli vals are a new type of val (same as http, email, cron and script vals). A cli val must use a function without args as it's default export. The function body will run on the user device using deno . An error message will be shown if deno is not installed. export default function() { if (Deno.args.length == 0) { console.error("<name> arg is required!"); Deno.exit(1); } console.log(`Hey ${Deno.args[0]}!`); } Fork @pomdtr/example_cli to get started. Of course, you can use a cli framework to parse arguments (ex: cliffy ). Running a cli val Go to https://pomdtr-cli.web.val.run/v/<author>/<name>[?v=<version>] to get a runnable script for your val. You can pipe the script to a shell to test it curl 'https://pomdtr-cli.web.val.run/v/pomdtr/cli_example' | sh -s Steve Hello Steve! Or save it to your $PATH . # save the script to the ~/.local/bin folder curl 'https://pomdtr-cli.web.val.run/v/pomdtr/cli_example' > ~/.local/bin/cli_example # make the script executable chmod +x ~/.local/bin/cli_example # run the installed val cli_example Steve Allowing cli vals to access private resources Cli vals run on your device, so by default they can only access public/unlisted vals. You can set the DENO_AUTH_TOKENS env var in your shell config to allow deno to import private vals. export DENO_AUTH_TOKENS=<your-token>@esm.town Cli vals don't have access to val town tokens. Instead of trying to replicate your valtown secrets locally, you can configure your cli vals to call your http endpoints using fetch .

HTTP (deprecated)

# Cli Vals

Cli vals are a new type of val (same as http, email, cron and script vals). A cli val must use a function without args as it'

The function body will run on the user device using [deno](https://deno.com). An error message will be shown if deno is not i

```typescript

export default function() {

if (Deno.args.length == 0) {

const script = (esmUrl) =>

`#!/bin/sh

# check if deno is installed

if ! command -v deno >/dev/null; then

htmxTimed

@neverstew

An interactive, runnable TypeScript val by neverstew

Script

export const htmxTimed = async (request: Request): Promise<Response> => {

const start = performance.now();

const { html } = await import("npm:common-tags");

const afterCommonTags = performance.now() - start;

console.log("after common-tags", afterCommonTags);

const { Hono } = await import("npm:hono");

const afterHono = performance.now() - afterCommonTags;

console.log("after hono", afterHono);

const app = new Hono();

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

dateme_home

@stevekrouse

@jsxImportSource npm:hono@3/jsx

4 10

Script

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

export default function Home(c) {

return c.html(

Date thoughtfully

</div>

anthropicCaching

@stevekrouse

* This val creates an interactive webpage that demonstrates the functionality of the Anthropic API. * It uses a React frontend with an input for the API key and buttons to trigger different operations. * The Anthropic API key is stored in the frontend state and sent with each API request.

HTTP (deprecated)

* This val creates an interactive webpage that demonstrates the functionality of the Anthropic API.

* It uses a React frontend with an input for the API key and buttons to trigger different operations.

* The Anthropic API key is stored in the frontend state and sent with each API request.

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

function App() {

const [apiKey, setApiKey] = useState("");

const [outputs, setOutputs] = useState({

nonCachedCall: "",

cachedCall: "",

multiTurn: "",

assert

@andreterron

An interactive, runnable TypeScript val by andreterron

Script

export async function assert(a, b, message?: string) {

const { default: { isEqual } } = await import("npm:lodash");

if (!isEqual(a, b)) {

throw new Error("Assert failed! " + (message ?? ""));

…

16 17

19 20

…

364