Search
harmoniousBlackStoat
@eddietheegg2
// Fetches a random joke.
Script
import { email } from "https://esm.town/v/std/email?v=9";
// Fetches a random joke.
function fetchRandomJoke() {
const response = fetch(
"https://official-joke-api.appspot.com/random_joke",
valentine
@lg7
Hello!!! Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right. You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen! Have fun with it and hopefully your crush says yes hehe.
HTTP
"Say yes (you have no choice hehe ummaaaπ)",
function App() {
const [noClicks, setNoClicks] = useState(0);
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise<Response> {
return new Response(

bilitest
@nishui
An interactive, runnable TypeScript val by nishui
Script
import { fetch } from "https://esm.town/v/std/fetch";
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";

tldrawclient
@robcobb
tldraw client forked from tfayyaz (thanks!) Open https://www.val.town/v/robcobb/tldrawcanvasserver to actually view the page; this is a js script imported into that val. Goal is do some little experiments with the tldraw client: a little tldraw console (like the chrome devtools, but populated with tldraw objects) a little version of microworlds logo, but on a tldraw canvas some other experiments! we'll see Uses a pinned older version of tldraw because the other ones seem to fail on a weird dependency issue. My guess is that the val.town bundler tricks don't work so good on transitive deps, but I don't really know.
@use-gesture/react couldn't find the right import for a call to useMemo.
Script
import React from "https://esm.sh/react@18.2.0";
import { Tldraw } from "https://esm.sh/tldraw@2.1.0";
export function App() {
return (
<div style={{ position: "fixed", inset: 0 }}>
moduleHighlightValueLink
@postpostscript
moduleHighlightValueLink: Link to a Val With a Value or Method's Code Highlighted Examples: import { moduleHighlightValueLink, getRedirectUrl } from "https://esm.town/v/postpostscript/moduleHighlightValueLink";
console.log(await moduleHighlightValueLink("@std/email", "email"))
// https://val.town/v/std/email#L6-42
console.log(await moduleHighlightValueLink("@postpostscript/moduleHighlightValueLink", "moduleHighlightValueLink"))
// https://val.town/v/postpostscript/moduleHighlightValueLink#L6-20
// get URL you can imbed in an iframe
console.log(getRedirectUrl("@postpostscript/moduleHighlightValueLink", "getRedirectUrl", true));
// https://postpostscript-modulehighlightvaluelink.web.val.run/?embed=1&module=%40postpostscript%2FmoduleHighlightValueLink&name=getRedirectUrl Iframe example: import { htmlResponse } from "https://esm.town/v/postpostscript/html";
import { getRedirectUrl } from "https://esm.town/v/postpostscript/moduleHighlightValueLink";
export default async function(req: Request): Promise<Response> {
return htmlResponse`
<iframe src="${getRedirectUrl(import.meta.url, "default", true)}" width="100%" height="100%">
</iframe>
`;
}
HTTP
import { getRedirectUrl } from "https://esm.town/v/postpostscript/moduleHighlightValueLink";
export default async function(req: Request): Promise<Response> {
return htmlResponse`
} from "https://esm.town/v/postpostscript/meta";
export async function moduleHighlightValueLink(module: string, name: string, log = false) {
const { source, node: ast } = await getSourceAST(await moduleSource(module));
return url + (locationText ? `#${locationText}` : "");
export function getRedirectUrl(module: string, name: string, embed = false) {
const qs = new URLSearchParams();
return getValEndpointFromUrl(import.meta.url) + "/?" + qs.toString();
export default async function(req: Request) {
const qs = queryString.parse(req.url.split("?")[1] || "");
shorturl
@cocodrilette
π Short URL Generator A simple, serverless short URL generator built on Val Town using React and SQLite. Features π Generate short URLs for any long URL πΎ Persistent storage using SQLite π Instant redirection π¨ Clean, minimal React interface How It Works Enter a long URL in the input field Click "Generate Short URL" Receive a unique, short URL Share and use the short URL, which will redirect to the original link Technical Details Built with React (client-side) Uses Val Town's SQLite for URL mapping storage Generates a random 5-character short code Serverless deployment on Val Town Example Long URL: `https://very-long-url.com/with-many-parameters`
Short URL: `https://your-val-domain.web.val.run/ab123` Limitations Short codes are randomly generated (potential for rare collisions) No custom short code option URLs are stored indefinitely Source [View Source](${import.meta.url.replace("esm.town", "val.town")})
HTTP
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
function generateShortCode(length = 5) {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
.join('');
function App() {
const [longUrl, setLongUrl] = useState('');
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise<Response> {
const { sqlite } = await import("https://esm.town/v/stevekrouse/sqlite");

citation
@yawnxyz
// https://www.crossref.org/blog/dois-and-matching-regular-expressions/
Script
doi = doi.replace(/v\d+$/, '');
return doi;
export async function getCitation(citationId: string, type = 'bibtex', opts) {
citationId = extractDOI(citationId);
console.log('citationId', citationId)
valentine
@aaveg
Hello!!! Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right. You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen! Have fun with it and hopefully your crush says yes hehe.
HTTP
"Youβre my everything, Neha π",
function App() {
const [noClicks, setNoClicks] = useState(0);
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise<Response> {
return new Response(
competentOliveOctopus
@elena
Hello!!! Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right. You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen! Have fun with it and hopefully your crush says yes hehe.
HTTP
"no:(",
function App() {
const [noClicks, setNoClicks] = useState(0);
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise<Response> {
return new Response(
httpApiScreenshotPageExample
@browserbase
Browserbase Browserbase offers a reliable, high performance serverless developer platform to run, manage, and monitor headless browsers at scale. Leverage our infrastructure to power your web automation and AI agents. Get started with Browserbase for free here . If you have any questions, reach out to developer@browserbase.com.
HTTP
import { Buffer } from "node:buffer";
import Jimp from "npm:jimp";
export async function blobReadPictureExample(request: Request): Promise<Response> {
const searchParams = new URL(request.url).searchParams;
const url = searchParams.get("url") || "https://www.browserbase.com";
monetaryBronzeMongoose
@perbhat
@jsxImportSource npm:react
HTTP
const maxForce = 3.0;
const gramsPerForceUnit = 1000 / maxForce;
function handleForce(event) {
if (typeof event.webkitForce !== 'undefined') {
const force = event.webkitForce;
testHtml
@healeycodes
An interactive, runnable TypeScript val by healeycodes
Script
export let testHtml = function (req, res) {
res.send("<html><h1>hi!</h1></html>");

tinybase_example_client
@pomdtr
@jsxImportSource https://esm.sh/react
Script
count: 0,
await persister.startAutoSave();
function App() {
// The component will be refreshed each time the store is updated
const count = useValue("count", store);

test
@abc3354
An interactive, runnable TypeScript val by abc3354
Script
export const test = function () {
console.info("Hello world");
niceCoffeeArmadillo
@sainasneha
Hello!!! Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right. You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen! Have fun with it and hopefully your crush says yes hehe.
HTTP
"oyee cutuu chalo be a good boi π",
function App() {
const [noClicks, setNoClicks] = useState(0);
</div>
function client() {
createRoot(document.getElementById("root")).render(<App />);
if (typeof document !== "undefined") { client(); }
export default async function server(request: Request): Promise<Response> {
return new Response(