Search

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({ text: "Hello World" });

export default app.fetch;

Testing Exa's JS SDK

import Exa from "npm:exa-js";

const exa = new Exa("10dd9c98-7872-4023-ae89-ad6e86e1d76a");

const result = await exa.getContents(

["tesla.com"],

text: {

maxCharacters: 100000,

highlights: true,

console.log(result);

This script exposes two endpoints, one for a form to capture information to utilize in creating a greeting card utilizing OpenAI, and the other to generate the greeting card based off the query parameters provided.

const openai = new OpenAI(),

chat = openai.chat,

chatCompletions = chat.completions;

const app = new Hono();

app.use(cors({

origin: "https://*.web.val.run",

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

const htmlContent = `

export const chat = async (

prompt: string | object = "Hello world",

options = {},

// Initialize OpenAI API stub

const { Configuration, OpenAIApi } = await import(

"https://esm.sh/openai@3.3.0"

console.log(process.env);

// const configuration = new Configuration({

// apiKey: process.env.OPENAI,

// const openai = new OpenAIApi(configuration);

(todo)

This lists all your blobs. You can create new blobs, edit them, or even preview (and upload) file blobs from both URL and computer!

const app = new Hono();

const DOWNLOAD_URL = "https://yawnxyz-serve.web.val.run"; // https://yawnxyz-serve.web.val.run/myImage.jpg

let blobbyList = await blobby.list();

console.log('blobbyList:', blobbyList.length);

async function streamToBuffer(stream) {

import express from "npm:express";

const app = express();

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

res.send("Hello, World!");

export default app.fetch;

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 action="/emoji" method="get">

<input type="text" name="emoji" /> <input type="submit" />

</form>

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

import type { MiddlewareHandler } from "npm:hono";

export const toHonoHandler =

(handler: (req?: Request) => Promise<Response>): MiddlewareHandler => async (c) => (c.res = await handler(c.req.raw));

SelectHtml is a Deno-based HTML scraper that integrates AI with Cheerio and Pug. This tool allows you to fetch, clean, and manipulate HTML content from URLs, using the Cheerio library to select and clean the HTML elements, and html2pug to convert HTML into Pug templates.

Deprecated; use htmlTo instead, as that one supports more formats: https://www.val.town/v/yawnxyz/htmlTo

export async function fetchHtml(url, removeSelectors = "style, script, link, noscript, frame, iframe, comment") {

try {

const response = await fetch(url);

const html = await response.text();

// Load the HTML into Cheerio

const $ = cheerio.load(html);

[chalk](https://github.com/chalk/chalk) is a very popular module for colorizing terminal output. In Val Town, it doesn't colorize the output of vals because it detects correctly that we don't support colorized logs yet. We've filed an issue internally to support colorized logs!

export let chalkExample = (async () => {

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

return chalk.red("hello world (this text is not red)");

This is a lightweight Blob Admin interface to view and debug your Blob data.


Use this button to install the val:

[](https://www.val.town/v/stevekrouse/blob_admin_app/fork)

It uses [basic authentication](https://www.val.town/v/pomdtr/basicAuth) with your [Val Town API Token](https://www.val.town/settings/api) as the password (leave the username field blank).

const app = new Hono();

app.use(

jsxRenderer(({ children }) => {

import { getValTownTrpc } from "https://esm.town/v/easrng/getValTownTrpc?v=5";

export const getNpmVersions = async ({ name, versionString }) => {

const trpc = await getValTownTrpc();

return await trpc.getNpmVersions.query({

name,

versionString,

[Client](https://weaverwhale-gistgpt_client.web.val.run/) for https://www.val.town/v/weaverwhale/GistGPT

const app = new Hono();

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

return c.render(

`<html>

<head>

<title>GistGPT</title>

export async function renderHtm(req: express.Request, res: express.Response) {

try {

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

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

const html = htm.bind(vhtml);

res.send(html`<h1 id=hello>Hello!</h1>`);

catch (e) {

return `An error occured: ${e}`;