`, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n","label",[160,161,69],"frontend","components","pulls","branches",3,"forks","envVars",{"_170":26,"_172":26},"connections",{"_170":26,"_171":26},"count","unfilledCount","emptyCount",{"_32":247,"_13":160,"_67":211,"_42":-5,"_34":35,"_153":39,"_154":89,"_36":248,"_38":26,"_70":244,"_156":-5,"_72":24,"_158":-5,"_191":249,"_17":250},{"_32":242,"_13":161,"_67":152,"_42":211,"_34":35,"_153":39,"_154":89,"_36":243,"_38":26,"_70":244,"_156":-5,"_72":24,"_158":-5,"_191":245,"_17":246},{"_32":234,"_13":235,"_67":236,"_42":152,"_34":35,"_153":115,"_154":89,"_36":237,"_38":238,"_70":71,"_156":239,"_72":24,"_158":-5,"_191":240,"_17":241},{"_32":151,"_13":69,"_67":68,"_42":152,"_34":35,"_153":39,"_154":89,"_36":231,"_38":26,"_70":71,"_156":157,"_72":24,"_158":-5,"_191":232,"_17":233},{"_32":224,"_13":225,"_67":226,"_42":211,"_34":35,"_153":39,"_154":89,"_36":227,"_38":26,"_70":21,"_156":228,"_72":24,"_158":-5,"_191":229,"_17":230},{"_32":217,"_13":218,"_67":219,"_42":211,"_34":35,"_153":65,"_154":89,"_36":220,"_38":39,"_70":71,"_156":221,"_72":24,"_158":-5,"_191":222,"_17":223},{"_32":208,"_13":209,"_67":210,"_42":211,"_34":35,"_153":212,"_154":89,"_36":213,"_38":164,"_70":71,"_156":214,"_72":24,"_158":-5,"_191":215,"_17":216},{"_32":201,"_13":202,"_67":203,"_42":-5,"_34":35,"_153":39,"_154":89,"_36":204,"_38":26,"_70":21,"_156":205,"_72":24,"_158":-5,"_191":206,"_17":207},{"_32":194,"_13":195,"_67":196,"_42":-5,"_34":35,"_153":39,"_154":89,"_36":197,"_38":26,"_70":21,"_156":198,"_72":24,"_158":-5,"_191":199,"_17":200},{"_32":183,"_13":184,"_67":87,"_42":-5,"_34":35,"_153":185,"_154":89,"_36":186,"_38":187,"_70":188,"_156":189,"_72":24,"_158":190,"_191":192,"_17":193},"b02c39bd-0ddf-4db0-8747-68d6edacad7e","index.ts",50,["D",1789501487279],10,"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\n\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS oso_projects (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n title TEXT NOT NULL,\n concept TEXT NOT NULL DEFAULT '',\n stage TEXT NOT NULL DEFAULT 'Design',\n created_at TEXT NOT NULL,\n updated_at TEXT NOT NULL\n)`);\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS oso_assets (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n mime TEXT NOT NULL,\n source TEXT NOT NULL DEFAULT 'upload',\n created_at TEXT NOT NULL\n)`);\nawait sqlite.execute(`CREATE TABLE IF NOT EXISTS oso_versions (\n id TEXT PRIMARY KEY,\n project_id TEXT NOT NULL,\n name TEXT NOT NULL,\n created_at TEXT NOT NULL\n)`);\n\nfunction defaultDocument(id: string, name = \"Mi diseño\") {\n const pageId = crypto.randomUUID();\n return {\n id,\n name,\n width: 1080,\n height: 1350,\n unit: \"px\",\n dpi: 72,\n background: \"#ffffff\",\n activePageId: pageId,\n pages: [{ id: pageId, name: \"Página 1\", background: \"#ffffff\", elements: [] }],\n brand: { name: \"\", primary: \"#111827\", secondary: \"#f3f4f6\", accent: \"#ef4444\", font: \"Inter\" },\n updatedAt: new Date().toISOString()\n };\n}\n\nfunction cleanText(value: unknown, max = 5000) {\n return String(value ?? \"\").trim().slice(0, max);\n}\n\nfunction extractJsonArray(text: string) {\n const fenced = text.match(/```(?:json)?\\s*([\\s\\S]*?)```/i)?.[1] ?? text;\n const start = fenced.indexOf(\"[\");\n const end = fenced.lastIndexOf(\"]\");\n if (start < 0 || end <= start) return [];\n try {\n const parsed = JSON.parse(fenced.slice(start, end + 1));\n return Array.isArray(parsed) ? parsed : [];\n } catch {\n return [];\n }\n}\n\nasync function runOpenAI(prompt: string) {\n const key = Deno.env.get(\"OPENAI_API_KEY\");\n if (!key) throw new Error(\"OPENAI_API_KEY missing\");\n const response = await fetch(\"https://api.openai.com/v1/responses\", {\n method: \"POST\",\n headers: { \"authorization\": `Bearer ${key}`, \"content-type\": \"application/json\" },\n body: JSON.stringify({ model: \"gpt-5.6-luna\", input: prompt })\n });\n if (!response.ok) throw new Error(`OpenAI ${response.status}`);\n const data = await response.json();\n const chunks: string[] = [];\n for (const item of data?.output ?? []) {\n for (const part of item?.content ?? []) {\n if (typeof part?.text === \"string\") chunks.push(part.text);\n }\n }\n return chunks.join(\"\\n\").trim();\n}\n\nasync function runPublicAI(prompt: string) {\n const response = await fetch(\"https://text.pollinations.ai/\" + encodeURIComponent(prompt) + \"?model=openai&seed=42\");\n if (!response.ok) throw new Error(`Public AI ${response.status}`);\n return await response.text();\n}\n\napp.get(\"/\", (c) => c.html(Root()));\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.get(\"/api/health\", (c) => c.json({ ok: true, app: \"OSO Studio\", editor: true }));\n\napp.get(\"/api/providers\", (c) => c.json({\n providers: [\n { id: \"openai\", name: \"GPT\", status: Deno.env.get(\"OPENAI_API_KEY\") ? \"configured\" : \"not-configured\", capabilities: [\"texto\", \"comandos\", \"visión\"], note: \"Copiloto opcional para editar el documento por comandos estructurados.\" },\n { id: \"public\", name: \"Public AI\", status: \"ready\", capabilities: [\"texto\", \"comandos\", \"imagen\"], note: \"Fallback público para que OSO siga funcionando aunque GPT no esté conectado.\" },\n { id: \"gemini\", name: \"Gemini\", status: Deno.env.get(\"GEMINI_API_KEY\") ? \"configured\" : \"not-configured\", capabilities: [\"multimodal\", \"video\"], note: \"Proveedor opcional preparado para futuras herramientas multimodales.\" }\n ],\n automaticOrder: [\"GPT\", \"Public AI\"]\n}));\n\napp.get(\"/api/projects\", async (c) => {\n const result = await sqlite.execute(\"SELECT * FROM oso_projects ORDER BY updated_at DESC LIMIT 100\");\n return c.json({ projects: result.rows.map((row) => ({\n id: String(row.id),\n title: String(row.title),\n concept: String(row.concept),\n stage: String(row.stage),\n createdAt: String(row.created_at),\n updatedAt: String(row.updated_at)\n })) });\n});\n\napp.post(\"/api/projects\", async (c) => {\n const body = await c.req.json();\n const title = cleanText(body?.title, 120) || \"Mi diseño\";\n const concept = cleanText(body?.concept, 500);\n const now = new Date().toISOString();\n const result = await sqlite.execute({\n sql: \"INSERT INTO oso_projects (title, concept, stage, created_at, updated_at) VALUES (?, ?, ?, ?, ?) RETURNING id\",\n args: [title, concept, \"Design\", now, now]\n });\n const id = String(result.rows[0]?.id || \"\");\n const doc = defaultDocument(id, title);\n await blob.setJSON(`doc:${id}`, doc);\n return c.json({ project: { id, title, concept, stage: \"Design\", createdAt: now, updatedAt: now }, document: doc }, 201);\n});\n\napp.patch(\"/api/projects/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n const body = await c.req.json();\n const title = cleanText(body?.title, 120);\n if (!Number.isFinite(id) || !title) return c.json({ error: \"Datos inválidos\" }, 400);\n const now = new Date().toISOString();\n await sqlite.execute({ sql: \"UPDATE oso_projects SET title = ?, updated_at = ? WHERE id = ?\", args: [title, now, id] });\n const doc = (await blob.getJSON(`doc:${id}`)) as any;\n if (doc) await blob.setJSON(`doc:${id}`, { ...doc, name: title, updatedAt: now });\n return c.json({ ok: true, title, updatedAt: now });\n});\n\napp.delete(\"/api/projects/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n if (!Number.isFinite(id)) return c.json({ error: \"ID inválido\" }, 400);\n await sqlite.execute({ sql: \"DELETE FROM oso_projects WHERE id = ?\", args: [id] });\n try { await blob.delete(`doc:${id}`); } catch {}\n return c.json({ ok: true });\n});\n\napp.get(\"/api/documents/:id\", async (c) => {\n const id = c.req.param(\"id\");\n let doc = await blob.getJSON(`doc:${id}`) as any;\n if (!doc) {\n const row = await sqlite.execute({ sql: \"SELECT title FROM oso_projects WHERE id = ?\", args: [Number(id)] });\n doc = defaultDocument(id, String(row.rows[0]?.title || \"Mi diseño\"));\n await blob.setJSON(`doc:${id}`, doc);\n }\n return c.json({ document: doc });\n});\n\napp.put(\"/api/documents/:id\", async (c) => {\n const id = c.req.param(\"id\");\n const body = await c.req.json();\n if (!body || !Array.isArray(body.pages)) return c.json({ error: \"Documento inválido\" }, 400);\n const jsonSize = JSON.stringify(body).length;\n if (jsonSize > 1_500_000) return c.json({ error: \"Documento demasiado grande; usa assets en vez de imágenes embebidas\" }, 413);\n const updatedAt = new Date().toISOString();\n await blob.setJSON(`doc:${id}`, { ...body, id, updatedAt });\n await sqlite.execute({ sql: \"UPDATE oso_projects SET updated_at = ? WHERE id = ?\", args: [updatedAt, Number(id)] });\n return c.json({ ok: true, updatedAt });\n});\n\napp.get(\"/api/documents/:id/versions\", async (c) => {\n const projectId = c.req.param(\"id\");\n const result = await sqlite.execute({ sql: \"SELECT id, name, created_at FROM oso_versions WHERE project_id = ? ORDER BY created_at DESC LIMIT 30\", args: [projectId] });\n return c.json({ versions: result.rows.map((row) => ({ id: String(row.id), name: String(row.name), createdAt: String(row.created_at) })) });\n});\n\napp.post(\"/api/documents/:id/versions\", async (c) => {\n const projectId = c.req.param(\"id\");\n const current = await blob.getJSON(`doc:${projectId}`) as any;\n if (!current) return c.json({ error: \"Documento no encontrado\" }, 404);\n const body = await c.req.json().catch(() => ({}));\n const versionId = crypto.randomUUID();\n const name = cleanText(body?.name, 100) || `Versión ${new Date().toLocaleString(\"es\")}`;\n const createdAt = new Date().toISOString();\n await blob.setJSON(`version:${projectId}:${versionId}`, current);\n await sqlite.execute({ sql: \"INSERT INTO oso_versions (id, project_id, name, created_at) VALUES (?, ?, ?, ?)\", args: [versionId, projectId, name, createdAt] });\n return c.json({ version: { id: versionId, name, createdAt } }, 201);\n});\n\napp.post(\"/api/documents/:id/versions/:versionId/restore\", async (c) => {\n const projectId = c.req.param(\"id\");\n const versionId = c.req.param(\"versionId\");\n const snapshot = await blob.getJSON(`version:${projectId}:${versionId}`) as any;\n if (!snapshot) return c.json({ error: \"Versión no encontrada\" }, 404);\n const updatedAt = new Date().toISOString();\n const restored = { ...snapshot, id: projectId, updatedAt };\n await blob.setJSON(`doc:${projectId}`, restored);\n await sqlite.execute({ sql: \"UPDATE oso_projects SET updated_at = ? WHERE id = ?\", args: [updatedAt, Number(projectId)] });\n return c.json({ document: restored });\n});\n\napp.post(\"/api/assets\", async (c) => {\n const body = await c.req.json();\n const data = String(body?.data || \"\");\n const mime = String(body?.mime || \"image/jpeg\");\n if (!/^image\\/(png|jpeg|webp|gif)$/.test(mime)) return c.json({ error: \"Formato no soportado\" }, 400);\n if (!data || data.length > 4_000_000) return c.json({ error: \"Imagen demasiado grande\" }, 413);\n const bytes = Uint8Array.from(atob(data), (ch) => ch.charCodeAt(0));\n const id = crypto.randomUUID();\n const name = cleanText(body?.name, 160) || \"Imagen\";\n const createdAt = new Date().toISOString();\n await blob.set(`asset:${id}`, bytes);\n await blob.setJSON(`assetmeta:${id}`, { mime, name, createdAt });\n await sqlite.execute({ sql: \"INSERT INTO oso_assets (id, name, mime, source, created_at) VALUES (?, ?, ?, ?, ?)\", args: [id, name, mime, \"upload\", createdAt] });\n return c.json({ id, name, mime, source: \"upload\", url: `/api/assets/${id}`, createdAt }, 201);\n});\n\napp.get(\"/api/assets\", async (c) => {\n const result = await sqlite.execute(\"SELECT id, name, mime, source, created_at FROM oso_assets ORDER BY created_at DESC LIMIT 100\");\n return c.json({ assets: result.rows.map((row) => ({ id: String(row.id), name: String(row.name), mime: String(row.mime), source: String(row.source), createdAt: String(row.created_at), url: `/api/assets/${row.id}` })) });\n});\n\napp.get(\"/api/assets/:id\", async (c) => {\n const id = c.req.param(\"id\");\n try {\n const [response, meta] = await Promise.all([blob.get(`asset:${id}`), blob.getJSON(`assetmeta:${id}`) as Promise]);\n const bytes = await response.arrayBuffer();\n return new Response(bytes, {\n headers: {\n \"content-type\": String(meta?.mime || \"application/octet-stream\"),\n \"cache-control\": \"public, max-age=31536000, immutable\"\n }\n });\n } catch {\n return c.json({ error: \"Asset no encontrado\" }, 404);\n }\n});\n\napp.post(\"/api/ai/commands\", async (c) => {\n const body = await c.req.json();\n const instruction = cleanText(body?.instruction, 1800);\n const selection = Array.isArray(body?.selection) ? body.selection.slice(0, 30) : [];\n const page = body?.page ?? {};\n const brand = body?.brand ?? {};\n if (!instruction) return c.json({ error: \"Instrucción requerida\" }, 400);\n\n const prompt = `You are the command engine inside OSO Studio, an editable graphic design app. Return ONLY a JSON array of commands. Never return markdown or explanations.\nAllowed commands:\n{\"type\":\"update\",\"ids\":[\"id\"],\"patch\":{\"x\":0,\"y\":0,\"width\":100,\"height\":100,\"rotation\":0,\"opacity\":1,\"fill\":\"#000000\",\"stroke\":\"#000000\",\"fontSize\":48,\"fontWeight\":700,\"fontFamily\":\"Inter\",\"text\":\"...\",\"textAlign\":\"left\"}}\n{\"type\":\"addText\",\"text\":\"...\",\"x\":100,\"y\":100,\"fontSize\":48,\"fill\":\"#111111\"}\n{\"type\":\"addRect\",\"x\":100,\"y\":100,\"width\":300,\"height\":120,\"fill\":\"#eeeeee\"}\n{\"type\":\"duplicate\",\"ids\":[\"id\"]}\n{\"type\":\"delete\",\"ids\":[\"id\"]}\n{\"type\":\"align\",\"mode\":\"left|center|right|top|middle|bottom|distributeH|distributeV\",\"ids\":[\"id\"]}\n{\"type\":\"canvas\",\"width\":1080,\"height\":1920}\nUse only fields needed. Preserve logos/images unless explicitly asked. Prefer subtle professional edits. Respect brand colors and font when available.\nPAGE: ${JSON.stringify({ width: page.width, height: page.height, background: page.background })}\nBRAND: ${JSON.stringify(brand)}\nSELECTED ELEMENTS: ${JSON.stringify(selection)}\nUSER INSTRUCTION: ${instruction}`;\n\n let provider = \"Public AI\";\n let text = \"\";\n if (Deno.env.get(\"OPENAI_API_KEY\")) {\n try { text = await runOpenAI(prompt); provider = \"GPT\"; } catch (err) { console.warn(\"GPT fallback\", err); }\n }\n if (!text) {\n try { text = await runPublicAI(prompt); } catch (err) { console.warn(\"Public AI fallback\", err); }\n }\n let commands = extractJsonArray(text).slice(0, 25);\n if (!commands.length) {\n const lower = instruction.toLowerCase();\n const ids = selection.map((item: any) => String(item?.id || \"\")).filter(Boolean);\n const first = selection[0] as any;\n const local: any[] = [];\n if (lower.includes(\"9:16\") || lower.includes(\"story\") || lower.includes(\"historia\")) {\n local.push({ type: \"canvas\", width: 1080, height: 1920 });\n }\n if (ids.length && (lower.includes(\"elimina\") || lower.includes(\"borra\"))) {\n local.push({ type: \"delete\", ids });\n } else if (ids.length && (lower.includes(\"duplica\") || lower.includes(\"copia\"))) {\n local.push({ type: \"duplicate\", ids });\n } else if (ids.length) {\n const patch: Record = {};\n if (lower.includes(\"premium\") || lower.includes(\"mejora\")) {\n if (first?.type === \"text\") patch.fontWeight = 900;\n patch.opacity = 1;\n }\n if (lower.includes(\"más grande\") || lower.includes(\"agranda\")) {\n if (first?.type === \"text\") patch.fontSize = Math.round(Number(first?.fs || first?.fontSize || 48) * 1.2);\n else { patch.width = Math.round(Number(first?.w || first?.width || 200) * 1.2); patch.height = Math.round(Number(first?.h || first?.height || 120) * 1.2); }\n }\n if (lower.includes(\"más pequeño\") || lower.includes(\"reduce\")) {\n if (first?.type === \"text\") patch.fontSize = Math.max(8, Math.round(Number(first?.fs || first?.fontSize || 48) * .82));\n else { patch.width = Math.max(20, Math.round(Number(first?.w || first?.width || 200) * .82)); patch.height = Math.max(20, Math.round(Number(first?.h || first?.height || 120) * .82)); }\n }\n if (lower.includes(\"negro\")) patch.fill = \"#111111\";\n if (lower.includes(\"blanco\")) patch.fill = \"#ffffff\";\n if (lower.includes(\"rojo\")) patch.fill = \"#ef4444\";\n if (lower.includes(\"azul\")) patch.fill = \"#2563eb\";\n if (lower.includes(\"arriba\")) patch.y = Math.max(0, Number(first?.y || 0) - 100);\n if (lower.includes(\"abajo\")) patch.y = Number(first?.y || 0) + 100;\n if (lower.includes(\"izquierda\")) patch.x = Math.max(0, Number(first?.x || 0) - 100);\n if (lower.includes(\"derecha\")) patch.x = Number(first?.x || 0) + 100;\n if (Object.keys(patch).length) local.push({ type: \"update\", ids, patch });\n }\n if (!local.length && (lower.includes(\"rectángulo\") || lower.includes(\"rectangulo\"))) {\n local.push({ type: \"addRect\", x: 120, y: Math.round(Number(page?.height || 1350) * .38), width: Math.max(260, Math.round(Number(page?.width || 1080) * .7)), height: 260, fill: lower.includes(\"gris\") ? \"#d1d5db\" : String(brand?.secondary || \"#e5e7eb\") });\n }\n if (!local.length || lower.includes(\"título\") || lower.includes(\"titulo\")) {\n const quoted = instruction.match(/[“\"']([^”\"']{2,80})[”\"']/)?.[1];\n const afterDiga = instruction.match(/(?:diga|que diga)\\s+([^,.]{2,80})/i)?.[1]?.replace(/\\s+(arriba|abajo).*$/i, \"\").trim();\n local.unshift({ type: \"addText\", text: quoted || afterDiga || \"Título\", x: 100, y: 90, fontSize: 72, fill: String(brand?.primary || \"#111827\") });\n if ((lower.includes(\"rectángulo\") || lower.includes(\"rectangulo\")) && !local.some((x) => x.type === \"addRect\")) {\n local.push({ type: \"addRect\", x: 120, y: 320, width: Math.max(260, Math.round(Number(page?.width || 1080) * .7)), height: 260, fill: lower.includes(\"gris\") ? \"#d1d5db\" : String(brand?.secondary || \"#e5e7eb\") });\n }\n }\n commands = local.slice(0, 25);\n provider = \"OSO Local\";\n }\n return c.json({ commands, provider });\n});\n\napp.post(\"/api/ai/image\", async (c) => {\n const body = await c.req.json();\n const prompt = cleanText(body?.prompt, 1800);\n if (!prompt) return c.json({ error: \"Prompt requerido\" }, 400);\n const imageUrl = \"https://image.pollinations.ai/prompt/\" + encodeURIComponent(prompt + \", professional graphic design asset, clean composition, no watermark\") + \"?width=1024&height=1024&nologo=true&seed=\" + Math.floor(Math.random() * 100000);\n const response = await fetch(imageUrl);\n if (!response.ok) return c.json({ error: \"No se pudo generar la imagen\" }, 502);\n const bytes = new Uint8Array(await response.arrayBuffer());\n if (bytes.byteLength > 4_000_000) return c.json({ error: \"Imagen generada demasiado grande\" }, 413);\n const id = crypto.randomUUID();\n const mime = response.headers.get(\"content-type\") || \"image/jpeg\";\n const createdAt = new Date().toISOString();\n await blob.set(`asset:${id}`, bytes);\n await blob.setJSON(`assetmeta:${id}`, { mime, name: \"AI image\", createdAt });\n await sqlite.execute({ sql: \"INSERT INTO oso_assets (id, name, mime, source, created_at) VALUES (?, ?, ?, ?, ?)\", args: [id, \"AI image\", mime, \"ai\", createdAt] });\n return c.json({ id, name: \"AI image\", mime, source: \"ai\", url: `/api/assets/${id}`, createdAt, provider: \"Public AI\" });\n});\n\napp.onError((err) => Promise.reject(err));\nexport default app.fetch;\n","oso-studio","children",[],[184],"66692d4a-a29d-4725-ba12-06de47383037","README.md","01a0a215-d9fe-72e9-a2b6-a2ffb0860dc7",["D",1789425736088],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"root.tsx\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n root.tsx ← HTML shell (stamps immutable asset URLs)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/root.tsx`** is the HTML shell — it loads Twind and stamps\n immutable asset URLs for the favicon and React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n\nTemplate updates and upgrade paths for existing remixes: [CHANGELOG.md](/CHANGELOG.md)\n",[],[195],"61778cd7-d3f5-42ac-9393-bd6856f09cc3","CHANGELOG.md","01a0a215-d9fe-72e9-a2b6-9d6ff5a6540c",["D",1789425736088],"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the ``, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter\n

History · Counter.tsx