`, 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

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_337":338,"_339":340},"routes/_app.x.$handle.$name",{"_98":97,"_31":43,"_107":88,"_26":102,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":-5,"_119":-5,"_120":24,"_121":122,"_123":57,"_124":-5,"_125":-5,"_126":127},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_41":42,"_31":43,"_36":44,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":24},"version",10,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":20,"_34":35,"_36":37,"_38":14,"_39":40,"_23":24},"previous","deleted",false,"deletedHere","path","frontend/style.css","latestPath","fileId","b2a47894-afb2-11f1-9520-1607ee4eb77e","name","style.css","fileType","content",":root {\n --ground: #ecf0ea;\n --card: #ffffff;\n --ink: #17221d;\n --muted: #5b6862;\n --line: #d6ddd5;\n --aga: #b02e63;\n --aga-soft: #f7e3ec;\n --dominik: #0a746a;\n --dominik-soft: #dcefeb;\n --danger: #a3321f;\n --display: \"Bricolage Grotesque\", ui-sans-serif, system-ui, sans-serif;\n --body: \"Atkinson Hyperlegible\", ui-sans-serif, system-ui, sans-serif;\n color-scheme: light dark;\n}\n\n@media (prefers-color-scheme: dark) {\n :root {\n --ground: #0e1411;\n --card: #17201b;\n --ink: #e4ebe6;\n --muted: #93a099;\n --line: #29352e;\n --aga: #ee72a6;\n --aga-soft: #3a1e2b;\n --dominik: #44c4b6;\n --dominik-soft: #14332f;\n --danger: #f08a73;\n }\n}\n\n* { box-sizing: border-box; }\n\nhtml, body {\n margin: 0;\n background: var(--ground);\n color: var(--ink);\n font-family: var(--body);\n -webkit-text-size-adjust: 100%;\n}\n\nbody { min-height: 100dvh; }\n\nbutton {\n font: inherit;\n color: inherit;\n background: none;\n border: 0;\n padding: 0;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n}\nbutton:disabled { cursor: default; }\n\n:focus-visible {\n outline: 3px solid var(--dominik);\n outline-offset: 2px;\n border-radius: 10px;\n}\n\n[data-who=\"Aga\"] { --who: var(--aga); --who-soft: var(--aga-soft); }\n[data-who=\"Dominik\"] { --who: var(--dominik); --who-soft: var(--dominik-soft); }\n\n/* ---------- layout ---------- */\n\n.app {\n max-width: 560px;\n margin: 0 auto;\n padding: calc(env(safe-area-inset-top) + 22px) 16px calc(180px + env(safe-area-inset-bottom));\n}\n\n.top {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 12px;\n margin-bottom: 18px;\n}\n\nh1 {\n font-family: var(--display);\n font-weight: 800;\n font-size: 46px;\n line-height: 0.95;\n letter-spacing: -0.035em;\n margin: 0;\n}\n\nh2 {\n font-family: var(--display);\n font-weight: 700;\n font-size: 18px;\n letter-spacing: -0.01em;\n margin: 0;\n}\n\n.count {\n margin: 6px 0 0;\n color: var(--muted);\n font-size: 15px;\n}\n\n.me {\n display: flex;\n align-items: center;\n gap: 8px;\n min-height: 44px;\n padding: 6px 14px 6px 6px;\n border-radius: 999px;\n background: var(--card);\n border: 1px solid var(--line);\n font-weight: 700;\n font-size: 15px;\n}\n\n.sticker {\n display: inline-grid;\n place-items: center;\n flex: none;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n background: var(--who);\n color: var(--card);\n font-family: var(--display);\n font-weight: 800;\n font-size: 15px;\n transform: rotate(-8deg);\n}\n.sticker.big { width: 58px; height: 58px; font-size: 28px; }\n\n.banner {\n margin: 0 0 14px;\n padding: 10px 12px;\n border-radius: 10px;\n background: var(--card);\n border-left: 4px solid var(--danger);\n font-size: 14px;\n line-height: 1.4;\n}\n\n/* ---------- list ---------- */\n\n.list {\n list-style: none;\n margin: 0;\n padding: 0;\n background: var(--card);\n border: 1px solid var(--line);\n border-radius: 18px;\n overflow: hidden;\n}\n\n.row {\n display: flex;\n align-items: stretch;\n border-top: 1px solid var(--line);\n transition: opacity 0.2s;\n}\n.row:first-child { border-top: 0; }\n.row.is-pending { opacity: 0.55; }\n\n.row-main {\n flex: 1;\n min-width: 0;\n min-height: 64px;\n display: flex;\n align-items: center;\n gap: 14px;\n padding: 12px 4px 12px 16px;\n text-align: left;\n}\n\n.check {\n flex: none;\n display: grid;\n place-items: center;\n width: 28px;\n height: 28px;\n border-radius: 50%;\n border: 2px solid var(--muted);\n transition: background-color 0.2s, border-color 0.2s;\n}\n.check svg {\n width: 18px;\n height: 18px;\n fill: none;\n stroke: var(--card);\n stroke-width: 3;\n stroke-linecap: round;\n stroke-linejoin: round;\n opacity: 0;\n transition: opacity 0.15s;\n}\n.is-checked .check { background: var(--who); border-color: var(--who); }\n.is-checked .check svg { opacity: 1; }\n\n.row-text {\n display: flex;\n flex-direction: column;\n gap: 2px;\n min-width: 0;\n}\n\n.name {\n position: relative;\n align-self: flex-start;\n font-size: 19px;\n line-height: 1.25;\n overflow-wrap: anywhere;\n transition: color 0.3s;\n}\n.is-checked .name { color: var(--muted); }\n\n/* marker stroke drawn in the buyer's colour */\n.strike {\n position: absolute;\n left: -4px;\n top: 50%;\n width: calc(100% + 8px);\n height: 14px;\n margin-top: -6px;\n overflow: visible;\n pointer-events: none;\n}\n.strike path {\n fill: none;\n stroke: var(--who);\n stroke-width: 3.5;\n stroke-linecap: round;\n stroke-dasharray: 1 1;\n stroke-dashoffset: 1;\n opacity: 0;\n transition: stroke-dashoffset 0.42s cubic-bezier(0.65, 0, 0.35, 1);\n}\n.is-checked .strike path { opacity: 1; stroke-dashoffset: 0; }\n\n.meta { font-size: 13px; color: var(--muted); }\n.is-checked .meta { color: var(--who); font-weight: 700; }\n\n.remove {\n flex: none;\n width: 52px;\n display: grid;\n place-items: center;\n color: var(--muted);\n}\n.remove svg {\n width: 18px;\n height: 18px;\n fill: none;\n stroke: currentColor;\n stroke-width: 2.2;\n stroke-linecap: round;\n}\n\n.basket { margin-top: 28px; }\n.basket .list { background: transparent; }\n\n.section-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n margin: 0 4px 8px;\n}\n\n.clear {\n min-height: 44px;\n padding: 0 14px;\n border-radius: 999px;\n color: var(--muted);\n font-size: 14px;\n font-weight: 700;\n transition: background-color 0.15s, color 0.15s;\n}\n.clear.is-armed { background: var(--danger); color: var(--card); }\n\n.empty {\n padding: 36px 12px;\n text-align: center;\n color: var(--muted);\n line-height: 1.45;\n}\n.empty strong {\n display: block;\n margin-bottom: 4px;\n font-family: var(--display);\n font-size: 24px;\n font-weight: 700;\n color: var(--ink);\n}\n\n.source {\n display: block;\n margin-top: 40px;\n text-align: center;\n font-size: 13px;\n color: var(--muted);\n}\n\n/* ---------- add bar ---------- */\n\n.addbar {\n position: fixed;\n left: 0;\n right: 0;\n bottom: 0;\n padding: 18px 16px calc(12px + env(safe-area-inset-bottom));\n background: linear-gradient(to top, var(--ground) 72%, transparent);\n}\n\n.addbar-inner { max-width: 560px; margin: 0 auto; }\n\n.chips {\n display: flex;\n gap: 8px;\n overflow-x: auto;\n padding: 2px 2px 10px;\n scrollbar-width: none;\n}\n.chips::-webkit-scrollbar { display: none; }\n\n.chip {\n flex: none;\n min-height: 40px;\n padding: 0 14px;\n border-radius: 999px;\n background: var(--card);\n border: 1px solid var(--line);\n font-size: 15px;\n white-space: nowrap;\n}\n.chip span { color: var(--who, var(--muted)); font-weight: 700; }\n\n.add-row {\n display: flex;\n gap: 8px;\n padding: 6px;\n background: var(--card);\n border: 2px solid var(--line);\n border-radius: 20px;\n box-shadow: 0 10px 30px rgba(10, 20, 15, 0.1);\n transition: border-color 0.15s;\n}\n.add-row:focus-within { border-color: var(--who, var(--ink)); }\n\n.add-row input {\n flex: 1;\n min-width: 0;\n padding: 10px;\n border: 0;\n background: transparent;\n color: var(--ink);\n font: inherit;\n font-size: 18px;\n outline: none;\n}\n.add-row input::placeholder { color: var(--muted); }\n\n.add-btn {\n min-height: 48px;\n padding: 0 20px;\n border-radius: 14px;\n background: var(--who, var(--ink));\n color: var(--card);\n font-weight: 700;\n font-size: 16px;\n transition: opacity 0.15s;\n}\n.add-btn:disabled { opacity: 0.35; }\n\n/* ---------- who picker ---------- */\n\n.picker {\n position: fixed;\n inset: 0;\n z-index: 10;\n display: grid;\n place-items: end center;\n padding: 16px;\n background: rgba(8, 14, 11, 0.55);\n}\n\n.picker-card {\n width: 100%;\n max-width: 480px;\n padding: 26px 20px calc(18px + env(safe-area-inset-bottom));\n border-radius: 26px;\n background: var(--card);\n}\n.picker-card h2 { font-size: 26px; line-height: 1.1; }\n.picker-card p { margin: 8px 0 20px; color: var(--muted); font-size: 15px; line-height: 1.4; }\n\n.picker-options {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n}\n\n.pick {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n padding: 22px 8px 18px;\n border-radius: 20px;\n border: 2px solid transparent;\n background: var(--who-soft);\n font-family: var(--display);\n font-weight: 700;\n font-size: 22px;\n}\n.pick.is-current { border-color: var(--who); }\n\n.link {\n display: block;\n margin: 14px auto 0;\n padding: 10px 16px;\n color: var(--muted);\n font-weight: 700;\n}\n\n@media (prefers-reduced-motion: reduce) {\n *, *::before, *::after { transition: none !important; }\n}\n","createdAt",["D",1789331746124],"branchVersion","branchId","2b7f7d5b-efff-44e5-9962-373315ac0749","id","f99be336-a8c3-4900-9595-c5bea7024466","lista-zakupow",["D",1789331428995],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Wspólna lista zakupów Agi i Dominika (mobile)","imageUrl","5dd5cdfa-b36a-42e1-a911-81ba86e3b64c","pinnedFileId","01a09c76-d795-72a1-be82-f37a11bb083f","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a09aab-d118-725d-b44f-c12d328bfdc6","tursoName","f99be336a8c349009595c5bea7024466","tursoHostname","f99be336a8c349009595c5bea7024466-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789504321592],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_106":102},"org",{"_98":97,"_99":100,"_101":102,"_18":53,"_103":104,"_105":24},"branch",{"_13":87,"_31":88,"_41":40,"_89":42,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":43,"_96":97},"isOwned",27,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dominik1","handle","displayName","Dominik","avatar","","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_41":42,"_31":43,"_36":332,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":333,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":334,"_82":335,"_84":336,"_86":24},"tree",[185,187,201,203,204,205],"files",[185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205],"counts",{"_174":61,"_175":159,"_176":61,"_177":178,"_179":180},"contents",[128,129,130,131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_41":168,"_31":169,"_29":170,"_136":-5,"_39":40,"_38":171,"_138":57,"_36":172,"_13":61,"_33":161,"_34":-5,"_23":24,"_142":-5,"_26":173},{"_41":163,"_31":164,"_29":165,"_136":-5,"_39":40,"_38":137,"_138":57,"_36":166,"_13":61,"_33":161,"_34":-5,"_23":24,"_142":-5,"_26":167},{"_41":156,"_31":157,"_29":158,"_136":-5,"_39":40,"_38":159,"_138":57,"_36":160,"_13":61,"_33":161,"_34":-5,"_23":24,"_142":-5,"_26":162},{"_41":150,"_31":151,"_29":152,"_136":-5,"_39":40,"_38":137,"_138":57,"_36":153,"_13":61,"_33":20,"_34":154,"_23":24,"_142":-5,"_26":155},{"_41":144,"_31":145,"_29":146,"_136":-5,"_39":40,"_38":137,"_138":24,"_36":147,"_13":61,"_33":20,"_34":148,"_23":24,"_142":-5,"_26":149},{"_41":134,"_31":135,"_29":55,"_136":-5,"_39":40,"_38":137,"_138":24,"_36":139,"_13":61,"_33":140,"_34":141,"_23":24,"_142":-5,"_26":143},"1500f2ee-376e-43c6-9ee7-ce82c8a7a3fc","index.ts","parentId",1,"latest",["D",1789331428995],"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// 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","label",[135],"68fa252f-2072-441b-b60b-b34199ba3d65","README.md","01a09c76-d794-7474-b4e3-6ff2da2d6b8a",["D",1789331428995],"# 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",[145],"8dcda787-8b81-4f00-856a-887038e54765","CHANGELOG.md","01a09c76-d794-7474-b4e3-6a43e57cbd5c",["D",1789331428995],"# 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

Diff · v10