${escapeHTML(title)}

${escapeHTML(opening)} Follow the strange sound ↓

\n ${imageUrl ? ` $\"${escapeHTML(imageAlt)}\"$ ` : `

${escapeHTML(image)}

`}\n

The discovery

${escapeHTML(scene)}

\n ${audio ? `

` : \"\"}\n ${youtubeVideo ? `` : video ? `

` : \"\"}\n

See what happened next ↓

The ending

${escapeHTML(ending)}

Read it again ↑

\n `, `html { scroll-behavior:smooth; } audio { width:100%; margin:16px 0; } .youtube { width:100%; aspect-ratio:16/9; border:0; margin:16px 0; }`), [title, opening, scene, ending, image, imageUrl, imageAlt, audio, video, youtubeVideo]);\n\n let downloadableHTML = html;\n if (imageFile && imageUrl) downloadableHTML = downloadableHTML.replaceAll(imageUrl, imagePath);\n if (audioFile && audio) downloadableHTML = downloadableHTML.replaceAll(audio, audioPath);\n if (videoFile && video) downloadableHTML = downloadableHTML.replaceAll(video, videoPath);\n\n const assets = [\n ...(imageFile ? [{ file: imageFile, path: imagePath }] : []),\n ...(audioFile ? [{ file: audioFile, path: audioPath }] : []),\n ...(videoFile ? [{ file: videoFile, path: videoPath }] : []),\n ];\n\n return (\n \n

\n \n

1. Write three connected scenes

Links can jump to named places inside the same page. That gives your reader control over movement.

\n \", text: \"Creates the words a reader can click.\" },\n { code: \"href=\\\"#ending\\\"\", text: \"Jumps to the element named ending.\" },\n { code: \"id=\\\"ending\\\"\", text: \"Gives a place on the page a name.\" },\n { code: \"

\", text: \"Groups one scene or part of the story.\" },\n ]} />\n \n \n \n \n

2. Tell it with more than words

\n \", text: \"Embeds a picture.\" },\n { code: \"

\n \n );\n}\n\n","01a02085-194d-7488-9979-dd8a2dee9f5a",["D",1787251988821],"branchVersion","label",[177,178,70],"frontend","modules","pulls","branches",2,"forks","envVars",{"_187":26,"_189":26},"connections",{"_187":26,"_188":26},"count","unfilledCount","emptyCount",{"_32":333,"_13":177,"_68":229,"_42":-5,"_34":35,"_174":39,"_212":91,"_36":334,"_38":26,"_71":302,"_170":-5,"_73":24,"_175":-5,"_216":335,"_17":336},{"_32":329,"_13":313,"_68":308,"_42":229,"_34":35,"_174":39,"_212":91,"_36":330,"_38":26,"_71":302,"_170":-5,"_73":24,"_175":-5,"_216":331,"_17":332},{"_32":321,"_13":322,"_68":323,"_42":308,"_34":35,"_174":117,"_212":91,"_36":324,"_38":325,"_71":72,"_170":326,"_73":24,"_175":-5,"_216":327,"_17":328},{"_32":314,"_13":315,"_68":316,"_42":308,"_34":35,"_174":39,"_212":91,"_36":317,"_38":26,"_71":72,"_170":318,"_73":24,"_175":-5,"_216":319,"_17":320},{"_32":305,"_13":306,"_68":307,"_42":308,"_34":35,"_174":39,"_212":91,"_36":309,"_38":26,"_71":72,"_170":310,"_73":24,"_175":-5,"_216":311,"_17":312},{"_32":300,"_13":178,"_68":172,"_42":229,"_34":35,"_174":39,"_212":91,"_36":301,"_38":26,"_71":302,"_170":-5,"_73":24,"_175":-5,"_216":303,"_17":304},{"_32":293,"_13":294,"_68":295,"_42":172,"_34":35,"_174":39,"_212":91,"_36":296,"_38":26,"_71":72,"_170":297,"_73":24,"_175":-5,"_216":298,"_17":299},{"_32":286,"_13":287,"_68":288,"_42":172,"_34":35,"_174":39,"_212":91,"_36":289,"_38":26,"_71":72,"_170":290,"_73":24,"_175":-5,"_216":291,"_17":292},{"_32":169,"_13":70,"_68":69,"_42":172,"_34":35,"_174":39,"_212":91,"_36":283,"_38":26,"_71":72,"_170":171,"_73":24,"_175":-5,"_216":284,"_17":285},{"_32":276,"_13":277,"_68":278,"_42":172,"_34":35,"_174":39,"_212":91,"_36":279,"_38":26,"_71":72,"_170":280,"_73":24,"_175":-5,"_216":281,"_17":282},{"_32":269,"_13":270,"_68":271,"_42":172,"_34":35,"_174":39,"_212":91,"_36":272,"_38":26,"_71":72,"_170":273,"_73":24,"_175":-5,"_216":274,"_17":275},{"_32":262,"_13":263,"_68":264,"_42":172,"_34":35,"_174":39,"_212":91,"_36":265,"_38":26,"_71":72,"_170":266,"_73":24,"_175":-5,"_216":267,"_17":268},{"_32":255,"_13":256,"_68":257,"_42":172,"_34":35,"_174":39,"_212":91,"_36":258,"_38":26,"_71":72,"_170":259,"_73":24,"_175":-5,"_216":260,"_17":261},{"_32":248,"_13":249,"_68":250,"_42":229,"_34":35,"_174":39,"_212":91,"_36":251,"_38":26,"_71":21,"_170":252,"_73":24,"_175":-5,"_216":253,"_17":254},{"_32":241,"_13":242,"_68":243,"_42":229,"_34":35,"_174":39,"_212":91,"_36":244,"_38":26,"_71":72,"_170":245,"_73":24,"_175":-5,"_216":246,"_17":247},{"_32":234,"_13":235,"_68":236,"_42":229,"_34":35,"_174":39,"_212":91,"_36":237,"_38":26,"_71":72,"_170":238,"_73":24,"_175":-5,"_216":239,"_17":240},{"_32":226,"_13":227,"_68":228,"_42":229,"_34":35,"_174":181,"_212":91,"_36":230,"_38":26,"_71":72,"_170":231,"_73":24,"_175":-5,"_216":232,"_17":233},{"_32":219,"_13":220,"_68":221,"_42":-5,"_34":35,"_174":39,"_212":91,"_36":222,"_38":26,"_71":21,"_170":223,"_73":24,"_175":-5,"_216":224,"_17":225},{"_32":209,"_13":210,"_68":211,"_42":-5,"_34":35,"_174":39,"_212":91,"_36":213,"_38":26,"_71":214,"_170":215,"_73":24,"_175":-5,"_216":217,"_17":218},"9f2fa539-7f6a-435b-bd55-d127909c7501","index.ts","01a02085-194d-7488-9979-f6554acbcbf8","latest",["D",1787251988821],"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Give YouTube embeds a normal web origin, including when a downloaded\n// project is opened directly from Files or a local folder.\napp.get(\"/youtube/:id\", (c) => {\n const id = c.req.param(\"id\");\n if (!/^[a-zA-Z0-9_-]{6,}$/.test(id)) return c.text(\"Invalid YouTube video\", 400);\n\n return c.html(`\n\n\n \n \n YouTube video\n \n\n\n \n\n`);\n});\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","children",[],[210],"6f44bf34-de1c-4640-b669-5a40cde4ba63","README.md","01a02085-194d-7488-9979-f1bb42346d50",["D",1787251988821],"# HTML Writing Lab\n\nA collection of beginner-friendly HTML writing activities for young web makers.\n\n## Activities\n\n- Make Your First Website\n- Tell a Hypertext Story\n- Choose Your Own Adventure\n- Make a Web Poem\n- Build a Whole Website\n- HTML Snippet Board\n\nThe activities introduce HTML structure, text, links, images, audio, video, and simple page-to-page navigation. Each builder includes a live preview and produces downloadable HTML.\n\nLive site: https://firstpage.val.run/\n\n## Architecture decision records\n\n### ADR-001: Sanitize student-authored HTML before rendering\n\n- **Status:** Accepted\n- **Date:** 2026-08-01\n\n#### Context\n\nThe advanced website activity stores each page body as an HTML string. React does not interpret a string as elements by default, so the visual editor and preview use `dangerouslySetInnerHTML` to turn that string into rendered HTML.\n\nThat API is necessary for the current visual editing experience, but unsanitized HTML is an injection sink. A script element inserted through `innerHTML` normally does not execute, but event attributes such as `onerror`, dangerous URL schemes such as `javascript:`, and other active markup can still execute in the application document.\n\nAlthough projects currently remain in the student's browser, students may paste examples from the web and future versions may support importing or sharing projects. User-authored HTML must therefore be treated as untrusted.\n\n#### Decision\n\nAll advanced-page HTML is sanitized with DOMPurify before it:\n\n1. Enters the WYSIWYG editor.\n2. Enters the visual preview.\n3. Is included in a downloaded website.\n4. Is accepted as rich HTML from the clipboard.\n\nThe sanitizer uses an allowlist intended for the lesson:\n\n- Elements: headings, paragraphs, emphasis, links, images, lists, blockquotes, and line breaks.\n- Attributes: `href`, `src`, `alt`, and `title`.\n\nScripts, event-handler attributes, embeds, styles, data attributes, ARIA attributes, and unsupported elements are removed. Toolbar-created web links and image URLs must use `http://` or `https://`. Internal page links continue to use controlled relative filenames.\n\nRaw text may still be written in HTML mode so students can see and correct their source, but only sanitized output is rendered or downloaded.\n\n#### Consequences\n\n- Student-authored HTML cannot execute JavaScript in the main First Page application through the supported editor flow.\n- Pasting formatted text continues to work, but unsupported formatting is removed.\n- Advanced users cannot add scripts, iframes, custom CSS, forms, or arbitrary attributes in this activity.\n- Adding a new supported HTML feature requires deliberately expanding the sanitizer allowlist.\n- Sanitization is the primary control. A sandboxed preview iframe and a strict Content Security Policy remain recommended defense-in-depth improvements.\n\n",[],[220],"d324095d-8946-4dc1-8c06-4ca3b9d59344","storage.ts","8820711a-9cc8-11f1-a3e8-1607ee4eb77e","01a02085-194d-7488-9979-ed61e32b72d7",["D",1787252051629],"export type SavedFirstWebsite = {\n id: string;\n name: string;\n updatedAt: number;\n step: number;\n project: Record;\n};\n\nconst DB_NAME = \"firstpage\";\nconst DB_VERSION = 1;\nconst STORE = \"projects\";\n\nfunction openDatabase(): Promise {\n return new Promise((resolve, reject) => {\n const request = indexedDB.open(DB_NAME, DB_VERSION);\n request.onupgradeneeded = () => {\n const db = request.result;\n if (!db.objectStoreNames.contains(STORE)) {\n const store = db.createObjectStore(STORE, { keyPath: \"id\" });\n store.createIndex(\"updatedAt\", \"updatedAt\");\n }\n };\n request.onsuccess = () => resolve(request.result);\n request.onerror = () => reject(request.error);\n });\n}\n\nfunction requestResult(request: IDBRequest): Promise {\n return new Promise((resolve, reject) => {\n request.onsuccess = () => resolve(request.result);\n request.onerror = () => reject(request.error);\n });\n}\n\nexport async function listFirstWebsites(): Promise {\n const db = await openDatabase();\n try {\n const projects = await requestResult(db.transaction(STORE, \"readonly\").objectStore(STORE).getAll()) as SavedFirstWebsite[];\n return projects.sort((a, b) => b.updatedAt - a.updatedAt);\n } finally {\n db.close();\n }\n}\n\nexport async function getFirstWebsite(id: string): Promise {\n const db = await openDatabase();\n try {\n return await requestResult(db.transaction(STORE, \"readonly\").objectStore(STORE).get(id));\n } finally {\n db.close();\n }\n}\n\nexport async function saveFirstWebsite(project: SavedFirstWebsite): Promise {\n const db = await openDatabase();\n try {\n await requestResult(db.transaction(STORE, \"readwrite\").objectStore(STORE).put(project));\n } finally {\n db.close();\n }\n}\n\nexport async function deleteFirstWebsite(id: string): Promise {\n const db = await openDatabase();\n try {\n await requestResult(db.transaction(STORE, \"readwrite\").objectStore(STORE).delete(id));\n } finally {\n db.close();\n }\n}\n",[],[177,227],"4607e4f3-12be-431b-bdc1-92c1d28e7131","root.tsx","01a02085-194d-7488-9979-ebd77b1c7034",["D",1787251988821],"/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport function Root() {\n return (\n <>\n {raw(\"\")}\n \n \n \n \n \n HTML Writing Lab\n \n \n \n \n `);\n\n return (\n

● ● ● LIVE WEBPAGE

History · HypertextLab.tsx