\n \n \n \n",[112,116],"1ea8b3da4e18d579298229ba24af91b14b14ae02565f57c996f9acaa1f8333bc","frontend/components/Counter.tsx",{"_32":127,"_13":128,"_81":129,"_83":130,"_84":33,"_85":131,"_87":26,"_34":132,"_40":133,"_90":108,"_92":134,"_66":48,"_94":-5,"_95":-7,"_75":135,"_97":136},"57a8cc52-3996-11f1-8db6-42b51c65c3df","Counter.tsx","57a8cd2e-3996-11f1-8db6-42b51c65c3df","69ed66bc-f52b-11ef-9dac-569c3dd06744",73,["D",1776345330366],0,"/** @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",[112,137,128],"10ce4fbd7e41af337e504c3877201698031249b437d941845f0f7cdc52a79e66","components","frontend/components/App.tsx",{"_32":140,"_13":141,"_81":142,"_83":130,"_84":33,"_85":143,"_87":26,"_34":144,"_40":145,"_90":108,"_92":146,"_66":48,"_94":-5,"_95":-7,"_75":147,"_97":148},"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",[112,137,141],"de0a7e5fc76c6fd6135aff964af1a5835e04e2758b23f3d0c7d9fabffe514df7",{"_75":150,"_77":-7,"_79":151},"main.html",{"_32":152,"_13":150,"_81":153,"_83":-5,"_84":58,"_85":57,"_87":26,"_34":154,"_40":22,"_90":91,"_92":155,"_66":48,"_94":-5,"_95":-7,"_75":156,"_97":157},"abacafb0-5d7e-11f1-ab51-1607ee4eb77e","8ae5c938-5d7e-11f1-8035-1607ee4eb77e",["D",1780293405250],"export default function(req) {\n const html = `\n\n\n \n \n The Bridge Garden Bar - Menu\n \n\n\n

The Bridge Garden Bar

Order at Counter

\n Website |\n Functions\n

\n \n

\n \n \n \n \n \n \n \n \n \n

\n \n \n

Street Eats

\n \n \n \n \n \n \n \n

\n \n \n

Main Course

\n \n \n \n \n \n \n \n \n \n \n \n

\n \n

Mains Extras

\n \n \n \n \n \n

\n \n \n

Burgers

All served with chips. GF bun +$4

\n \n \n \n \n \n \n \n \n

\n \n \n

Salads

\n \n \n \n \n \n

\n \n \n

\n \n

\n \n \n

Pizza

GF Pizza Base +$4

\n \n \n \n \n \n \n \n \n

\n \n \n

Shareables & Snacks

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n \n \n

Toppers & Sides

\n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n \n \n

Desserts

\n \n \n \n \n \n

\n \n

0 items

$0.00

\n \n

\n \n \n\n \n\n`;\n\n return new Response(html, {\n status: 200,\n headers: {\n 'Content-Type': 'text/html; charset=utf-8',\n },\n });\n}\n",[150],"631679b726c63be5e9e350149b0b6d8add341d116ccf05717b257b597c9674bf",["D",1780293175130],"legacyEnvVars","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789545599&sig=91cfcc631bd9f3dd8274549c04838d172adf2572755982193460d49bfd04bd62","userId","9e73754f-780d-46b7-924e-110519305b47","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019d76ed-e14a-727a-b612-7191b6d5a9b7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_198":194},"org",{"_11":12,"_191":192,"_193":194,"_165":166,"_195":196,"_197":48},"branch","displayName","iTabs-Menu","avatar","https://avatars.githubusercontent.com/u/177847225?v=4","tier","pro","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":59,"_13":14,"_34":278,"_46":-5,"_159":48,"_49":50,"_160":50,"_161":162,"_163":164,"_165":166,"_167":-5,"_168":48,"_169":-5,"_170":-5,"_171":133,"_53":172,"_173":-5,"_174":-5,"_175":-5,"_176":-5,"_177":178,"_179":178,"_180":181,"_182":181,"_183":181,"_184":178,"_185":178,"_186":279,"_188":280,"_190":281,"_47":48},"tree",[253,256,257],"files",[253,254,255,256,257],"counts",{"_243":133,"_244":234,"_245":133,"_246":247,"_248":249},"contents",[226,227,228],"upstreamProject",{"_32":39,"_13":56,"_161":162,"_163":164,"_49":50,"_186":224},"upstreamBranch",{"_32":33,"_34":222,"_36":223,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],{"_11":52,"_198":225},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789545599&sig=2316df07e67031dd48e537f6ce0c4c14b92716fed790ec83ecf27974cc65aa31",{"_32":238,"_13":112,"_81":239,"_83":-5,"_84":58,"_85":234,"_87":26,"_34":240,"_40":133,"_90":241,"_92":-5,"_66":48,"_94":-5,"_75":242},{"_32":231,"_13":232,"_81":233,"_83":-5,"_84":58,"_85":234,"_87":26,"_34":235,"_40":133,"_90":121,"_92":236,"_66":48,"_94":-5,"_75":237},{"_32":152,"_13":150,"_81":153,"_83":-5,"_84":58,"_85":57,"_87":26,"_34":229,"_40":22,"_90":91,"_92":155,"_66":48,"_94":-5,"_75":230},["D",1780293405250],[150],"228d6170-5d7e-11f1-afe5-1607ee4eb77e","README.md","019e81be-079c-73cc-b607-653514181d92",1,["D",1780293175130],"# 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",[232],"228d6044-5d7e-11f1-afe5-1607ee4eb77e","019e81be-079c-73cc-b607-62cf4a85f2f9",["D",1780293175130],"directory",[112],"pulls","branches","forks","envVars",{"_250":133,"_252":133},"connections",{"_250":133,"_251":133},"count","unfilledCount","emptyCount",{"_32":238,"_13":112,"_81":239,"_83":-5,"_84":58,"_85":234,"_87":26,"_34":275,"_40":133,"_90":241,"_92":-5,"_66":48,"_94":-5,"_95":276,"_75":277},{"_32":270,"_13":137,"_81":271,"_83":239,"_84":58,"_85":234,"_87":26,"_34":272,"_40":133,"_90":241,"_92":-5,"_66":48,"_94":-5,"_95":273,"_75":274},{"_32":263,"_13":264,"_81":265,"_83":239,"_84":58,"_85":234,"_87":26,"_34":266,"_40":133,"_90":121,"_92":267,"_66":48,"_94":-5,"_95":268,"_75":269},{"_32":231,"_13":232,"_81":233,"_83":-5,"_84":58,"_85":234,"_87":26,"_34":260,"_40":133,"_90":121,"_92":236,"_66":48,"_94":-5,"_95":261,"_75":262},{"_32":152,"_13":150,"_81":153,"_83":-5,"_84":58,"_85":57,"_87":26,"_34":154,"_40":22,"_90":91,"_92":155,"_66":48,"_94":-5,"_95":258,"_75":259},[],[150],["D",1780293175130],[],[232],"228d546e-5d7e-11f1-afe5-1607ee4eb77e","favicon.svg","019e81be-079c-73cc-b607-54c97f9a4d5e",["D",1780293175130],"\n",[],[112,264],"228d5310-5d7e-11f1-afe5-1607ee4eb77e","019e81be-079c-73cc-b607-53fb44fbb499",["D",1780293175130],[],[112,137],["D",1780293175130],[254,255],[112],["D",1780293175130],{"_11":12,"_198":194},{"_11":12,"_191":192,"_193":194,"_165":166,"_195":196,"_197":48},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"ctx",{"_186":-5,"_219":315,"_316":317,"_318":319,"_320":48,"_321":48,"_322":48,"_323":26,"_324":-5,"_325":-7,"_326":-7,"_327":133,"_328":48,"_329":48,"_330":-5,"_331":48,"_332":48,"_333":48,"_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

Mergejgwynne7_4bf3679b/mainintotemplates/main

Hmain.html+1018-0

frontend/components/App.tsx+0-14

frontend/components/Counter.tsx+0-18

frontend/index.html+0-17

frontend/index.tsx+0-10

Hindex.ts+0-24