Search
bilitest
@nishui
An interactive, runnable TypeScript val by nishui
Script
export async function bilitest(req: express.Request, res: express.Response) {
const axios = await fetch("npm:axios");
const url = "https://music.163.com/#/song?id=2008568696";
try {
const response = await axios(url, {
headers: {
"Access-Control-Allow-Origin": "*",
const data = response.data;
// 在这里对data进行处理
return res.send(data);
valle_tmp_70764405948939838711130646455814
@janpaul123
// This val serves HTML pages for a mock Hacker News clone, demonstrating both main story list
HTTP
// This val serves HTML pages for a mock Hacker News clone, demonstrating both main story list
// and individual story pages, with comments data structured in a common format.
interface Comment {
user: string;
text: string;
interface Story {
title: string;
content: string;
comments: Comment[];
// Common data structure for stories and comments
Public
@curtcox
An interactive, runnable TypeScript val by curtcox
HTTP
import { echo } from "https://esm.town/v/curtcox/private";
export const Public = (req: Request) => {
return echo(req);
p5_latest_starterkit
@ff6347
P5@latest Starter Kit This val is part of the seminar fundamentals of digital communication at University of Arts Braunschweig in 2024/25. It provides a downloadable starter kit that contains the following content: p5.js library @ff6347/p5easing library npmjs.com/package/@ff6347/p5-easing index.html starter code index.js starter code
HTTP
# P5@latest Starter Kit
This val is part of the seminar fundamentals of digital communication at University of Arts Braunschweig in 2024/25. It provides a downloadable starter kit that contains the following content:
- p5.js library
- @ff6347/p5easing library [npmjs.com/package/@ff6347/p5-easing](https://www.npmjs.com/package/@ff6347/p5-easing)
- index.html starter code
- index.js starter code
// Get tarball URL for scoped npm package
const getNpmTarball = async (scope, packageName, version = "latest") => {
const fullPackageName = scope ? `@${scope}/${packageName}` : packageName;
const response = await fetch(`https://registry.npmjs.org/${fullPackageName}/${version}`);
profileHandlers
@iamseeley
@jsxImportSource https://esm.sh/hono@latest/jsx
Script
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
export const getUserProfileHandler = async (c) => {
const username = c.req.param('username');
const payload = await c.get('jwtPayload');
if (payload.username !== username) {
return c.html(
<RootLayout>
<p>You are not authorized to access this profile.</p>
</RootLayout>
try {
jumpchain_infosite
@willthereader
An interactive, runnable TypeScript val by willthereader
HTTP
export default async function (req: Request): Promise<Response> {
return Response.json({ ok: true })
robPikeIO
@maxm
robpike.io A re-implementation of https://robpike.io/
HTTP
# robpike.io
A re-implementation of https://robpike.io/
const msg = new TextEncoder().encode("💩");
const initialDelay = 20;
export default async function(req: Request): Promise<Response> {
let timerId: number | undefined;
const body = new ReadableStream({
start(controller) {
let currentDelay = initialDelay;
function writeToStream() {
docFeedbackForm
@timlin
Val Town Docs Feedback Form & Handler Live form Val Town Docs YouTube tutorial that explains v17 of this val This feedback form is linked on our docs site. This val renders an HTML form, including pre-fills the user's email address if they've submitted the form in the past (via a cookie), and pre-fills the URL by grabbing it out of the query params. It handles form submissions, including parsing the form, saving the data into @stevekrouse.docsFeedback , a private JSON val, and then returns a thank you message, and set's the user's email address as a cookie, to save them some keystrokes the next time they fill out the form. Another val, @stevekrouse.formFeedbackAlert , polls on an interval for new form submissions, and if it finds any, forwards them on a private Val Town discord channel. There are a number of subtleties to the way each of some features are implemented. A user submitted three pieces of feedback in quick succession, so I thought it'd be nice if we remembered user's email addresses after their first form submissions. There are classically two ways to do this, cookies or localstorage. I choose cookies. It requires setting them in the response header and getting them out of the request header. I used a Deno library to parse the cookie but I set it manually because that seemed simpler. You may be wondering about how I'm getting the referrer out of the query params instead of from the HTTP Referrer header. I tried that at first, but it's increasingly difficult to get path data from it due to more restrictive security policies . So instead I decided to include the URL data in a query param. I get it there via this script in my blog's site: function updateFeedback(ref) {
let feedback = [...document.getElementsByTagName('a')].find(e => e.innerText == 'Feedback')
feedback.setAttribute('href', "https://stevekrouse-docfeedbackform.web.val.run/?ref=" + ref)
}
setTimeout(() => updateFeedback(document.location.href), 100);
navigation.addEventListener('navigate', e => updateFeedback(e.destination.url)); Finally, you may be wondering why I queue up feedback in @stevekrouse.docsFeedback , a private JSON val, and then process it via @stevekrouse.formFeedbackAlert instead of sending it along to Discord directly in this val. I tried that originally but it felt too slow to wait for the API call to Discord before returning the "Thanks for your feedback" message. This is where the context.waitUntil method (that Cloudflare workers and Vercel Edge Functions support) would really come in handy – those allow you to return a Response, and then continue to compute. Currently Val Town requires you to stop all compute with the returning of your Response, so the only way to compute afterwards is to queue it up for another val to take over, and that's what I'm doing here.
HTTP
# Val Town Docs Feedback Form & Handler
* [Live form](https://stevekrouse-docFeedbackForm.web.val.run)
* [Val Town Docs](https://docs.val.town)
* [YouTube tutorial](https://www.youtube.com/watch?v=AEaYaWf5B-I) that explains [v17 of this val](https://www.val.town/v/stevekrouse.docFeedbackForm?v=17)
This feedback form is linked on our docs site.
export let docFeedbackForm = async (req: Request) => {
if (req.method === "POST") {
let formData = await req.formData();
const feedbackData = {
httpValErrorCatcher
@janpaul123
// This val dynamically imports and executes another HTTP val, then injects error handling scripts.
HTTP
// This val dynamically imports and executes another HTTP val, then injects error handling scripts.
// It uses dynamic imports for flexibility, but this approach has security implications if used with untrusted input.
// The error handling script allows for capturing and reporting various types of errors.
// Added a success message postMessage after 3 seconds of page load.
// Prefixed error types to the errorString for better error identification.
// Checks for minimum response size and presence of <html> tag.
export default async function main(req: Request): Promise<Response> {
const url = new URL(req.url);
const valName = url.searchParams.get("val");
if (!valName) {
ittyRouterExample
@rafter
Test readme for itty router
Script
# Test readme for itty router
export const ittyRouterExample = async (request: Request) => {
const { Router, json } = await import("npm:itty-router");
const tester = [{ msg: "hi test msg" }];
const x = (param) => [param, 1, 2, 3, "testing"];
const router = Router();
router.get("/", () => "Hi");
router.get("/test", () => tester);
router.get("/newer/:id", (request) => {
const { params } = request;
cors_example_backend
@stevekrouse
An interactive, runnable TypeScript val by stevekrouse
HTTP
export default async function(req: Request) {
const url = new URL(req.url);
if (url.pathname === "/default") {
return Response.json({ working: true });
} else if (url.pathname === "/no_cors") {
return Response.json({ working: true }, {
headers: {
"Access-Control-Allow-Origin": "null",
return new Response(null, { status: 404 });
exampleServer
@pomdtr
An interactive, runnable TypeScript val by pomdtr
HTTP
export function exampleServer(req) {
return new Response("<h1>Hello World</h1>", {
headers: {
"Content-Type": "text/html"
getChatgpt
@bingo16
An interactive, runnable TypeScript val by bingo16
Script
export let getChatgpt = async ({ prompts, token }) => {
let text = "";
const postdata = {
model: "text-davinci-003",
prompt: `${prompts}`,
temperature: 0.7,
n: 1,
logprobs: null,
max_tokens: 1024,
const headers = {
githubParser
@yawnxyz
// Export app.fetch for Val Town, otherwise export app — this is only for hono apps
HTTP
const app = new Hono();
const ignoredPatternsString = getIgnoredPatterns()
.map(pattern => pattern.toString().slice(1, -1))
.join('\n');
const html = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
whatsThatInHotDogs
@dthyresson
What's that in Hot Dogs? Inspired by the 2014 Boston Baseball Hackday submission, this val shows how many hot dogs a baseball player can buy in a year based on his annual salary and the average price of a hot dog sold at their home team's stadium. Back then, the team spent most of the hackday time collecting data, building s javascript app from scratch and then deployed to Heroku. It took some time. It had much nicer design, artwork, styling, etc to be sure. I wanted to see how quickly a similar app could be created and made available on Val.town 10 years later. I asked Chat GPT to build the app: You are a javascript web developer and a baseball fan. Build a web app using Hono called "What's that in hot dogs?". The app should let you select a baseball player. Based on 1) the player annual salary calculate the number of hot dogs they could buy based on the average price of a hot dog sold at their stadium. For example, Mike Trout played for the Los Angeles Angels and makes $35M per year. The Los Angeles Angels play at Angel Stadium a hot dog costs $8. That means he can buy 35,000,000/8 = 4.375M hot dogs. The app lets you pick a player and then will display an emoji icon of a hot dog. One emoji hot dog is worth 100,000 hot dogs. So picking Mike Trout will show 43.75 (or 44) hot dog icons. It worked! But, it only had one player's worth of data. The app needs more player salary and hot dog price data. Find the top players in each MLB team, their salary, and the price of a hot dog at their home stadium. I then asked for a small improvement: Improve the app by also showing the team the play plays for, the stadium, salary and price of the hot dog. Include it in a nice table below the hot dog emoji list. Within 10 minutes, I had a working "What's that in Hot Dogs?". I then re-worked the headings and added a legend and it matched what I remember seeing back in 2014 ... but built and deployed in minutes versus hours. Note: Much of the 2014 team's time was spent collecting data manually by looking up players' salaries and finding the cost of a hot dog at stadiums. In this example, I've not validated that ChaptGPT correctly identified these figures.
HTTP
# What's that in Hot Dogs?
Inspired by the 2014 Boston Baseball Hackday submission, this val shows how many hot dogs a baseball player can buy in a year based on his annual salary and the average price of a hot dog sold at their home team's stadium.
Back then, the team spent most of the hackday time collecting data, building s javascript app from scratch and then deployed to Heroku. It took some time. It had much nicer design, artwork, styling, etc to be sure.
I wanted to see how quickly a similar app could be created and made available on Val.town 10 years later.
I asked Chat GPT to build the app:
> You are a javascript web developer and a baseball fan. Build a web app using Hono called "What's that in hot dogs?". The app should let you select a baseball player. Based on 1) the player annual salary calculate the number of hot dogs they could buy based on the average price of a hot dog sold at their stadium. For example, Mike Trout played for the Los Angeles Angels and makes $35M per year. The Los Angeles Angels play at Angel Stadium a hot dog costs $8. That means he can buy 35,000,000/8 = 4.375M hot dogs. The app lets you pick a player and then will display an emoji icon of a hot dog. One emoji hot dog is worth 100,000 hot dogs. So picking Mike Trout will show 43.75 (or 44) hot dog icons.
/** @jsxImportSource npm:hono@3/jsx */
const app = new Hono();
const players = {
"Mike Trout": { team: "Los Angeles Angels", salary: 35450000, stadium: "Angel Stadium", hotDogPrice: 6.5 },