`, 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",{"_429":430,"_431":432},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_322":-5,"_20":323,"_22":324,"_325":326,"_327":328,"_26":329,"_24":330,"_331":-5,"_332":-5,"_333":54,"_334":335,"_336":45,"_337":-5,"_338":-5,"_339":340},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","dusty_medic","name","ekg-rhythm-practice","branchName","main","version","path","frontend/lib/waveform.ts","project",{"_33":264,"_13":14,"_46":265,"_266":-5,"_267":54,"_268":269,"_270":269,"_271":272,"_273":-5,"_274":275,"_276":66,"_277":45,"_278":-5,"_279":-5,"_280":80,"_281":282,"_283":284,"_285":286,"_287":288,"_289":-5,"_290":291,"_292":291,"_293":294,"_295":294,"_296":294,"_297":291,"_298":291,"_299":300,"_301":302,"_303":304,"_305":54},"tree",[59,60,61,62,63],"file",{"_33":34,"_13":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_17":48,"_49":50,"_51":52,"_53":54,"_55":-5,"_18":56},"contents",[],"upstream","pull","ahead","behind","envVars","id","8f0d44af-21dd-48d4-ab81-ac31607aa11b","waveform.ts","fileId","04a856e6-a6f9-11f1-8cc4-1607ee4eb77e","parentId","4251605e-0e73-4cbd-82d5-1cb5438d42e3","branchId","7029bff5-bb8a-442e-a4f2-805f0156bd56","branchVersion",33,"latest",true,"createdAt",["D",1788375514330],2,"fileType","script","content","// Synthesizes a rhythm-strip waveform from a WaveformSpec. This is a teaching\n// approximation (rate, regularity, P-wave presence, QRS width/shape) — not a\n// literal clinical tracing. Every call re-rolls its randomness, so calling\n// this again for the same rhythm produces a visually fresh strip.\nimport type { WaveformSpec } from \"../../backend/rhythms-data.ts\";\n\nconst DT = 4; // ms per sample\nconst DURATION = 7600; // ms — roughly a 7.5s strip\nconst N = Math.floor(DURATION / DT);\n\nfunction rand(min: number, max: number) {\n return min + Math.random() * (max - min);\n}\n\nfunction gauss(t: number, center: number, sigma: number) {\n const d = t - center;\n return Math.exp(-(d * d) / (2 * sigma * sigma));\n}\n\nfunction pWaveAt(t: number, center: number, amp = 1) {\n return amp * 0.15 * gauss(t, center, 26);\n}\n\nfunction qrsAndT(\n t: number,\n center: number,\n wide: boolean,\n amp: number,\n delta = false,\n pacedSpike = false,\n spec?: WaveformSpec,\n) {\n const sigma = wide ? 16 : 9;\n let v = -0.15 * amp * (1 + (spec?.qDeep ? 1.4 : 0)) * gauss(t, center - 2.3 * sigma, sigma * 0.55)\n + amp * gauss(t, center, sigma * 0.55)\n - 0.3 * amp * gauss(t, center + 2.3 * sigma, sigma * 0.55);\n if (wide) v += 0.35 * amp * gauss(t, center + 4 * sigma, sigma * 0.9);\n if (delta) v += 0.3 * amp * gauss(t, center - 3.2 * sigma, sigma * 1.4);\n if (pacedSpike) v += 0.9 * gauss(t, center - 3.5 * sigma, 1.5);\n if (spec?.osbornWave) v += 0.35 * amp * gauss(t, center + 2.6 * sigma, sigma * 0.6);\n\n const qtOffset = spec?.qtOffsetMs ?? 0;\n const tc = center + (wide ? 260 : 210) + qtOffset;\n const tAmpScale = spec?.tAmpScale ?? 1;\n const tSign = spec?.tInvert ? -1 : 1;\n v += tSign * 0.28 * amp * tAmpScale * gauss(t, tc, 65);\n\n if (spec?.stElevation) v += 0.22 * amp * gauss(t, center + (wide ? 150 : 120), 90);\n if (spec?.stDepression) v -= 0.16 * amp * gauss(t, center + (wide ? 150 : 120), 90);\n if (spec?.stScoop) v -= 0.14 * amp * gauss(t, center + 140, 100);\n if (spec?.uWave) v += 0.09 * amp * gauss(t, tc + 130, 45);\n\n return v;\n}\n\nfunction sawtooth(t: number, period: number) {\n const x = (((t % period) + period) % period) / period;\n return x * 2 - 1;\n}\n\ninterface BeatEvent {\n pCenter?: number;\n qrsCenter?: number;\n spikeCenter?: number;\n wide?: boolean;\n amp?: number;\n pAmp?: number;\n delta?: boolean;\n pacedSpike?: boolean;\n}\n\nfunction rr(rate: number) {\n return 60000 / rate;\n}\n\nfunction buildEvents(spec: WaveformSpec): BeatEvent[] {\n const events: BeatEvent[] = [];\n\n switch (spec.pattern) {\n case \"regular\": {\n const rate = rand(spec.rateMin ?? 70, spec.rateMax ?? 90);\n const interval = rr(rate);\n const jitterRange = spec.irregular ? 0.18 : 0.03;\n let t = rand(150, 400);\n let i = 0;\n while (t < DURATION - 150) {\n const amp = spec.alternans ? (i % 2 === 0 ? 1.3 : 0.72) : 1;\n events.push({\n qrsCenter: t,\n pCenter: spec.hasPWave ? t - (spec.prMs ?? 150) : undefined,\n wide: spec.wide,\n amp,\n delta: spec.delta,\n pacedSpike: spec.pacedSpike,\n });\n t += interval * rand(1 - jitterRange, 1 + jitterRange);\n i++;\n }\n break;\n }\n case \"pause\": {\n const rate = rand(spec.rateMin ?? 60, spec.rateMax ?? 100);\n const interval = rr(rate);\n const beatTimes: number[] = [];\n let t = rand(150, 400);\n while (t < DURATION - 150) {\n beatTimes.push(t);\n t += interval;\n }\n const pauseIdx = Math.min(beatTimes.length - 2, Math.max(1, Math.floor(beatTimes.length / 2)));\n for (let i = 0; i < beatTimes.length; i++) {\n if (i === pauseIdx) continue; // dropped beat -> visible pause\n events.push({\n qrsCenter: beatTimes[i],\n pCenter: spec.hasPWave !== false ? beatTimes[i] - (spec.prMs ?? 160) : undefined,\n wide: false,\n amp: 1,\n });\n }\n break;\n }\n case \"multifocal\": {\n const rate = rand(spec.rateMin ?? 70, spec.rateMax ?? 100);\n const interval = rr(rate);\n const jitterRange = spec.irregular ? 0.3 : 0.15;\n let t = rand(150, 400);\n while (t < DURATION - 150) {\n const pAmp = rand(0.55, 1.4);\n const prOffset = rand(110, 190);\n if (spec.wide) {\n events.push({ qrsCenter: t, wide: true, amp: rand(0.8, 1.3) });\n } else {\n events.push({ qrsCenter: t, pCenter: t - prOffset, pAmp, wide: false, amp: 1 });\n }\n t += interval * rand(1 - jitterRange, 1 + jitterRange);\n }\n break;\n }\n case \"ectopic\": {\n const baseRate = rand(spec.baseRateMin ?? 60, spec.baseRateMax ?? 90);\n const interval = rr(baseRate);\n const beatTimes: number[] = [];\n let t = rand(150, 400);\n while (t < DURATION - 150) {\n beatTimes.push(t);\n t += interval;\n }\n const count = Math.min(spec.count ?? 1, Math.max(1, beatTimes.length - 2));\n const step = Math.floor(beatTimes.length / (count + 1));\n const ecIdxs = new Set();\n for (let k = 1; k <= count; k++) ecIdxs.add(Math.min(beatTimes.length - 2, step * k));\n for (let i = 0; i < beatTimes.length; i++) {\n if (ecIdxs.has(i)) {\n const early = beatTimes[i] - interval * rand(0.25, 0.4);\n const wide = spec.ectopicSubtype === \"ventricular\" || !!spec.wide;\n events.push({\n qrsCenter: early,\n pCenter: spec.ectopicSubtype === \"atrial\" ? early - 100 : undefined,\n wide,\n amp: wide ? rand(0.85, 1.25) : 0.95,\n });\n for (let j = i + 1; j < beatTimes.length; j++) beatTimes[j] += interval * 0.3;\n } else {\n events.push({ qrsCenter: beatTimes[i], pCenter: beatTimes[i] - 150, wide: false, amp: 1 });\n }\n }\n break;\n }\n case \"patternedEctopy\": {\n const rate = rand(spec.baseRateMin ?? 60, spec.baseRateMax ?? 90);\n const interval = rr(rate);\n const unit = spec.unit ?? 2;\n let t = rand(150, 400);\n let i = 0;\n while (t < DURATION - 150) {\n const isEctopic = i % unit === unit - 1;\n if (isEctopic) {\n const wide = spec.ectopicSubtype === \"ventricular\" || !!spec.wide;\n events.push({\n qrsCenter: t,\n pCenter: spec.ectopicSubtype === \"atrial\" ? t - 100 : undefined,\n wide,\n amp: wide ? 1.15 : 0.95,\n });\n } else {\n events.push({ qrsCenter: t, pCenter: t - 150, wide: false, amp: 1 });\n }\n i++;\n t += interval;\n }\n break;\n }\n case \"burstEctopy\": {\n const rate = rand(spec.baseRateMin ?? 60, spec.baseRateMax ?? 90);\n const interval = rr(rate);\n let t = rand(150, 400);\n const mid = DURATION / 2;\n let burstDone = false;\n while (t < DURATION - 150) {\n if (!burstDone && t > mid) {\n const burst = spec.burstLength ?? 2;\n const burstRate = rand(spec.burstRateMin ?? 150, spec.burstRateMax ?? 200);\n const burstInterval = rr(burstRate);\n let bt = t;\n for (let b = 0; b < burst; b++) {\n events.push({ qrsCenter: bt, wide: true, amp: 1.15 });\n bt += burstInterval;\n }\n t = bt + interval * 0.5;\n burstDone = true;\n continue;\n }\n events.push({ qrsCenter: t, pCenter: t - 150, wide: false, amp: 1 });\n t += interval;\n }\n break;\n }\n case \"parasystole\": {\n const sinusRate = rand(60, 90);\n let t = rand(150, 400);\n while (t < DURATION - 150) {\n events.push({ qrsCenter: t, pCenter: t - 150, wide: false, amp: 1 });\n t += rr(sinusRate) * rand(0.97, 1.03);\n }\n const paraRate = rand(30, 50);\n let pt = rand(300, 900);\n while (pt < DURATION - 150) {\n events.push({ qrsCenter: pt, wide: true, amp: 1.1 });\n pt += rr(paraRate);\n }\n break;\n }\n case \"tachyBrady\": {\n const slowRate = rand(35, 50);\n let t = rand(150, 400);\n while (t < DURATION * 0.35) {\n events.push({ qrsCenter: t, pCenter: t - 160, wide: false, amp: 1 });\n t += rr(slowRate);\n }\n while (t < DURATION * 0.75) {\n events.push({ qrsCenter: t, wide: false, amp: 0.95 });\n t += rr(rand(100, 160)) * rand(0.7, 1.3);\n }\n while (t < DURATION - 150) {\n events.push({ qrsCenter: t, pCenter: t - 160, wide: false, amp: 1 });\n t += rr(slowRate);\n }\n break;\n }\n case \"failToCapture\": {\n const rate = rand(spec.rateMin ?? 60, spec.rateMax ?? 70);\n const interval = rr(rate);\n let t = rand(150, 400);\n let i = 0;\n while (t < DURATION - 150) {\n const failed = i % 5 === 4;\n if (failed) {\n events.push({ spikeCenter: t });\n } else {\n events.push({ qrsCenter: t, pacedSpike: true, wide: false, amp: 1 });\n }\n i++;\n t += interval;\n }\n break;\n }\n case \"failToSense\": {\n const rate = rand(spec.rateMin ?? 60, spec.rateMax ?? 90);\n let t = rand(150, 400);\n while (t < DURATION - 150) {\n events.push({ qrsCenter: t, pCenter: t - 150, wide: false, amp: 1 });\n t += rr(rate);\n }\n const deviceRate = rand(65, 75);\n let st = rand(100, 300);\n while (st < DURATION - 100) {\n events.push({ spikeCenter: st });\n st += rr(deviceRate);\n }\n break;\n }\n case \"idioventricularCapture\": {\n const rate = rand(spec.rateMin ?? 20, spec.rateMax ?? 40);\n const interval = rr(rate);\n const beatTimes: number[] = [];\n let t = rand(150, 400);\n while (t < DURATION - 150) {\n beatTimes.push(t);\n t += interval;\n }\n const capIdx = Math.min(beatTimes.length - 2, Math.max(1, Math.floor(beatTimes.length / 2)));\n for (let i = 0; i < beatTimes.length; i++) {\n const capture = i === capIdx;\n events.push({\n qrsCenter: beatTimes[i],\n pCenter: capture ? beatTimes[i] - 150 : undefined,\n wide: !capture,\n amp: capture ? 1 : 1.1,\n });\n }\n break;\n }\n case \"afib\": {\n let t = rand(100, 300);\n while (t < DURATION - 150) {\n events.push({ qrsCenter: t, wide: false, amp: 0.95 });\n t += rr(rand(spec.rateMin ?? 70, spec.rateMax ?? 150)) * rand(0.7, 1.3);\n }\n break;\n }\n case \"aflutter\": {\n const ratios = spec.ratios ?? [2, 3, 4];\n const ratio = ratios[Math.floor(Math.random() * ratios.length)];\n const atrialRate = spec.atrialRate ?? 300;\n const period = rr(atrialRate);\n let t = rand(50, 150);\n let count = 0;\n while (t < DURATION - 100) {\n if (count % ratio === 0) events.push({ qrsCenter: t, wide: false, amp: 0.9 });\n t += period;\n count++;\n }\n break;\n }\n case \"wenckebach\": {\n const rate = rand(spec.rateMin ?? 60, spec.rateMax ?? 90);\n const pInterval = rr(rate);\n const startPr = spec.startPrMs ?? 160;\n const inc = spec.prIncrementMs ?? 40;\n const cycle = spec.cycleBeats ?? 4;\n let t = rand(150, 300);\n let pr = startPr;\n let beatInCycle = 0;\n while (t < DURATION - 150) {\n const dropped = beatInCycle === cycle - 1;\n if (dropped) {\n events.push({ pCenter: t });\n pr = startPr;\n } else {\n events.push({ pCenter: t, qrsCenter: t + pr, wide: false, amp: 1 });\n pr += inc;\n }\n beatInCycle = (beatInCycle + 1) % cycle;\n t += pInterval;\n }\n break;\n }\n case \"type2block\": {\n const rate = rand(spec.rateMin ?? 60, spec.rateMax ?? 90);\n const pInterval = rr(rate);\n const pr = spec.prMs ?? 180;\n const dropEvery = spec.dropEvery ?? 4;\n let t = rand(150, 300);\n let i = 0;\n while (t < DURATION - 150) {\n const dropped = i % dropEvery === dropEvery - 1;\n events.push({ pCenter: t, qrsCenter: dropped ? undefined : t + pr, wide: spec.wide, amp: 1 });\n t += pInterval;\n i++;\n }\n break;\n }\n case \"thirdDegree\": {\n const aRate = rand(spec.atrialRateMin ?? 70, spec.atrialRateMax ?? 100);\n const vRate = rand(spec.ventricularRateMin ?? 30, spec.ventricularRateMax ?? 50);\n let pt = rand(50, 200);\n while (pt < DURATION - 100) {\n events.push({ pCenter: pt });\n pt += rr(aRate);\n }\n let qt = rand(50, 200);\n while (qt < DURATION - 100) {\n events.push({ qrsCenter: qt, wide: spec.wide, amp: 1 });\n qt += rr(vRate);\n }\n break;\n }\n case \"torsades\": {\n const rate = rand(spec.rateMin ?? 150, spec.rateMax ?? 220);\n let t = rand(100, 300);\n let i = 0;\n while (t < DURATION - 150) {\n const amp = 0.55 + 0.55 * Math.sin(i * 0.9);\n events.push({ qrsCenter: t, wide: true, amp: Math.max(0.25, Math.abs(amp)) * (amp < 0 ? -1 : 1) });\n t += rr(rate) * rand(0.75, 1.25);\n i++;\n }\n break;\n }\n }\n return events;\n}\n\nexport interface GeneratedStrip {\n samples: number[];\n dt: number;\n duration: number;\n}\n\nexport function generateStrip(spec: WaveformSpec): GeneratedStrip {\n const samples = new Array(N).fill(0);\n\n if (spec.pattern === \"chaotic\") {\n const freqs = [rand(4, 6), rand(6, 8), rand(8, 11), rand(3, 5)];\n const phases = freqs.map(() => rand(0, Math.PI * 2));\n for (let i = 0; i < N; i++) {\n const t = (i * DT) / 1000;\n let v = 0;\n freqs.forEach((f, idx) => v += Math.sin(2 * Math.PI * f * t + phases[idx]));\n v = v / freqs.length;\n v *= 0.5 + 0.3 * Math.sin(t * 1.3 + 1);\n samples[i] = v + (Math.random() - 0.5) * 0.15;\n }\n return { samples, dt: DT, duration: DURATION };\n }\n\n if (spec.pattern === \"flatline\") {\n for (let i = 0; i < N; i++) samples[i] = (Math.random() - 0.5) * 0.03;\n if (Math.random() < 0.3) {\n let t = rand(500, 1500);\n while (t < DURATION - 500) {\n for (let i = 0; i < N; i++) samples[i] += pWaveAt(i * DT, t);\n t += rand(1500, 3000);\n }\n }\n return { samples, dt: DT, duration: DURATION };\n }\n\n const events = buildEvents(spec);\n for (let i = 0; i < N; i++) {\n const t = i * DT;\n let v = 0;\n for (const ev of events) {\n if (ev.pCenter != null) v += pWaveAt(t, ev.pCenter, ev.pAmp ?? 1);\n if (ev.qrsCenter != null) {\n v += qrsAndT(t, ev.qrsCenter, !!ev.wide, ev.amp ?? 1, !!ev.delta, !!ev.pacedSpike, spec);\n }\n if (ev.spikeCenter != null) v += 0.9 * gauss(t, ev.spikeCenter, 1.5);\n }\n v += (Math.random() - 0.5) * 0.02;\n if (spec.interference) v += 0.05 * Math.sin(2 * Math.PI * 22 * (t / 1000));\n samples[i] = v * (spec.ampScale ?? 1);\n }\n\n if (spec.pattern === \"aflutter\") {\n const atrialRate = spec.atrialRate ?? 300;\n const period = rr(atrialRate);\n for (let i = 0; i < N; i++) samples[i] += 0.16 * sawtooth(i * DT, period) * (spec.ampScale ?? 1);\n }\n\n return { samples, dt: DT, duration: DURATION };\n}\n","deleted",false,"label",[57,58,35],"frontend","lib",{"_33":240,"_13":241,"_36":242,"_38":-5,"_40":41,"_42":48,"_44":45,"_46":243,"_17":80,"_49":94,"_51":-5,"_53":54,"_55":-5,"_72":244,"_18":245},{"_33":91,"_13":57,"_36":92,"_38":-5,"_40":41,"_42":78,"_44":45,"_46":93,"_17":80,"_49":94,"_51":-5,"_53":54,"_55":-5,"_72":95,"_18":96},{"_33":84,"_13":85,"_36":86,"_38":-5,"_40":41,"_42":78,"_44":45,"_46":87,"_17":80,"_49":24,"_51":88,"_53":54,"_55":-5,"_72":89,"_18":90},{"_33":75,"_13":76,"_36":77,"_38":-5,"_40":41,"_42":78,"_44":45,"_46":79,"_17":80,"_49":24,"_51":81,"_53":54,"_55":-5,"_72":82,"_18":83},{"_33":64,"_13":65,"_36":66,"_38":-5,"_40":41,"_42":67,"_44":45,"_46":68,"_17":69,"_49":70,"_51":71,"_53":54,"_55":-5,"_72":73,"_18":74},"c8981a8a-0dce-4c7c-b2d8-ccf1d1437db7","index.ts","01a0633c-efa7-770e-92de-fcbd716f9193",38,["D",1788376361503],4,"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\nimport { RHYTHMS } from \"./backend/rhythms-data.ts\";\nimport { TWELVE_LEAD_CASES } from \"./backend/twelve-lead-data.ts\";\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// List all rhythms (summary only — no questions in the payload).\n// Every rhythm is unlocked content-wise; the free/Pro split is now a daily\n// practice cap enforced client-side, not a content paywall.\napp.get(\"/api/rhythms\", (c) => {\n const list = [...RHYTHMS]\n .sort((a, b) => a.sortOrder - b.sortOrder)\n .map(({ questions, ...summary }) => ({\n ...summary,\n locked: false,\n questionCount: questions.length,\n }));\n return c.json(list);\n});\n\n// Single rhythm detail — full content, including quiz questions, for everyone.\napp.get(\"/api/rhythms/:id\", (c) => {\n const rhythm = RHYTHMS.find((r) => r.id === c.req.param(\"id\"));\n if (!rhythm) return c.json({ error: \"not found\" }, 404);\n return c.json({\n ...rhythm,\n locked: false,\n });\n});\n\n// List all 12-lead cases (summary only — leadFindings + questions omitted).\napp.get(\"/api/twelve-lead\", (c) => {\n const list = [...TWELVE_LEAD_CASES]\n .sort((a, b) => a.sortOrder - b.sortOrder)\n .map(({ leadFindings, questions, ...summary }) => ({\n ...summary,\n questionCount: questions.length,\n }));\n return c.json(list);\n});\n\n// Single 12-lead case detail — full content, including per-lead findings and quiz questions.\napp.get(\"/api/twelve-lead/:id\", (c) => {\n const twelveLead = TWELVE_LEAD_CASES.find((t) => t.id === c.req.param(\"id\"));\n if (!twelveLead) return c.json({ error: \"not found\" }, 404);\n return c.json(twelveLead);\n});\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",[],[65],"f174df99-6739-437c-b218-528fe54153d7","README.md","01a0633c-efa7-770e-92de-f8c87a88692d",1,["D",1788371332863],0,"# 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",[],[76],"4d03780d-716e-4f3b-9cdf-f3d72852a379","CHANGELOG.md","01a0633c-efa7-770e-92de-f742abd282c5",["D",1788371332863],"# 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