Search

honoExample

@bis

Hono Here's an example using the Hono server library with the Web API . It works great!

HTTP (deprecated)

# Hono

Here's an example using the [Hono](https://hono.dev/) server library with the [Web API](https://docs.val.town/api/web). It wo

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

const app = new Hono();

app.get("/", (c) => c.text("Hono?"));

app.get("/hi", (c) => c.text("Hi!"));

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

const name = c.req.param("name");

return c.text(`Hi ${capitalize(name)}`);

function capitalize(string) {

remark

@stevekrouse

@jsxImportSource https://esm.sh/preact

Script

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

export const remark = ({ title, content }) => async (req: Request) =>

new Response(

render(

<html>

<head>

<title>Title</title>

<style>

@import url(https://fonts.googleapis.com/css?family=Droid+Serif);

@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);

sqliteExplorerApp

@postpostscript

fork of @nbbaier/sqliteExplorerApp with my authentication middleware

HTTP (deprecated)

fork of @nbbaier/sqliteExplorerApp with my authentication middleware

/** @jsxImportSource https://esm.sh/hono@latest/jsx **/

EditorSection,

MockTable,

Separator,

Table,

TablesList,

} from "https://esm.town/v/nbbaier/sqliteStudioComponents";

type AuthContextVariables,

authMiddlewareCookie,

tapMochaToNode

@barelyhuman

tapMochaToNode A simple codemod to modify existing node tap v16 mocha style tests to node:test runner syntax. It still keeps the tap assertion utils but replaces everything else to use node's runner instead.

Script

# tapMochaToNode

A simple codemod to modify existing node tap v16 mocha style tests to `node:test` runner syntax. It still keeps the tap asser

run();

async function run() {

if (!import.meta.main) return;

const flags = {

dry: false,

const args = Deno.args.slice();

const fileArgs = args.filter((d) => {

if (d.startsWith("--")) {

test_explorer_router

@pomdtr

@jsxImportSource npm:hono/jsx

2 6

Script

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

createHistory,

type HistoryEntry,

readHistory,

writeHistory,

} from "https://esm.town/v/pomdtr/test_explorer_history";

const router = new Hono();

const { author } = extractValInfo(import.meta.url);

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

try {

bumpyGreenAntelope

@hunty

Fetch Template Example template to quickly get started with a backend for Fetch in Framer.

HTTP (deprecated)

# Fetch Template

Example template to quickly get started with a backend for Fetch in Framer.

import { cors } from "npm:hono/cors";

const app = new Hono();

app.use(cors());

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

return c.json({ data: "https://gravatar.com/avatar/cb18420ea6d5e7d80748de33a18b6149?size=256" });

export default app.fetch;

axiosTest

@andreterron

An interactive, runnable TypeScript val by andreterron

Script

export const axiosTest = (async () => {

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

const res = await axios.get("https://jsonplaceholder.typicode.com/todos/1");

return res;

@hoa

An interactive, runnable TypeScript val by hoa

Script

let getEpicTvProduct = async (url) => {

const cheerio = await import("npm:cheerio@1.0.0-rc.12");

const html = await (await fetch(url)).text();

const $ = cheerio.load(html);

console.log("how it run?");

return {

name: $(".page-title").text().trim(),

discount: $(".sale-value").text().trim(),

price: $("[data-price-type=\"finalPrice\"]").text().trim(),

oldPrice: $("[data-price-type=\"oldPrice\"]:first").text().trim(),

cyanGuppy

@niek

// Uncomment this line for one run of the Val to create the DB lol

HTTP (deprecated)

// Uncomment this line for one run of the Val to create the DB lol

// await sqlite.execute(`create table if not exists SPOTIFY_AUTH_2(id text primary key, data text)`);

export const db = drizzle(sqlite as any);

export const table = sqliteTable("SPOTIFY_AUTH_2", {

id: text("id").primaryKey(),

data: text("data"),

const thisURL = thisWebURL();

const redirect_uri = thisURL + "/callback";

export let spotifyRequestToken = ({ client_id, client_secret, code, redirect_uri }) =>

fetchJSON("https://accounts.spotify.com/api/token", {

emeraldCrocodile

@isidentical

An interactive, runnable TypeScript val by isidentical

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);

auth

@brianleroux

An interactive, runnable TypeScript val by brianleroux

Script

export async function login(c) {

const body = await c.req.formData();

const loggedIn = body.get("password") === Deno.env.get("PASSWORD");

await setSignedCookie(c, "loggedIn", loggedIn + "", Deno.env.get("SECRET"));

export async function logout(c) {

await setSignedCookie(c, "loggedIn", "false", Deno.env.get("SECRET"));

export async function isLoggedIn(c) {

const { loggedIn } = await getSignedCookie(c, Deno.env.get("SECRET"));

console.log("loggedIn", loggedIn);

return loggedIn === "true";

mathemagic

@gueejla

UI for mathematical visualizations and calculations

HTTP (deprecated)

UI for mathematical visualizations and calculations

/** @jsxImportSource npm:react **/

export default async function(req: Request): Promise<Response> {

const spell_list = await blob.list();

const spells: any[] = [];

for (const spell of spell_list) {

const spell_data = await blob.getJSON(spell.key);

const codePoint = String.fromCodePoint(parseInt(spell_data["emoji"].replace("U+", ""), 16));

spells.push({ key: spell.key, url: spell_data["url"], emoji: codePoint });

return new Response(

testWebsite

@willthereader

@jsxImportSource https://esm.sh/react

HTTP (deprecated)

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

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

// convert to Response

return new Response(renderToString(

<html>

<head>

<title>Page Title</title>

</head>

<body>

<span style={{ color: "red" }}>H</span> <span style={{ color: "blue" }}>e</span>{" "}

egoBooster

@stevekrouse

* This ego booster app takes a selfie, sends it to GPT-4o-mini for analysis, * and streams funny, specific compliments about the user's appearance. * We use the WebRTC API for camera access, the OpenAI API for image analysis, * and server-sent events for real-time streaming of compliments.

HTTP (deprecated)

* This ego booster app takes a selfie, sends it to GPT-4o-mini for analysis,

* and streams funny, specific compliments about the user's appearance.

* We use the WebRTC API for camera access, the OpenAI API for image analysis,

* and server-sent events for real-time streaming of compliments.

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

function App() {

const [compliments, setCompliments] = useState<string>("");

const [isLoading, setIsLoading] = useState(false);

const [isCameraOn, setIsCameraOn] = useState(true);

const [error, setError] = useState<string | null>(null);

lucia_demo

@pomdtr

@jsxImportSource npm:hono/jsx

1 2 2

HTTP (deprecated)

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

const userTable = "user";

const sessionTable = "session";

const adapter = new ValTownAdapter({

user: "user",

session: "session",

export const lucia = new Lucia(adapter, {

getUserAttributes: (attributes) => {

return {

username: attributes.username,

…

14 15

17 18

…

364