\n \n \n \n\n",[115,107],"ebb5c0f259055220b4c2c09115e4c316079cc5cc2635caa85a052b0799b64161","frontend","5c059140-3996-11f1-a04c-42b51c65c3df","5404b440-f52b-11ef-99f0-569c3dd06744","a59cbf44-f528-11ef-ae42-569c3dd06744",74,["D",1776345337676],8,"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[115,107],"1ea8b3da4e18d579298229ba24af91b14b14ae02565f57c996f9acaa1f8333bc",["D",1784223741615],"legacyEnvVars","httpPrivacy","description","Team health dashboard: Jira metrics, Git stats, proxy APIs","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789570799&sig=24cffcb7bd8cb9561eafd0c4bc1b91e4c7a662500ce58f0f64f2f4c551be4a2c","userId","bbf33ae7-e200-4c99-935c-67e5cae7bd40","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"019f6600-f32e-7609-9b14-e58fc34e9f44","tursoName","0d98787a89de45c1a3991a4bda4fe365","tursoHostname","0d98787a89de45c1a3991a4bda4fe365-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789559472742],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_169":165},"org",{"_11":12,"_162":163,"_164":165,"_132":133,"_166":167,"_168":47},"branch","displayName","Nick S.","avatar","https://avatars.githubusercontent.com/u/1014995?v=4","tier","free","canRestrictVals","profileImageUrl","","adoptOrgId",{"_31":58,"_13":14,"_33":277,"_45":-5,"_126":47,"_48":49,"_127":49,"_128":129,"_130":131,"_132":133,"_134":79,"_135":25,"_136":-5,"_137":-5,"_138":139,"_52":140,"_141":142,"_143":144,"_145":278,"_147":-5,"_148":149,"_150":149,"_151":152,"_153":152,"_154":152,"_155":149,"_156":149,"_157":279,"_159":280,"_161":281,"_46":47},"tree",[223,230,231],"files",[223,224,225,226,227,228,229,230,231],"counts",{"_213":139,"_214":85,"_215":139,"_216":217,"_218":219},"contents",[198,199,200],"upstreamProject",{"_31":38,"_13":55,"_128":195,"_130":131,"_48":49,"_157":196},"upstreamBranch",{"_31":32,"_33":193,"_35":194,"_13":16,"_37":38,"_39":40,"_41":-5,"_42":-5,"_43":44,"_45":-5,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],"Starter template with client-side React & Hono server",{"_11":51,"_169":197},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789570799&sig=257a5acfa0921f3bba1b6e04c40af81b331d69d65dd78c28728d8fa984364db5",{"_31":209,"_13":115,"_78":109,"_80":-5,"_81":57,"_82":85,"_83":25,"_33":210,"_39":139,"_86":211,"_88":-5,"_65":47,"_90":-5,"_71":212},{"_31":203,"_13":204,"_78":205,"_80":-5,"_81":57,"_82":85,"_83":25,"_33":206,"_39":139,"_86":111,"_88":207,"_65":47,"_90":-5,"_71":208},{"_31":77,"_13":72,"_78":79,"_80":-5,"_81":57,"_82":20,"_83":25,"_33":201,"_39":85,"_86":87,"_88":89,"_65":47,"_90":-5,"_71":202},["D",1784223858250],[72],"9887fe4a-4a2e-44f9-9cbb-cb6ea98cddb2","README.md","019f6c05-b71e-7278-a87c-3ae2488ab789",["D",1784223741615],"# 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",[204],"47de07a7-ff83-49e5-8204-35a017f4cd64",["D",1784223741615],"directory",[115],"pulls","branches","forks","envVars",{"_220":139,"_222":139},"connections",{"_220":139,"_221":139},"count","unfilledCount","emptyCount",{"_31":209,"_13":115,"_78":109,"_80":-5,"_81":57,"_82":85,"_83":25,"_33":274,"_39":139,"_86":211,"_88":-5,"_65":47,"_90":-5,"_91":275,"_71":276},{"_31":270,"_13":262,"_78":257,"_80":109,"_81":57,"_82":85,"_83":25,"_33":271,"_39":139,"_86":211,"_88":-5,"_65":47,"_90":-5,"_91":272,"_71":273},{"_31":263,"_13":264,"_78":265,"_80":257,"_81":57,"_82":85,"_83":25,"_33":266,"_39":139,"_86":241,"_88":267,"_65":47,"_90":-5,"_91":268,"_71":269},{"_31":254,"_13":255,"_78":256,"_80":257,"_81":57,"_82":85,"_83":25,"_33":258,"_39":139,"_86":241,"_88":259,"_65":47,"_90":-5,"_91":260,"_71":261},{"_31":247,"_13":248,"_78":249,"_80":109,"_81":57,"_82":85,"_83":25,"_33":250,"_39":139,"_86":111,"_88":251,"_65":47,"_90":-5,"_91":252,"_71":253},{"_31":106,"_13":107,"_78":108,"_80":109,"_81":57,"_82":56,"_83":25,"_33":110,"_39":85,"_86":111,"_88":112,"_65":47,"_90":-5,"_91":245,"_71":246},{"_31":237,"_13":238,"_78":239,"_80":109,"_81":57,"_82":85,"_83":25,"_33":240,"_39":139,"_86":241,"_88":242,"_65":47,"_90":-5,"_91":243,"_71":244},{"_31":203,"_13":204,"_78":205,"_80":-5,"_81":57,"_82":85,"_83":25,"_33":234,"_39":139,"_86":111,"_88":207,"_65":47,"_90":-5,"_91":235,"_71":236},{"_31":77,"_13":72,"_78":79,"_80":-5,"_81":57,"_82":20,"_83":25,"_33":84,"_39":85,"_86":87,"_88":89,"_65":47,"_90":-5,"_91":232,"_71":233},[],[72],["D",1784223741615],[],[204],"6b29af81-f215-4ac5-92e0-358970fdc9b9","index.tsx","019f6c05-b71e-7278-a87c-33e2690f4ab5",["D",1784223741615],"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();",[],[115,238],[],[115,107],"2ad15a7f-9382-4b91-ad82-8ae327cab34b","favicon.svg","019f6c05-b71e-7278-a87c-29b4a163e4fa",["D",1784223741615],"\n",[],[115,248],"7d3308de-1800-4074-b707-796fc75e7200","Counter.tsx","019f6c05-b71e-7278-a87c-221a2073f08b","019f6c05-b71e-7278-a87c-25bfe4ef1588",["D",1784223741615],"/** @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",[],[115,262,255],"components","220b1c5a-b3e7-48b0-909e-62f23ba33378","App.tsx","019f6c05-b71e-7278-a87c-1d658af892ff",["D",1784223741615],"/** @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",[],[115,262,264],"53e6efac-c58b-4a21-80a5-707bb9e66559",["D",1784223741615],[225,226],[115,262],["D",1784223741615],[224,227,228,229],[115],["D",1784223741615],["D",1789559472742],{"_11":12,"_169":165},{"_11":12,"_162":163,"_164":165,"_132":133,"_166":167,"_168":47},{"_39":56,"_13":16,"_31":57,"_37":58,"_41":32,"_42":59,"_60":49,"_61":38,"_62":53,"_54":14,"_50":12},"ctx",{"_157":-5,"_190":315,"_316":317,"_318":319,"_320":47,"_321":47,"_322":47,"_323":25,"_324":-5,"_325":-7,"_326":-7,"_327":139,"_328":47,"_329":47,"_330":-5,"_331":47,"_332":47,"_333":47,"_334":-5},"ENV",{"_286":287,"_288":289,"_290":16,"_291":292,"_293":294,"_295":296,"_297":298,"_299":300,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314},"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"]

Compare

Mergensoll/mainintotemplates/main

frontend/index.html+19-6

Hindex.ts+113-12