Search

dateme_home

@iamseeley

@jsxImportSource npm:hono@3/jsx

Script

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

export default function Home(c) {

const AutocompleteInput = () => {

const [inputValue, setInputValue] = useState('');

const [filteredLocations, setFilteredLocations] = useState([]);

const [isOpen, setIsOpen] = useState(false);

const handleInputChange = (e) => {

const value = e.target.value;

setInputValue(value);

setIsOpen(true);

ilyBday

@emilycoe

@jsxImportSource https://esm.sh/preact

HTTP (deprecated)

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

export default async function(req: Request) {

return new Response(

render(

<html>

<head>

<title>Your Girlfriend's Bday</title>

</head>

<body>

reactExample

@tmcw

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

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

import { renderToString } from "npm:react-dom/server";

export const reactExample = (request: Request) =>

new Response(renderToString(<div>Test {1 + 1}</div>), {

headers: {

"Content-Type": "text/html",

tell2

@yawnxyz

// Store messages via SQLite

Script

let { messages2 } = await import("https://esm.town/v/stevekrouse/messages2");

// Store messages via SQLite

// (stores at @me.messages2 in the current version)

// like `https://www.val.town/@stevekrouse.tell` but cooler!

export const tell2 = async (msg) => {

const { DB } = await import("https://deno.land/x/sqlite/mod.ts");

const db = new DB();

// Get existing messages (if any)

if (messages2 !== undefined) {

db.deserialize(messages2);

personalWebsite

@stevekrouse

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

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

export const personalWebsite = (request: Request) => {

return new Response(

renderToString(

<html>

<head>

<title>Will Krouse</title>

<style

dangerouslySetInnerHTML={{

__html:

promptSampleTemplates

@bluemsn

An interactive, runnable TypeScript val by bluemsn

Script

export const promptSampleTemplates = (async () => {

const { PromptTemplate } = await import("npm:langchain/prompts");

const prompt = new PromptTemplate({

inputVariables: ["adjective", "content"],

template: "Tell me a {adjective} joke about {content}.",

const formattedPrompt = await prompt.format({

adjective: "funny",

content: "chickens",

return formattedPrompt;

reactSSRExample

@vtdocs

An interactive, runnable TypeScript val by vtdocs

Express

export const reactSSRExample = async (req: express.Request, res: express.Response) => {

// Import React

const React = await import("npm:react");

const ReactDOMServer = await import("npm:react-dom/server");

// Define some components

function TodoItem(props) {

return React.createElement("li", null, props.text);

function TodoList(props) {

const todoItems = props.items.map((item, index) =>

React.createElement(TodoItem, { key: index, text: item })

asciiNycCameras

@maxm

ASCII NYC Traffic Cameras All of NYC's traffic cameras available as streaming ASCII images: https://maxm-asciinyccameras.web.val.run/ NYC has a bunch of traffic cameras and makes them available through static images like this one . If you refresh the page you'll see the image update every 2 seconds or so. I thought it might be fun to make these cameras viewable as an ASCII art video feed. I made a small library that takes most of its logic from this repo . You can see a basic example of how to convert any image to ASCII here . I pull in NYC GeoJSON from here and then hook up a Server-Sent Events endpoint to stream the ASCII updates to the browser. (Polling would work just as well, I've just been on a bit of a SSE kick lately.) Hilariously (and expectedly) The ASCII representation is about 4x the size of the the source jpeg and harder to see, but it has a retro-nostalgia look to it that is cool to me :)

HTTP (deprecated)

# ASCII NYC Traffic Cameras

All of NYC's traffic cameras available as streaming ASCII images: https://maxm-asciinyccameras.web.val.run/

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

const info = extractValInfo(import.meta.url);

const app = new Hono();

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

copperBarnacle

@luwes

@jsxImportSource https://esm.sh/preact

HTTP (deprecated)

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

export default async function(req: Request) {

return new Response(

render(

<head>

<title>Media Theme TailwindCSS Audio</title>

zod_demo_http

@stevekrouse

This val shows how to break up your HTTP val into three vals: @stevekrouse/zod_demo_http (this val) @stevekrouse/zod_demo_frontend (client-side react component) @stevekrouse/zod_demo_shared (code that is imported in both vals, but only run on the backend) I have these vals in a folder. Unfortunately, folders are not publicly shareable, which is why I listed all the vals above. The Val Town full-screen editor makes it a lot easier to work with multiple vals at once. The trickiest and most interesting part of this particular demo is how we import just the zod type in the frontend which avoids the error if we were to import any real value from that shared file. In this sense, it's not a truly safe shared file. Open questions I don't know why zod types aren't working when imported via esm.sh I don't know how we would get zod validation working on the frontend without reimporting zod from esm.sh (which would then lose us types or require us to duplicate the zod code)

HTTP

This val shows how to break up your HTTP val into three vals:

* @stevekrouse/zod_demo_http (this val)

* @stevekrouse/zod_demo_frontend (client-side react component)

* @stevekrouse/zod_demo_shared (code that is imported in both vals, but only run on the backend)

I have these vals in a folder. Unfortunately, folders are not publicly shareable,

which is why I listed all the vals above. The Val Town full-screen editor makes it

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

if (request.method === "POST" && new URL(request.url).pathname === "/register") {

try {

const body = await request.json();

emeraldCrocodile

@burkaygur

An interactive, runnable TypeScript val by burkaygur

Script

import * as fal from "npm:@fal-ai/serverless-client";

fal.config({

// Can also be auto-configured using environment variables:

credentials: Deno.env.get("FAL_KEY"),

const prompt = "a cute and happy dog";

const result: any = await fal.run("fal-ai/fast-lightning-sdxl", { input: { prompt } });

console.log(result.images[0].url);

icsTestServe

@tal

An interactive, runnable TypeScript val by tal

Script

export const icsTestServe = async () => {

const ical = await import("npm:ical-generator");

const calendar = ical.default({ name: "Tal's testing calendar" });

calendar.method(ical.ICalCalendarMethod.PUBLISH);

const startTime = new Date();

calendar.createEvent({

start: startTime,

allDay: true,

summary: "Example Event",

description: "It works ;)",

tomatoDonkey

@simonzhangs

An interactive, runnable TypeScript val by simonzhangs

Script

import _ from "npm:lodash-es";

let numbers = _.range(10);

console.log(numbers.map(n => n * 2));

valshot

@vladimyr

Val Shot Generate val source code screenshot using sourcecodeshots.com ⚠️ This service is offered for personal use under a reasonable usage policy as stated here: https://sourcecodeshots.com/docs 📣 Special thanks to @pomdtr for their help and contributions! Usage https://vladimyr-valshot.web.val.run/v/<author>/<val> Example https://vladimyr-valshot.web.val.run/v/vladimyr/valshot https://vladimyr-valshot.web.val.run/v/pomdtr/readme

2 7

HTTP (deprecated)

# Val Shot

[![](https://vladimyr-licensebadge.web.val.run/v/vladimyr/valshot)](https://spdx.org/licenses/0BSD.html)

Generate val source code screenshot using [sourcecodeshots.com](https://sourcecodeshots.com)

⚠️ This service is offered for personal use under a reasonable usage policy as stated here: https://sourcecodeshots.com/docs

📣 Special thanks to @pomdtr for their help and contributions!

## Usage

// SPDX-License-Identifier: 0BSD

const router = new Hono();

router.get("/", toHonoHandler(serveReadme(import.meta.url)));

router.get("/v/:author/:name", async (c) => {

valle_tmp_1369396001916440808441248753827946

@janpaul123

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

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

// Set these to your own

const username = "janpaul123";

const tempValsParentFolderId = "4bb7b010-4443-11ef-8642-de64eea55b61";

const valTownToken = Deno.env.get("valtown");

const vt = new ValTown({ bearerToken: valTownToken });

const app = new Hono();

const jsxResponse = (jsx) => {

return new Response(renderToString(jsx), { headers: { "Content-Type": "text/html" } });

const systemprompt = `The conversation below is your recent interaction with the user.

…

25 26

28 29

…

364