[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_247":248,"_249":250},"routes/_app.x.$handle.$name",{"_106":105,"_38":51,"_115":92,"_33":116,"_13":14,"_117":-5,"_11":118,"_119":120,"_121":122,"_123":124,"_125":126,"_26":-5,"_127":128,"_129":130,"_131":31,"_132":133,"_134":64,"_135":-5,"_136":-5,"_137":138},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_49":50,"_38":51,"_44":52,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":59,"_60":-5,"_19":61,"_62":37,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":31},"version",2,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","7265c790-aae6-492a-a91d-36a8833a3e77","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":40,"_41":43,"_44":45,"_46":14,"_47":48,"_30":31},"previous",{"_36":37,"_38":34,"_39":40,"_41":42},"deleted",false,"deletedHere","path","index.ts","latestPath","fileId","019e440a-fc91-773d-a594-149589d1ff23","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 { readFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nexport default async function (req: Request): Promise {\n const html = await readFile(\"./index.html\");\n return new Response(html, { headers: { \"Content-Type\": \"text/html; charset=utf-8\" } });\n}","createdAt",["D",1779258205704],"branchVersion","branchId","00a3374c-5414-11f1-8a48-ee650bb23af1","id","008c8bb4-5414-11f1-8a48-ee650bb23af1","morning-startup-coffee",["D",1779258031001],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","9e73754f-780d-46b7-924e-110519305b47","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019d76ed-e14a-727a-b612-7191b6d5a9b7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_106":105,"_114":110},"org",{"_106":105,"_107":108,"_109":110,"_19":61,"_111":112,"_113":31},"branch",{"_13":91,"_38":92,"_49":48,"_93":50,"_94":95,"_96":97,"_98":56,"_99":100,"_101":102,"_103":51,"_104":105},"isOwned",3,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",88,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","jgwynne7_4bf3679b","handle","displayName","iTabs-Menu","avatar","https://avatars.githubusercontent.com/u/177847225?v=4","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_49":50,"_38":51,"_44":243,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":59,"_60":-5,"_19":61,"_62":37,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":244,"_86":245,"_88":246,"_90":31},"tree",[182,189,190],"files",[182,183,184,185,186,187,188,189,190],"counts",{"_172":68,"_173":157,"_174":68,"_175":176,"_177":178},"contents",[150,151,152],"upstreamProject",{"_49":100,"_38":146,"_58":59,"_60":147,"_55":56,"_84":148},"upstreamBranch",{"_49":95,"_44":139,"_140":141,"_38":92,"_93":100,"_13":142,"_94":-5,"_96":-5,"_143":144,"_53":-5,"_90":31,"_55":56,"_104":145,"_69":102,"_103":146},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789588127&sig=b4655f74c6d8633a45ba1577da3b1200010d80956feaab115336b2da303126e2",{"_106":145,"_114":149},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789588127&sig=5842d2db64e2045a09bc8c8c17f250c1be82212ef969787038f03f0ff20ff4e0",{"_49":166,"_38":167,"_36":168,"_154":-5,"_47":48,"_46":157,"_155":64,"_44":169,"_13":68,"_39":170,"_41":-5,"_30":31,"_158":-5,"_33":171},{"_49":160,"_38":161,"_36":162,"_154":-5,"_47":48,"_46":157,"_155":64,"_44":163,"_13":68,"_39":26,"_41":164,"_30":31,"_158":-5,"_33":165},{"_49":153,"_38":34,"_36":37,"_154":-5,"_47":48,"_46":14,"_155":64,"_44":156,"_13":157,"_39":40,"_41":43,"_30":31,"_158":-5,"_33":159},"68ac47f2-5414-11f1-94df-ee650bb23af1","parentId","latest",["D",1779258205704],1,"label",[34],"00af53a6-5414-11f1-8a48-ee650bb23af1","README.md","019e440a-fc91-773d-a594-13f75d22086e",["D",1779258031001],"# 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**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",[161],"00af51bc-5414-11f1-8a48-ee650bb23af1","frontend","019e440a-fc91-773d-a594-0cbef3c867c7",["D",1779258031001],"directory",[167],"pulls","branches","forks","envVars",{"_179":68,"_181":68},"connections",{"_179":68,"_180":68},"count","unfilledCount","emptyCount",{"_49":166,"_38":167,"_36":168,"_154":-5,"_47":48,"_46":157,"_155":64,"_44":240,"_13":68,"_39":170,"_41":-5,"_30":31,"_158":-5,"_192":241,"_33":242},{"_49":236,"_38":228,"_36":223,"_154":168,"_47":48,"_46":157,"_155":64,"_44":237,"_13":68,"_39":170,"_41":-5,"_30":31,"_158":-5,"_192":238,"_33":239},{"_49":229,"_38":230,"_36":231,"_154":223,"_47":48,"_46":157,"_155":64,"_44":232,"_13":68,"_39":202,"_41":233,"_30":31,"_158":-5,"_192":234,"_33":235},{"_49":220,"_38":221,"_36":222,"_154":223,"_47":48,"_46":157,"_155":64,"_44":224,"_13":68,"_39":202,"_41":225,"_30":31,"_158":-5,"_192":226,"_33":227},{"_49":213,"_38":214,"_36":215,"_154":168,"_47":48,"_46":157,"_155":64,"_44":216,"_13":68,"_39":26,"_41":217,"_30":31,"_158":-5,"_192":218,"_33":219},{"_49":206,"_38":207,"_36":208,"_154":168,"_47":48,"_46":157,"_155":64,"_44":209,"_13":68,"_39":26,"_41":210,"_30":31,"_158":-5,"_192":211,"_33":212},{"_49":198,"_38":199,"_36":200,"_154":168,"_47":48,"_46":157,"_155":64,"_44":201,"_13":68,"_39":202,"_41":203,"_30":31,"_158":-5,"_192":204,"_33":205},{"_49":160,"_38":161,"_36":162,"_154":-5,"_47":48,"_46":157,"_155":64,"_44":195,"_13":68,"_39":26,"_41":164,"_30":31,"_158":-5,"_192":196,"_33":197},{"_49":153,"_38":34,"_36":37,"_154":-5,"_47":48,"_46":14,"_155":64,"_44":191,"_13":157,"_39":40,"_41":43,"_30":31,"_158":-5,"_192":193,"_33":194},["D",1779258205704],"children",[],[34],["D",1779258031001],[],[161],"00af4d02-5414-11f1-8a48-ee650bb23af1","index.tsx","019e440a-fc91-773d-a594-09a9e665619a",["D",1779258031001],"script","/** @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();",[],[167,199],"00af469a-5414-11f1-8a48-ee650bb23af1","index.html","019e440a-fc91-773d-a594-049d9695ebe6",["D",1779258031001],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[167,207],"00af4172-5414-11f1-8a48-ee650bb23af1","favicon.svg","019e440a-fc91-773d-a594-00e58a22f033",["D",1779258031001],"\n",[],[167,214],"00af22a0-5414-11f1-8a48-ee650bb23af1","Counter.tsx","019e440a-fc91-773d-a593-fa966c00d0f2","019e440a-fc91-773d-a593-ffae05cc68ce",["D",1779258031001],"/** @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",[],[167,228,221],"components","00af0b9e-5414-11f1-8a48-ee650bb23af1","App.tsx","019e440a-fc91-773d-a593-f72dfbfa167f",["D",1779258031001],"/** @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",[],[167,228,230],"00af3dbc-5414-11f1-8a48-ee650bb23af1",["D",1779258031001],[184,185],[167,228],["D",1779258031001],[183,186,187,188],[167],["D",1779258031001],{"_106":105,"_114":110},{"_106":105,"_107":108,"_109":110,"_19":61,"_111":112,"_113":31},{"_13":91,"_38":92,"_49":48,"_93":50,"_94":95,"_96":97,"_98":56,"_99":100,"_101":102,"_103":51,"_104":105},"ctx",{"_84":-5,"_136":280,"_281":282,"_283":284,"_285":31,"_286":31,"_287":31,"_288":64,"_289":-5,"_290":-7,"_291":-7,"_292":68,"_293":31,"_294":31,"_295":-5,"_296":31,"_297":31,"_298":31,"_299":-5},"ENV",{"_251":252,"_253":254,"_255":92,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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 · v2