[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_257":258,"_259":260},"routes/_app.x.$handle.$name",{"_125":124,"_35":70,"_134":115,"_30":135,"_13":14,"_136":-5,"_11":137,"_138":139,"_140":141,"_142":143,"_144":145,"_23":-5,"_146":-5,"_147":-5,"_148":28,"_149":150,"_151":62,"_152":-5,"_153":-5,"_154":155},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_68":69,"_35":70,"_41":71,"_72":-5,"_73":28,"_74":75,"_76":75,"_77":78,"_79":80,"_18":81,"_82":34,"_83":62,"_84":-5,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":96,"_97":-5,"_98":99,"_100":99,"_101":102,"_103":102,"_104":102,"_105":99,"_106":99,"_107":108,"_109":110,"_111":112,"_113":28},"version",90,"changes",[19,20,21,22],"aiChatInfo","userId",{"_23":60,"_25":61,"_27":62,"_29":62,"_30":63,"_32":63},{"_23":53,"_25":-7,"_27":28,"_29":28,"_30":54,"_32":54},{"_23":46,"_25":47,"_27":28,"_29":28,"_30":48,"_32":48},{"_23":24,"_25":26,"_27":28,"_29":28,"_30":31,"_32":31},"file",{"_33":34,"_35":31,"_36":37,"_38":40,"_41":42,"_43":14,"_44":45,"_27":28},"previous",{"_33":34,"_35":31,"_36":37,"_38":39},"deleted",false,"deletedHere","path","index.ts","latestPath","fileId","a9b2b20a-f528-11ef-9e98-569c3dd06744","name","fileType","http","content","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(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","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","createdAt",["D",1785420225757],"branchVersion","branchId","961078ea-f528-11ef-aa68-569c3dd06744",{"_33":49,"_35":48,"_36":23,"_38":51,"_41":52,"_43":14,"_44":45,"_27":28},{"_33":49,"_35":48,"_36":23,"_38":50},"README.md","a50c3760-f53e-11ef-bd6d-569c3dd06744","# 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[\"index.html\"]\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 index.html ← HTML shell (loads Twind + React)\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/index.html`** loads Twind and the 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","# 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",["D",1785420225757],{"_33":55,"_35":56,"_36":57,"_38":58,"_41":59,"_43":14,"_44":45,"_27":28},"frontend/root.tsx","7ad38466-8c1f-11f1-a4b9-1607ee4eb77e","root.tsx","script","/** @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(\"\")}\n \n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",["D",1785420225757],"id","96102714-f528-11ef-aa68-569c3dd06744","react-hono-starter",["D",1740674013689],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789552799&sig=b32577280eb127e4de2b63a06a7bd0de022303ec239a56e6599056e91939e4de","c9143560-63b6-444f-8f9f-e2647fabe09f","pinnedFileId","pinPreview","pinMigrated","screenshotVersion",39,"likeCount",16,"orgId","019aa807-52c2-709c-928b-2029bae9a558","tursoName","96102714f52811efaa68569c3dd06744","tursoHostname","96102714f52811efaa68569c3dd06744-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789501878689],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_125":124,"_133":129},"org",{"_125":124,"_126":127,"_128":129,"_18":-5,"_130":131,"_132":62},"branch",{"_13":114,"_35":115,"_68":45,"_116":69,"_117":-5,"_118":-5,"_119":-5,"_120":-5,"_121":-5,"_122":70,"_123":124},"isOwned",91,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","templates","handle","displayName","Templates","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789552799&sig=d49f90d93e120483cdf15d03d3545ffc812712f79bb9ed726650e50aa3216f06","tier","business","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_68":69,"_35":70,"_41":252,"_72":-5,"_73":28,"_74":75,"_76":75,"_77":78,"_79":80,"_18":81,"_82":34,"_83":62,"_84":-5,"_85":86,"_87":88,"_89":90,"_91":92,"_93":94,"_95":253,"_97":-5,"_98":99,"_100":99,"_101":102,"_103":102,"_104":102,"_105":99,"_106":99,"_107":254,"_109":255,"_111":256,"_113":28},"tree",[190,197,198],"files",[190,191,192,193,194,195,196,197,198],"counts",{"_177":178,"_179":174,"_180":181,"_182":183,"_184":185},"contents",[156,157,158],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_68":169,"_35":170,"_33":171,"_160":-5,"_44":45,"_43":172,"_161":62,"_41":173,"_13":174,"_36":175,"_38":-5,"_27":28,"_163":-5,"_30":176},{"_68":165,"_35":48,"_33":49,"_160":-5,"_44":45,"_43":14,"_161":28,"_41":166,"_13":167,"_36":23,"_38":51,"_27":28,"_163":-5,"_30":168},{"_68":159,"_35":31,"_33":34,"_160":-5,"_44":45,"_43":14,"_161":62,"_41":162,"_13":88,"_36":37,"_38":40,"_27":28,"_163":-5,"_30":164},"8a5047ea-c8ab-4ac6-ad08-5b9f0167515f","parentId","latest",["D",1785420225757],"label",[31],"1a6a94a0-8c40-4747-a7ca-03f55fb30a43",["D",1785420225757],32,[48],"4eb6622c-f52b-11ef-ad72-569c3dd06744","frontend","a59cbf44-f528-11ef-ae42-569c3dd06744",8,["D",1740675182468],1,"directory",[170],"pulls",3,"branches","forks",357,"envVars",{"_186":187,"_189":187},"connections",{"_186":187,"_188":187},"count",0,"unfilledCount","emptyCount",{"_68":169,"_35":170,"_33":171,"_160":-5,"_44":45,"_43":172,"_161":62,"_41":249,"_13":174,"_36":175,"_38":-5,"_27":28,"_163":-5,"_200":250,"_30":251},{"_68":245,"_35":235,"_33":229,"_160":171,"_44":45,"_43":88,"_161":62,"_41":246,"_13":174,"_36":175,"_38":-5,"_27":28,"_163":-5,"_200":247,"_30":248},{"_68":236,"_35":237,"_33":238,"_160":229,"_44":45,"_43":239,"_161":62,"_41":240,"_13":241,"_36":57,"_38":242,"_27":28,"_163":-5,"_200":243,"_30":244},{"_68":226,"_35":227,"_33":228,"_160":229,"_44":45,"_43":230,"_161":62,"_41":231,"_13":187,"_36":57,"_38":232,"_27":28,"_163":-5,"_200":233,"_30":234},{"_68":218,"_35":219,"_33":220,"_160":171,"_44":45,"_43":221,"_161":62,"_41":222,"_13":174,"_36":23,"_38":223,"_27":28,"_163":-5,"_200":224,"_30":225},{"_68":210,"_35":211,"_33":212,"_160":171,"_44":45,"_43":213,"_161":62,"_41":214,"_13":178,"_36":57,"_38":215,"_27":28,"_163":-5,"_200":216,"_30":217},{"_68":206,"_35":56,"_33":55,"_160":171,"_44":45,"_43":14,"_161":62,"_41":207,"_13":187,"_36":57,"_38":58,"_27":28,"_163":-5,"_200":208,"_30":209},{"_68":165,"_35":48,"_33":49,"_160":-5,"_44":45,"_43":14,"_161":28,"_41":203,"_13":167,"_36":23,"_38":51,"_27":28,"_163":-5,"_200":204,"_30":205},{"_68":159,"_35":31,"_33":34,"_160":-5,"_44":45,"_43":14,"_161":62,"_41":199,"_13":88,"_36":37,"_38":40,"_27":28,"_163":-5,"_200":201,"_30":202},["D",1785420225757],"children",[],[31],["D",1785420225757],[],[48],"eb717f04-163b-4728-a433-455201a3881a",["D",1785420225757],[],[170,56],"37ad4e0c-f53e-11ef-940f-569c3dd06744","index.tsx","5b1c65b6-f52b-11ef-bc72-569c3dd06744",24,["D",1740683304259],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[170,211],"82a730d4-3261-11f0-aa46-569c3dd06744","favicon.svg","6f196b86-3261-11f0-9a3d-569c3dd06744",45,["D",1747405483360],"\n",[],[170,219],"57a8cc52-3996-11f1-8db6-42b51c65c3df","Counter.tsx","57a8cd2e-3996-11f1-8db6-42b51c65c3df","69ed66bc-f52b-11ef-9dac-569c3dd06744",73,["D",1776345330366],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\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",[],[170,235,227],"components","5d7e5e30-3996-11f1-bbdd-42b51c65c3df","App.tsx","6e585892-f52b-11ef-a8e1-569c3dd06744",75,["D",1776345339930],5,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Counter } from \"./Counter.tsx\";\n\nexport function App() {\n return (\n

React + Hono Starter

\n \n

\n View source\n

\n );\n}\n",[],[170,235,237],"6c91a0e0-f52b-11ef-88f4-569c3dd06744",["D",1740675232558],[192,193],[170,235],["D",1740675182468],[191,194,195,196],[170],["D",1740674013689],["D",1789501878689],{"_125":124,"_133":129},{"_125":124,"_126":127,"_128":129,"_18":-5,"_130":131,"_132":62},{"_13":114,"_35":115,"_68":45,"_116":69,"_117":-5,"_118":-5,"_119":-5,"_120":-5,"_121":-5,"_122":70,"_123":124},"ctx",{"_107":-5,"_153":290,"_291":292,"_293":294,"_295":28,"_296":28,"_297":28,"_298":62,"_299":-5,"_300":-7,"_301":-7,"_302":187,"_303":28,"_304":28,"_305":-5,"_306":28,"_307":28,"_308":28,"_309":-5},"ENV",{"_261":262,"_263":264,"_265":115,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v90