Search
threejs_globe_generator
@ajax
An interactive, runnable TypeScript val by ajax
HTTP
export default async function(req: Request): Promise<Response> {
if (req.method !== "POST") {
return Response.json({ message: "This function only accepts POST requests." }, { status: 400 });
try {
const body = await req.json();
if (!body.country) {
return Response.json({ error: "The 'country' field is required." }, { status: 400 });
// Initialize Three.js scene
const scene = new Scene();
const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
password_auth
@pomdtr
Password Auth Middleware Protect your vals behind a password. Use session cookies to persist authentication. Usage import { passwordAuth } from "https://esm.town/v/pomdtr/password_auth?v=84";
export default passwordAuth(() => {
return new Response("OK");
}, { verifyPassword: (password) => password == Deno.env.get("VAL_PASSWORD") }); If you want to use an api token to authenticate: import { passwordAuth } from "https://esm.town/v/pomdtr/password_auth?v=84";
import { verifyToken } from "https://esm.town/v/pomdtr/verifyToken";
export default passwordAuth(() => {
return new Response("OK");
}, { verifyPassword: verifyToken }); TODO [x] allow to authenticate using a val town token [ ] add a way to send an email to ask a password from the val owner [ ] automatically extend the session [ ] automatically remove expired sessions FAQ How to sign out ? Navigate to <your-site>/signout .
Script
# Password Auth Middleware
Protect your vals behind a password. Use session cookies to persist authentication.
## Usage
```ts
export default passwordAuth(() => {
type Session = {
id: string;
expiresAt: number;
async function createSessionTable(tableName: string) {
val_prZ5olhiXD
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export default async function handler(req) {
try {
const result = await (async () => {
return 100;
return Response.json({ success: true, result });
} catch (error) {
return Response.json({
success: false,
error: error.message
}, { status: 500 });
qr
@stevekrouse
// Forked from @ramkarthik.GenerateQR
Express (deprecated)
export async function qr(req: express.Request, res: express.Response) {
if (req.path.startsWith("/qr")) {
const { qrcode } = await import("https://deno.land/x/qrcode/mod.ts");
const base64Image = await qrcode(req.query.data);
res.set("content-type", "image/gif");
res.send(
Buffer.from(base64Image.replace("data:image/gif;base64,", ""), "base64"),
else {
res.send(`<html>
<div>
valle_tmp_463480496454860730332801536131093
@janpaul123
// This updated val serves an HTML page emulating a Hacker News clone.
HTTP
// This updated val serves an HTML page emulating a Hacker News clone.
// It now has clickable titles that will serve pages with some fake story content.
export default async function(req: Request): Promise<Response> {
const url = new URL(req.url);
const path = url.pathname;
if (path === "/") {
const htmlContent = `
<!DOCTYPE html>
<html lang="en">
<head>
val_RcFf3oHVQl
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export async function val_RcFf3oHVQl(req) {
try {
// Execute the code directly and capture its result
const result = await (async () => {
// Exploit proof-of-concept for matrix precision glitch
const exploitPrecisionGlitch = () => {
// Create a function that forces values into specific rational states
const forceValueSnap = (value, target) => {
// Use extremely high precision to force rational interpretation
const precision = 1000000000000;
translator
@yawnxyz
Press to talk, and get a translation! The app is set up so you can easily have a conversation between two people. The app will translate between the two selected languages, in each voice, as the speakers talk. Add your OpenAI API Key, and make sure to open in a separate window for Mic to work.
HTTP
Press to talk, and get a translation!
The app is set up so you can easily have a conversation between two people. The app will translate between the two selected languages, in each voice, as the speakers talk.
Add your OpenAI API Key, and make sure to open in a separate window for Mic to work.
const app = new Hono();
const openai = new OpenAI(Deno.env.get("OPENAI_API_KEY_VOICE"));
class TranscriptionService {
async transcribeAudio(audioFile) {
try {
const transcription = await openai.audio.transcriptions.create({
file: audioFile,
val_4TWAFb0mDp
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export async function val_4TWAFb0mDp(req) {
try {
// Execute the code directly and capture its result
const result = await (async () => {
const calculateFractalDimension = (points) => { const boxCount = (size) => { let count = 0; for (let i = 0; i < points.length; i++) { if (points[i].x < size && points[i].y < size) count++; } return count; }; const sizes = [1, 2, 4, 8, 16]; const counts = sizes.map(size => boxCount(size)); const logCounts = counts.map(count => Math.log(count)); const logSizes = sizes.map(size => Math.log(size)); const slope = (logCounts[1] - logCounts[0]) / (logSizes[1] - logSizes[0]); return -slope; }; const mandelbrotPoints = [/* Add points from the Mandelbrot set */]; const sierpinskiPoints = [/* Add points from the Sierpinski triangle */]; return { mandelbrotDimension: calculateFractalDimension(mandelbrotPoints), sierpinskiDimension: calculateFractalDimension(sierpinskiPoints) };
// Return the result in a properly formatted response
return new Response(JSON.stringify({
result: result,
type: typeof result
headers: { 'Content-Type': 'application/json' }
kindApricotAnglerfish
@adagradschool
An interactive, runnable TypeScript val by adagradschool
HTTP
export default function handler(req) {
return new Response(`"\n <!DOCTYPE html>\n <html>\n <head>\n <title>Claude Chat Conversation</title>\n <meta charset=\"UTF-8\">\n <style>\n body {\n font-family: system-ui, -apple-system, sans-serif;\n line-height: 1.5;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n background: #f9fafb;\n }\n .message {\n margin: 20px 0;\n padding: 15px;\n border-radius: 8px;\n }\n .human {\n background: #e5e7eb;\n }\n .assistant {\n background: #dbeafe;\n }\n .role {\n font-weight: bold;\n margin-bottom: 8px;\n }\n </style>\n </head>\n <body>\n \n <div class=\"message human\">\n <div class=\"role\">Human</div>\n <div class=\"content\">export default function handler(req) {\n return new Response(\n <!DOCTYPE html>\n <html>\n <head>\n <title>Claude Chat Conversation</title>\n <meta charset="UTF-8">\n <style>\n body {\n font-family: system-ui, -apple-system, sans-serif;\n line-height: 1.5;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n background: #f9fafb;\n }\n .message {\n margin: 20px 0;\n padding: 15px;\n border-radius: 8px;\n }\n .human {\n background: #e5e7eb;\n }\n .assistant {\n background: #dbeafe;\n }\n .role {\n font-weight: bold;\n margin-bottom: 8px;\n }\n </style>\n </head>\n <body> <div class="message human">\n <div class="role">Human</div>\n <div class="content">so, how was your day</div>\n </div> <div class="message assistant">\n <div class="role">Claude</div>\n <div class="content">I aim to have authentic conversations while being direct about my nature as an AI. While I appreciate the friendly question, I should note that I don't actually experience days in the way humans do. I'd be happy to hear about your day though, or to help you with any questions or tasks you might have.</div>\n </div> </body>\n, {\n headers: {\n \"Content-Type\": \"text/html\",\n },\n });\n }What is the issue with this?</div>\n </div>\n \n <div class=\"message assistant\">\n <div class=\"role\">Claude</div>\n <div class=\"content\">Let me help you fix this code. There are a few syntax issues with the current implementation.\nFixed Next.js API HandlerClick to open code\nThe main issues with the original code were:\n\nThe HTML string was not properly formatted - it was directly inserted after the Response( without being enclosed in quotes or backticks\nHTML entities were escaped (<, >, ") when they should have been regular characters (<, >, \")\nNo proper string formatting was used (should use template literals with backticks for multiline strings in JavaScript)\n\nThe fixed version:\n\nUses a template literal (backticks) to properly contain the multiline HTML string\nUses proper HTML syntax without escaped entities\nProperly separates the HTML string from the Response constructor\nMaintains proper indentation for readability\nKeeps the same functionality but in a syntactically correct way\n\nThis should now work correctly as a Next.js API route handler that returns an HTML page.</div>\n </div>\n \n <div class=\"message assistant\">\n <div class=\"role\">Claude</div>\n <div class=\"content\">Looking at the JSON object, the endpoint URL can be found at obj.val.links.endpoint, which is:\nhttps://adagradschool-claude_d482d9ee_eff3_42e6_9779_a012b1e1f7b4.web.val.run</div>\n </div>\n \n </body>\n </html>\n"`, {
headers: {
"Content-Type": "text/html",
valle_tmp_821221338019192827080648147114728
@janpaul123
// This HTTP val will generate an HTML frontend for a simple Hacker News clone.
HTTP
// This HTTP val will generate an HTML frontend for a simple Hacker News clone.
// It will use hardcoded example stories for now and display them in a clean layout.
const app = new Hono();
const exampleStories = [
title: "Introducing Val Town",
url: "https://val.town",
points: 100,
author: "Steve Krouse",
comments: 30,
title: "Hacker News Clone with Val Town",
blob_admin_blob
@pomdtr
@jsxImportSource https://esm.sh/hono@4.0.8/jsx
Script
/** @jsxImportSource https://esm.sh/hono@4.0.8/jsx **/
const route = new Hono();
route.get("/:key", async (c) => {
const key = c.req.param("key");
let response = await blob.get(key);
let text = await response.text();
return c.render(
<div>
<h1>{key}</h1>
<code-mirror code={text} readonly></code-mirror>
createFileInputApp
@maxencelav
An interactive, runnable TypeScript val by maxencelav
HTTP
export default function server(req: Request): Response {
return new Response(`
<!DOCTYPE html>
<html>
<head>
<title>File Input Cloner</title>
<style>
.container {
padding: 20px;
font-family: system-ui, sans-serif;
registryExample
@lbb00
An interactive, runnable TypeScript val by lbb00
HTTP
export async function LoginRegistryExample(request: Request): Promise<Response> {
return new Response(
html`
<html>
<style>
form {
display: none;
input[type='radio']:checked + label + form {
display: block;
</style>
hydrate_hono_islands
@pomdtr
An interactive, runnable TypeScript val by pomdtr
Script
const islands = Array.from(document.querySelectorAll("[data-hydration-src]"));
if (islands.length > 0) {
const { render } = await import("https://esm.sh/hono/jsx/dom");
const { jsx: _jsx } = await import("https://esm.sh/hono/jsx/dom/jsx-runtime");
for (const island of islands) {
let src = island.getAttribute("data-hydration-src");
if (!src.startsWith("https://")) {
src = `https://esm.town/v/${src}`;
let name = island.getAttribute("data-hydration-name");
if (!name) {
emojiExploder
@iamseeley
@jsxImportSource npm:hono@3/jsx
HTTP
/** @jsxImportSource npm:hono@3/jsx */
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>