`, 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 {error &&

{error}

}\n\n {view.name === \"home\" && (\n setView({ name: \"practice\" })}\n onBrowse={() => setView({ name: \"list\" })}\n onBrowseTwelveLead={() => setView({ name: \"twelveLeadList\" })}\n onGoPro={() => setShowPro(true)}\n />\n )}\n\n {view.name === \"practice\" && (\n !rhythms\n ?

Loading rhythms…

\n : (\n setShowPro(true)}\n />\n )\n )}\n\n {view.name === \"list\" && (\n <>\n {!rhythms &&

Loading rhythms…

}\n {rhythms && (\n

\n {CATEGORY_ORDER.map((category) => {\n const items = rhythms.filter((r) => r.category === category);\n if (items.length === 0) return null;\n return (\n

\n {category}\n

\n {items.map((r) => )}\n

\n );\n })}\n

\n )}\n \n )}\n\n {view.name === \"detail\" && (\n detail\n ? (\n setView({ name: \"quiz\", id: view.id })}\n onBack={() => setView({ name: \"list\" })}\n />\n )\n :

Loading…

\n )}\n\n {view.name === \"quiz\" && (\n detail\n ? (\n setView({ name: \"list\" })}\n />\n )\n :

Loading…

\n )}\n\n {view.name === \"twelveLeadList\" && (\n <>\n {!twelveLeadCases &&

Loading 12-lead cases…

}\n {twelveLeadCases && (\n

\n Full 12-lead ECGs — read all twelve leads together to localize STEMIs, spot\n conduction and axis abnormalities, and catch the patterns single-lead strips\n can't show.\n

\n {TWELVE_LEAD_CATEGORY_ORDER.map((category) => {\n const items = twelveLeadCases.filter((t) => t.category === category);\n if (items.length === 0) return null;\n return (\n

\n {category}\n

\n {items.map((t) => (\n \n ))}\n

\n );\n })}\n

\n )}\n \n )}\n\n {view.name === \"twelveLeadDetail\" && (\n twelveLeadDetail\n ? (\n setView({ name: \"twelveLeadQuiz\", id: view.id })}\n onBack={() => setView({ name: \"twelveLeadList\" })}\n />\n )\n :

Loading…

\n )}\n\n {view.name === \"twelveLeadQuiz\" && (\n twelveLeadDetail\n ? (\n setView({ name: \"twelveLeadList\" })}\n />\n )\n :

Loading…

\n )}\n\n

\n View source\n

History · App.tsx