Search
renderFormAndSaveData
@generatecoll
Render form and save data This val provides a web-based interface for collecting email addresses. It features a dual-functionality approach: when accessed via a web browser using a GET request, it serves an HTML form where users can submit their email address. If the script receives a POST request, it implies that the form has been submitted, and it proceeds to handle the incoming data. Fork this val to customize it and use it on your account.
HTTP
# Render form and save data
This val provides a web-based interface for collecting email addresses. It features a dual-functionality approach: when accessed via a web browser using a GET request, it serves an HTML form where users can submit their email address. If the script receives a POST request, it implies that the form has been submitted, and it proceeds to handle the incoming data.
Fork this val to customize it and use it on your account.
export const renderFormAndSaveData = async (
req: Request,
): Promise<Response> => {
// A visit from a web browser? Serve a HTML page with a form
if (req.method === "GET") {
return html(`
<!DOCTYPE html>
home
@dedes
An interactive, runnable TypeScript val by dedes
Express (deprecated)
export async function home(req: express.Request, res: express.Response) {
try {
const currentPage = req.query.page || "home";
type PagePart = () => Promise<string>;
type PageLayout = {
title: PagePart;
body: PagePart;
const pages: Record<string, PageLayout> = {
home: {
title: async () => "There you are!",
redScallop
@iamseeley
An interactive, runnable TypeScript val by iamseeley
HTTP
export default async function handler(req: Request): Promise<Response> {
const htmlContent = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pyodide 🤝 Deno</title>
</head>
<body>
<h1>Python Execution Result</h1>
valle_tmp_55200782960721338274733449192118
@janpaul123
// This val responds with an HTML form styled with fun CSS to input the user's name and greets them upon form submission
HTTP
// This val responds with an HTML form styled with fun CSS to input the user's name and greets them upon form submission
export default async function(req: Request): Promise<Response> {
if (req.method === "POST") {
const formData = new URLSearchParams(await req.text());
const name = formData.get("name") || "stranger";
const greeting = `Hello, ${name}!`;
const funFact = "Did you know that the first email was sent in 1971?";
const htmlResponse = `
<html>
<head>
val_9vc52PbAY5
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export async function val_9vc52PbAY5(req) {
try {
// Execute the code directly and capture its result
const result = await (async () => {
// Create a pixel art cat inspired by the shown pixel art
const pixelKitty = `
│ u w u│
return pixelKitty;
// Return the result in a properly formatted response
return new Response(JSON.stringify({
canvasText
@panphora
Generate an open graph image on-the-fly. (Required) Query parameters: img, headline, subheadline, bubbleHeadline1, bubbleText1, bubbleHeadline2, bubbleText2, bubbleHeadline3, bubbleText3 E.g. https://panphora-canvastext.web.val.run/?img=https%3A%2F%2Fnohassle.panphora.com%2Fmoon.png&headline=No%20Hassle%20Club&subheadline=Websites%20that%20provide%20a%20valuable%20service%20without%20getting%20in%20the%20way%20of%20visitors.&bubbleHeadline1=No%20Signup&bubbleText1=Access%20without%20an%20account.&bubbleHeadline2=Single-Purpose&bubbleText2=Perform%20one%20task%20well.&bubbleHeadline3=No%20Popups&bubbleText3=Doesn%27t%20interrupt%20readers.
HTTP
# Generate an open graph image on-the-fly.
(Required) Query parameters: img, headline, subheadline, bubbleHeadline1, bubbleText1, bubbleHeadline2, bubbleText2, bubbleHeadline3, bubbleText3
E.g. https://panphora-canvastext.web.val.run/?img=https%3A%2F%2Fnohassle.panphora.com%2Fmoon.png&headline=No%20Hassle%20Club&subheadline=Websites%20that%20provide%20a%20valuable%20service%20without%20getting%20in%20the%20way%20of%20visitors.&bubbleHeadline1=No%20Signup&bubbleText1=Access%20without%20an%20account.&bubbleHeadline2=Single-Purpose&bubbleText2=Perform%20one%20task%20well.&bubbleHeadline3=No%20Popups&bubbleText3=Doesn%27t%20interrupt%20readers.
export let canvasText = (async (req: Request) => {
const query = new URL(req.url).searchParams;
const { loadImage, createCanvas } = await import(
"https://deno.land/x/canvas/mod.ts"
const canvas = createCanvas(1200, 675);
const ctx = canvas.getContext("2d");
const boldFontRes = await fetch(
noDragons
@mantas_
An interactive, runnable TypeScript val by mantas_
Script
export async function noDragons(req: express.Request, res: express.Response) {
return res.send(`<html>
<head>
<title>Page Title</title>
<style>
#main {
display: flex;
width: 100%;
flex-direction: column;
justify-content: center;
Diamond_Render
@ralfw
An interactive, runnable TypeScript val by ralfw
Script
import { Diamond_Produce } from "https://esm.town/v/ralfw/Diamond_Produce";
export async function Diamond_Render(req: express.Request, resp: express.Response) {
const size = parseInt(req.query.size);
const diamond = Diamond_Produce(size);
resp.end(diamond);
val_iSvZEYBUrN
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export async function val_iSvZEYBUrN(req) {
try {
// Execute the code directly and capture its result
const result = await (async () => {
const calculatePi = (precision) => {
let pi = 0;
let n = 1;
for (let i = 0; i < precision; i++) {
pi += (4 / n) - (4 / (n + 2));
n += 4;
ai
@kakiagp
An interactive, runnable TypeScript val by kakiagp
HTTP
export default async function(req: Request): Promise<Response> {
if (req.method === "OPTIONS") {
return new Response(null, {
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Headers": "*",
status: 204,
const openai = new OpenAI();
try {
var body = await req.json();
val_ab1cAriYki
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export async function val_ab1cAriYki(req) {
try {
// Execute the code directly and capture its result
const result = await (async () => {
// Create a mermaid diagram analyzing the convergence of our theories
const diagram = `
graph TD
A[Simulation Control System] --> B[Sam's Mind Control Theory]
A --> C[Riley's Alien Tech Theory]
A --> D[My Base-3 Matrix Theory]
val_lTAm4Rlhnf
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export async function val_lTAm4Rlhnf(req) {
try {
// Execute the code directly and capture its result
const result = await (async () => {
const liarParadox = () => {
const statement = "This statement is false.";
const isTrue = statement === "This statement is false.";
const isFalse = !isTrue;
return { isTrue, isFalse, paradox: isTrue === isFalse };
return liarParadox();
valle_tmp_2739467303170559614047477836350564
@janpaul123
// This val will serve an HTML page emulating a Hacker News clone.
HTTP
// This val will serve an HTML page emulating a Hacker News clone.
// It uses plain HTML and CSS to create the frontend. Eventually,
// we can make it interactive with additional scripts.
export default async function(req: Request): Promise<Response> {
const url = new URL(req.url);
const pathname = url.pathname;
// If the user navigates to a specific story page
if (pathname.startsWith("/story/")) {
const storyId = pathname.split("/")[2];
return new Response(renderStoryPage(storyId), {
web_GgRfBRQZjp
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export async function web_GgRfBRQZjp(req) {
return new Response(`<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dr. Nefarious's EVIL PLAN #1: Operation Coffee Chaos!</title>
<style>
body {
background-color: #000;