`, 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",{"_308":309,"_310":311},"routes/_app.x.$handle.$name",{"_106":105,"_32":51,"_115":96,"_27":116,"_13":14,"_117":-5,"_11":118,"_119":120,"_121":122,"_123":124,"_125":126,"_21":-5,"_127":-5,"_128":-5,"_129":25,"_130":131,"_132":65,"_133":-5,"_134":-5,"_135":136},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_49":50,"_32":51,"_37":52,"_53":-5,"_54":25,"_55":56,"_57":56,"_58":59,"_60":-5,"_18":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":89,"_90":91,"_92":93,"_94":25},"version",12,"changes",[19,20],"aiChatInfo","userId",{"_21":42,"_23":-7,"_24":25,"_26":25,"_27":43,"_29":43},{"_21":22,"_23":-7,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":-5,"_37":38,"_39":14,"_40":41,"_24":25},"previous","deleted",false,"deletedHere","path","frontend/lib","latestPath","fileId","4251605e-0e73-4cbd-82d5-1cb5438d42e3","name","lib","fileType","directory","content","createdAt",["D",1788372388021],"branchVersion","branchId","7029bff5-bb8a-442e-a4f2-805f0156bd56",{"_30":44,"_32":45,"_34":46,"_36":47,"_37":48,"_39":14,"_40":41,"_24":25},"frontend/lib/waveform.ts","04a856e6-a6f9-11f1-8cc4-1607ee4eb77e","waveform.ts","script","// 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) {\n return 0.15 * gauss(t, center, 26);\n}\n\nfunction qrsAndT(t: number, center: number, wide: boolean, amp: number) {\n const sigma = wide ? 16 : 9;\n let v = -0.15 * amp * 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 const tc = center + (wide ? 260 : 210);\n v += 0.28 * amp * gauss(t, tc, 65);\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 wide?: boolean;\n amp?: number;\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 let t = rand(150, 400);\n while (t < DURATION - 150) {\n events.push({\n qrsCenter: t,\n pCenter: spec.hasPWave ? t - (spec.prMs ?? 150) : undefined,\n wide: spec.wide,\n amp: 1,\n });\n t += interval * rand(0.97, 1.03);\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 ecIdx = 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 === ecIdx) {\n const early = beatTimes[i] - interval * rand(0.25, 0.4);\n const wide = spec.ectopicSubtype === \"ventricular\";\n events.push({\n qrsCenter: early,\n pCenter: spec.ectopicSubtype === \"atrial\" ? early - 100 : undefined,\n wide,\n amp: wide ? 1.15 : 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 \"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);\n if (ev.qrsCenter != null) v += qrsAndT(t, ev.qrsCenter, !!ev.wide, ev.amp ?? 1);\n }\n v += (Math.random() - 0.5) * 0.02;\n samples[i] = v;\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);\n }\n\n return { samples, dt: DT, duration: DURATION };\n}\n",["D",1788372388021],"id","4a26e4ff-5701-4f0e-a2d1-9b438dea196d","ekg-rhythm-practice",["D",1788371332863],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","EKG rhythm interpretation practice app for nursing/EMS students","imageUrl","f88a0ee3-b2a2-4b50-b1cd-d6ef9333f8b4","pinnedFileId","01a0633c-efa7-770e-92de-fcbd716f9193","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a0633a-cac3-709b-a980-c6cbc53d1693","tursoName","4a26e4ff57014f0ea2d19b438dea196d","tursoHostname","4a26e4ff57014f0ea2d19b438dea196d-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789500689328],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_106":105,"_114":110},"org",{"_106":105,"_107":108,"_109":110,"_18":61,"_111":112,"_113":25},"branch",{"_13":95,"_32":96,"_49":41,"_97":50,"_98":-5,"_99":-5,"_100":-5,"_101":-5,"_102":-5,"_103":51,"_104":105},"isOwned",55,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dusty_medic","handle","displayName","Peter Sulzinski","avatar","https://lh3.googleusercontent.com/a/ACg8ocKxS7SIQL-2xeZae3OPJraIhveBUDOK84i99c574FL5C5flzw=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_49":50,"_32":51,"_37":303,"_53":-5,"_54":25,"_55":56,"_57":56,"_58":59,"_60":-5,"_18":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":304,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":305,"_90":306,"_92":307,"_94":25},"tree",[186,188,200,201,202],"files",[186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202],"counts",{"_176":69,"_177":148,"_178":69,"_179":180,"_181":182},"contents",[137,138,139,140,141],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_49":170,"_32":171,"_30":172,"_144":-5,"_40":41,"_39":173,"_146":65,"_37":174,"_13":69,"_34":35,"_36":-5,"_24":25,"_151":-5,"_27":175},{"_49":165,"_32":166,"_30":167,"_144":-5,"_40":41,"_39":148,"_146":65,"_37":168,"_13":69,"_34":35,"_36":-5,"_24":25,"_151":-5,"_27":169},{"_49":159,"_32":160,"_30":161,"_144":-5,"_40":41,"_39":148,"_146":65,"_37":162,"_13":69,"_34":21,"_36":163,"_24":25,"_151":-5,"_27":164},{"_49":153,"_32":154,"_30":155,"_144":-5,"_40":41,"_39":148,"_146":65,"_37":156,"_13":69,"_34":21,"_36":157,"_24":25,"_151":-5,"_27":158},{"_49":142,"_32":143,"_30":63,"_144":-5,"_40":41,"_39":145,"_146":25,"_37":147,"_13":148,"_34":149,"_36":150,"_24":25,"_151":-5,"_27":152},"2a3bb751-e5fe-4f8c-83a9-856f8f9551e0","index.ts","parentId",3,"latest",["D",1788371714109],1,"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\";\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)\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: !summary.free,\n questionCount: questions.length,\n }));\n return c.json(list);\n});\n\n// Single rhythm detail. Questions are only included for free rhythms —\n// Pro-gated rhythms return everything except the quiz content itself.\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 const locked = !rhythm.free;\n return c.json({\n ...rhythm,\n locked,\n questions: locked ? [] : rhythm.questions,\n });\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","label",[143],"f174df99-6739-437c-b218-528fe54153d7","README.md","01a0633c-efa7-770e-92de-f8c87a88692d",["D",1788371332863],"# 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",[154],"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

Diff · v12