Search
ReloadScript
@postpostscript
ReloadScript: Reload HTML pages on new versions a val or its dependencies Setup Fork this val Include ReloadScript(import.meta.url) in your HTML output Example import { htmlResponse } from "https://esm.town/v/postpostscript/htmlComponentLibrary";
import { ReloadScript } from "https://esm.town/v/[username]/ReloadScript";
export default async function(req: Request): Promise<Response> {
return htmlResponse`
It worked!!! ${Math.random()}
${ReloadScript(import.meta.url)}
`;
} Todo [ ] use import list to pare down dependency list and prevent unnecessary reloads forked from @stevekrouse/ReloadScript
Script
# ReloadScript: Reload HTML pages on new versions a val or its dependencies
## Setup
1. Fork this val
2. Include `ReloadScript(import.meta.url)` in your HTML output
## Example
```ts
const id = ({ userHandle, valName }) => `${userHandle}/${valName}`;
export const reloadOnVals = async function(vals: { userHandle: string; valName: string }[], delay = 500) {
const initialVersions = Object.fromEntries(
await Promise.all(vals.map(async (val) => {
selfEditingWebsiteGPT
@maxm
Self Editing Website - GPT Version Visit and ask ChatGPT to edit the site at: https://maxm-selfeditingwebsitegpt.web.val.run/
HTTP
# Self Editing Website - GPT Version
Visit and ask ChatGPT to edit the site at: https://maxm-selfeditingwebsitegpt.web.val.run/
let { selfEditingWebsiteBodyGPT } = await import("https://esm.town/v/maxm/selfEditingWebsiteBodyGPT");
export const selfEditingWebsiteGPT = async (request: Request) => {
if (request == null) {
return "not invoked correctly";
// Otherwise, someone has submitted a form so let's handle that
if (selfEditingWebsiteBodyGPT === undefined) {
let defaultBody = `<h1>Edit Me!</h1>`;
selfEditingWebsiteBodyGPT = defaultBody;
thedyslexicdeveloperTikTok
@chrislaughlin
An interactive, runnable TypeScript val by chrislaughlin
Script
export const thedyslexicdeveloperTikTok = (async () => {
const cheerio = await import("npm:cheerio");
const html = await fetchText(
`https://www.tiktok.com/@thedyslexicdeveloper`,
const $ = cheerio.load(html);
const data = $("h3").first().prop("innerText").match(/[^\d]+|\d+/g);
return `
${data[0]} - ${data[1]}
${data[2]} - ${data[3]}
${data[4]} - ${data[5]}
hackerNewsDigest
@stevekrouse
Hacker News Digest Fork this val to get an email like this in your inbox!
Cron
# Hacker News Digest
Fork this val to get an email like this in your inbox!
<img width="400px" src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/2661d748-d7a7-4d1e-85a4-f60fae262000/public" />
// This cron emails Hacker News stories from its API every 3 days.
async function fetchStories(type: string, count: number) {
const response = await fetch(`https://hacker-news.firebaseio.com/v0/${type}stories.json`);
const storyIds = await response.json();
const stories = await Promise.all(
storyIds.slice(0, count).map(async (id: number) => {
const storyResponse = await fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json`);
webScrapeDiamondLeague
@djfeld01
An interactive, runnable TypeScript val by djfeld01
Script
const DIAMOND_LEAGUE_EVENT_URL = "https://shanghai.diamondleague.com/programme-results/programme-results-shanghai/";
function normalizeURL(url: string) {
return url.startsWith("http://") || url.startsWith("https://")
? url
: "http://" + url;
async function fetchText(url: string, options?: any) {
const response = await fetch(normalizeURL(url), {
redirect: "follow",
...(options || {}),
return response.text();
valle_tmp_0088092323198285537184706961400471
@janpaul123
// Initialize sample stories and store them in blob storage
HTTP
// Initialize sample stories and store them in blob storage
const SAMPLE_STORIES_KEY = "hn_sample_stories";
async function initializeSampleStories() {
const existingStories = await blob.getJSON(SAMPLE_STORIES_KEY);
if (!existingStories) {
const sampleStories = Array.from({ length: 30 }).map((_, idx) => ({
id: idx + 1,
title: `Sample Story ${idx + 1}`,
url: `https://example.com/story${idx + 1}`,
votes: Math.floor(Math.random() * 100),
union69
@git
An interactive, runnable TypeScript val by git
HTTP
export default async function(req: Request): Promise<Response> {
const url = new URL(req.url);
const passedUrl = url.searchParams.get("url");
const passedSvg = url.searchParams.get("svg");
return new Response(
/* html */ `<html>
<head>
<script type="module" src="https://esm.sh/@bitjson/qr-code/dist/qr-code.js"></script>
<style>
</style>
apiLog
@healeycodes
An interactive, runnable TypeScript val by healeycodes
Script
export let apiLog = (req, res) => {
console.log(req, res);
res.send(JSON.stringify({ req, res }));
dateme
@vawogbemi
Date Me Directory This is entry-point val for the source code for the Date Me Directory. Contributions welcome! This app uses Hono as the server framework and for JSX . The vals are stored in Val Town SQLite . Contributing Forking this repo should mostly work, except for the sqlite database. You'll need to create the table & populate it with some data. This script should do it, but I think it has a couple bugs. If you're interested in contributing to this project contact me or comment on this val and I'll get it working for ya! Todos [ ] Make the SQLite database forkable and build a widget/workflow for that, ie fix @stevekrouse/dateme_sqlite [ ] Require an email (that isn't shared publicly) [ ] Verify the email address with a "magic link" [ ] Refactor Location to an array of Lat, Lon [ ] Geocode all the existing locations [ ] Add a geocoder map input to the form [ ] Allow selecting multiple location through the form [ ] Profile performance & speed up site, possibly add more caching [ ] Let people edit their forms [ ] Featured profiles
HTTP
# Date Me Directory
This is entry-point val for the source code for the Date Me Directory. Contributions welcome!
This app uses [Hono](https://hono.dev/) as the server framework and for [JSX](https://hono.dev/guides/jsx).
The vals are stored in [Val Town SQLite](https://docs.val.town/std/sqlite/).
## Contributing
Forking this repo should mostly work, except for the sqlite database. You'll need to create the table & populate it with some data. [This script](https://www.val.town/v/stevekrouse/dateme_sqlite) *should* do it, but I think it has a couple bugs. If you're interested in contributing to this project contact me or comment on this val and I'll get it working for ya!
const app = new Hono();
app.get("/", home);
app.get("/browse", browse);
app.route("/submit", form);
script_6sbfbg98wajm0b51pjunnu2pwj8nbi98
@zrw
An interactive, runnable TypeScript val by zrw
Script
export const script_6sbfbg98wajm0b51pjunnu2pwj8nbi98 = (async function() {
const rosters = {
"Zack": ["PHI", "WSH", "IND", "TB", "LAR", "TEN", "HOU"],
"Joel": ["BUF", "BAL", "NE", "NYG", "CHI"],
"Ric": ["KC", "CIN", "MIA", "GB", "LV"],
"Joey": ["DAL", "LAC", "SEA", "NO", "ARI"],
"Will": ["SF", "MIN", "CLE", "PIT", "CAR"],
"Max": ["DET", "NYJ", "JAX", "ATL", "DEN"],
const findRoster = (team: string) => {
for (const roster in rosters) {
amaranthTakin
@stevekrouse
Date Me Directory This is entry-point val for the source code for the Date Me Directory. Contributions welcome! This app uses Hono as the server framework and for JSX . The vals are stored in Val Town SQLite . Contributing Forking this repo should mostly work, except for the sqlite database. You'll need to create the table & populate it with some data. This script should do it, but I think it has a couple bugs. If you're interested in contributing to this project contact me or comment on this val and I'll get it working for ya! Todos [ ] Make the SQLite database forkable and build a widget/workflow for that, ie fix @stevekrouse/dateme_sqlite [ ] Require an email (that isn't shared publicly) [ ] Verify the email address with a "magic link" [ ] Refactor Location to an array of Lat, Lon [ ] Geocode all the existing locations [ ] Add a geocoder map input to the form [ ] Allow selecting multiple location through the form [ ] Profile performance & speed up site, possibly add more caching [ ] Let people edit their forms [ ] Featured profiles
HTTP
# Date Me Directory
This is entry-point val for the source code for the Date Me Directory. Contributions welcome!
This app uses [Hono](https://hono.dev/) as the server framework and for [JSX](https://hono.dev/guides/jsx).
The vals are stored in [Val Town SQLite](https://docs.val.town/std/sqlite/).
## Contributing
Forking this repo should mostly work, except for the sqlite database. You'll need to create the table & populate it with some data. [This script](https://www.val.town/v/stevekrouse/dateme_sqlite) *should* do it, but I think it has a couple bugs. If you're interested in contributing to this project contact me or comment on this val and I'll get it working for ya!
const app = new Hono();
app.get("/", home);
app.get("/browse", browse);
app.route("/submit", form);
serveReadme
@vladimyr
// SPDX-License-Identifier: 0BSD
Script
// SPDX-License-Identifier: 0BSD
export type HtmlProcessor = (html: string, author: string, name: string) => Promise<string>;
export function serveReadme(
valUrl: string | URL,
transformHtml: HtmlProcessor = decorateHtml,
return async (): Promise<Response> => {
const { author, name } = extractValInfo(valUrl);
const { readme } = await fetchVal(author, name);
if (!readme) {
return new Response(null, { status: 404 });
referencesNotify
@stevekrouse
// Forked from @andreterron.referencesNotify
Script
export const referencesNotify = async (interval: Interval) => {
const refs = await references({
token: process.env.valtown,
since: interval.lastRunAt,
if (refs?.length) {
console.email({
html: refHtml(refs),
}, "Your vals have been referenced");
return refs;
// Forked from @andreterron.referencesNotify
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