Search

registryExample

@lbb00

An interactive, runnable TypeScript val by lbb00

HTTP

export async function LoginRegistryExample(request: Request): Promise<Response> {

return new Response(

html`

<html>

<style>

form {

display: none;

input[type='radio']:checked + label + form {

display: block;

</style>

hydrate_hono_islands

@pomdtr

An interactive, runnable TypeScript val by pomdtr

Script

const islands = Array.from(document.querySelectorAll("[data-hydration-src]"));

if (islands.length > 0) {

const { render } = await import("https://esm.sh/hono/jsx/dom");

const { jsx: _jsx } = await import("https://esm.sh/hono/jsx/dom/jsx-runtime");

for (const island of islands) {

let src = island.getAttribute("data-hydration-src");

if (!src.startsWith("https://")) {

src = `https://esm.town/v/${src}`;

let name = island.getAttribute("data-hydration-name");

if (!name) {

emojiExploder

@iamseeley

@jsxImportSource npm:hono@3/jsx

HTTP

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

const app = new Hono();

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

return c.html(

<div>

<h1>Emoji exploder</h1>

<div>Enter an emoji and see what it's composed of</div>

</form>

chat

@darrinm

// https://api.val.town/express/@darrinm.chat

Script

// https://api.val.town/express/@darrinm.chat

export const chat = (req, res) => {

const messages = chatMessages.map(({ message, sender }) =>

`<li><span class="font-semibold text-gray-900">${sender}: </span>${message}</li>`

.reverse()

.join("");

res.set("Content-Type", "text/html");

res.send(`

<!doctype html>

<html>

web_o6DeeRMtzQ

@dhvanil

An interactive, runnable TypeScript val by dhvanil

HTTP

export async function web_o6DeeRMtzQ(req) {

return new Response(`<!DOCTYPE html>

<html>

<head>

<title>Hello World</title>

<style>

body { font-family: sans-serif; margin: 2rem; }

</style>

datme_home_geo

@stevekrouse

@jsxImportSource npm:hono@3/jsx

HTTP

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

// export default function Home(c) {

function Home(c) {

return c.html(

Date thoughtfully 2

</div>

canvasvalcontributionchart

@ejfox

An interactive, runnable TypeScript val by ejfox

HTTP

async function fetchContributionData() {

try {

const response = await fetch('https://ejfox-allvals.web.val.run');

if (!response.ok) {

throw new Error(`HTTP error! status: ${response.status}`);

const data = await response.json();

return processContributionData(data.vals);

} catch (error) {

console.error('Error fetching contribution data:', error);

throw error;

valCanvasHTML

@liamdanielduffy

An interactive, runnable TypeScript val by liamdanielduffy

Script

export const valCanvasHTML = `<!DOCTYPE html>

<html>

<head>

<style>

#movableBox {

position: absolute;

width: 300px;

height: 200px;

border: 1px solid black;

</style>

cliServer

@pomdtr

An interactive, runnable TypeScript val by pomdtr

Script

export class Cli {

constructor(public author: string) {}

fetch = async (req: Request) => {

const url = new URL(req.url);

const [name, ...args] = url.pathname.slice(1).split("/");

if (!name) {

return new Response("Not Found", { status: 404 });

const esmUrl = `https://esm.town/v/${this.author}/${name}`;

const { output, code } = await this.run(esmUrl, { args });

if (code !== 0) {

petunia_chat

@robertmccallnz

An interactive, runnable TypeScript val by robertmccallnz

HTTP

const app = new Hono();

const PETUNIA_SYSTEM_PROMPT = `You are Petunia, an elegant flower trader living in Wellington, New Zealand.

Persona Details:

- Appearance: Red-headed, voluminous, wears glasses

- Personality: Nerdy, flirty, witty, punctual

- Quirks: Sneezes often, has a nose thing, loves sneaky cigarettes

- Passions: Gardening, flowers, abstract art, design

- Daily Routine: Drinks long blacks, eats pizza

- Professional: Real-time market follower, can send market alerts

- Communication Style: Polite, friendly, educational, careful

chat

@beshkenadze

// https://api.val.town/express/@beshkenadze.chat

Script

// https://api.val.town/express/@beshkenadze.chat

export const chat = (req, res) => {

const messages = chatMessages

.map(

({ message, sender }) =>

`<li><span class="font-semibold text-gray-900">${sender}: </span>${message}</li>`

.reverse()

.join("");

res.set("Content-Type", "text/html");

res.send(`

dateme_browse

@vawogbemi

@jsxImportSource npm:hono@3/jsx

Script

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

function absoluteURL(url) {

if (url.startsWith("http://") || url.startsWith("https://"))

return url;

else return "https://" + url;

let headers = [

"Name",

"Age",

"Location",

"Linkedin",

valle_tmp_6230585591494925520231921242577466

@janpaul123

// This script sets up a simple HTTP server for a comment box using Deno's Blob Storage for persistence.

HTTP

// This script sets up a simple HTTP server for a comment box using Deno's Blob Storage for persistence.

// Comments are stored in a JSON array in Blob Storage. When users submit a new comment, it is added to the array.

// The main page displays all stored comments along with a form to submit a new comment.

const key = "comments";

async function getComments(): Promise<Array<{ id: string; content: string }>> {

const comments = await blob.getJSON(key) as Array<{ id: string; content: string }> | undefined;

return comments ?? [];

async function addComment(content: string) {

const comments = await getComments();

comments.push({ id: ulid(), content });

web_arkk46ZTkl

@dhvanil

An interactive, runnable TypeScript val by dhvanil

HTTP

export async function web_arkk46ZTkl(req) {

return new Response(`<!DOCTYPE html>

<html>

<head>

<title>Hello World</title>

<style>

body { font-family: sans-serif; margin: 2rem; }

</style>

evaltownWorker

@maxm

An interactive, runnable TypeScript val by maxm

Script

self.onmessage = async (e) => {

const port = e.data.port as number;

const importUrl = e.data.importUrl as string;

start(port, importUrl);

let mod: { default: (req: Request) => Response } | undefined;

let modError: Error | undefined;

let doneLoading = false;

const pendingRequests: {

req: Request;

resolve: (value: Response | Promise<Response>) => void;

…

126 127

128

129 130

…

252