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

\n \n \n \n",[120,111],"1ea8b3da4e18d579298229ba24af91b14b14ae02565f57c996f9acaa1f8333bc","frontend/components/App.tsx",{"_32":142,"_13":133,"_81":143,"_83":144,"_84":33,"_85":145,"_87":26,"_34":146,"_40":147,"_90":137,"_92":148,"_66":48,"_94":-5,"_95":-7,"_74":149,"_97":150},{"_32":132,"_13":133,"_81":134,"_83":135,"_84":58,"_85":57,"_87":26,"_34":136,"_40":86,"_90":137,"_92":138,"_66":48,"_94":-5,"_95":-7,"_74":139,"_97":140},"6adab8d6-4584-11f1-b2cc-42b51c65c3df","App.tsx","019de3cc-3d7d-7038-84fe-47c850c8848d","019de3cc-3d7d-7038-84fe-4fb284662031",["D",1777657045566],"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { TodoList } from \"./TodoList.tsx\";\n\nexport function App() {\n return (\n

📝 Todos!!!!

\n \n

\n View source\n

\n );\n}",[120,141,133],"962c123454819f1101e29aa360cf95f466cefb24ed1fd68d026494d60ac7b111","components","5d7e5e30-3996-11f1-bbdd-42b51c65c3df","6e585892-f52b-11ef-a8e1-569c3dd06744","69ed66bc-f52b-11ef-9dac-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",[120,141,133],"de0a7e5fc76c6fd6135aff964af1a5835e04e2758b23f3d0c7d9fabffe514df7","README.md",{"_32":160,"_13":151,"_81":161,"_83":-5,"_84":33,"_85":162,"_87":48,"_34":163,"_40":164,"_90":116,"_92":165,"_66":48,"_94":-5,"_95":-7,"_74":166,"_97":167},{"_32":154,"_13":151,"_81":155,"_83":-5,"_84":58,"_85":20,"_87":26,"_34":156,"_40":89,"_90":116,"_92":157,"_66":48,"_94":-5,"_95":-7,"_74":158,"_97":159},"99aed9c8-4564-11f1-8981-42b51c65c3df","019de3cc-3d7d-7038-84fe-604a198e6edc",["D",1777643380242],"# Todos\n\nA simple todo list app with a SQLite backend, Hono API, and React frontend.\n\n## Features\n\n- ✅ Add, toggle, and delete todos\n- 💾 Persisted in SQLite (per-val database)\n- ⚡ Optimistic UI updates\n- 🎨 Styled with Twind (Tailwind utility classes)\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"frontend/index.html\"]\n HTML -->|loads| Entry[\"frontend/index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| TodoList[\"TodoList.tsx\"]\n TodoList <-->|\"fetch /api/todos\"| Hono\n Hono <-->|SQL| DB[(\"SQLite
todos table\")]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (frontend + API + SQLite)\nshared/types.ts ← Shared Todo type\nfrontend/\n index.html ← HTML shell (Twind + React)\n index.tsx ← React entrypoint\n components/\n App.tsx ← Root layout\n TodoList.tsx ← Todo list UI + API calls\n```\n\n## API\n\n| Method | Path | Body | Description |\n| ------ | ----------------- | ----------------------------- | --------------------- |\n| GET | `/api/todos` | | List all todos |\n| POST | `/api/todos` | `{ text }` | Create a todo |\n| PATCH | `/api/todos/:id` | `{ done?, text? }` | Update a todo |\n| DELETE | `/api/todos/:id` | | Delete a todo |\n",[151],"72938398ac998976cba5bd130acad82ce4cb84ea78a70e02afbd1796c3c6fe46","1a3cc642-3997-11f1-a3f8-42b51c65c3df","a50c3760-f53e-11ef-bd6d-569c3dd06744",87,["D",1776345656810],30,"# 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",[151],"8094bd638fc012f5239882eebeb86eee1944c60d49719e6e20139500b7aaf24e",{"_74":169,"_76":170,"_78":-7},"frontend/components/Counter.tsx",{"_32":171,"_13":172,"_81":173,"_83":144,"_84":33,"_85":174,"_87":26,"_34":175,"_40":176,"_90":137,"_92":177,"_66":48,"_94":-5,"_95":-7,"_74":178,"_97":179},"57a8cc52-3996-11f1-8db6-42b51c65c3df","Counter.tsx","57a8cd2e-3996-11f1-8db6-42b51c65c3df",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",[120,141,172],"10ce4fbd7e41af337e504c3877201698031249b437d941845f0f7cdc52a79e66",{"_74":199,"_76":-7,"_78":200},{"_74":193,"_76":-7,"_78":194},{"_74":183,"_76":-7,"_78":184},"shared/types.ts",{"_32":185,"_13":186,"_81":187,"_83":188,"_84":58,"_85":22,"_87":26,"_34":189,"_40":176,"_90":137,"_92":190,"_66":48,"_94":-5,"_95":-7,"_74":191,"_97":192},"81781284-4564-11f1-94d6-42b51c65c3df","types.ts","81781338-4564-11f1-94d6-42b51c65c3df","359d9061-b7ff-476e-9a59-9f122be48e8a",["D",1777643339620],"export type Todo = {\n id: number;\n text: string;\n done: boolean;\n createdAt: number;\n};\n",[193,186],"4af77e75cf61b270fee8869429d583ce2feb209423e2bc4b6a518c26323c9dc5","shared",{"_32":195,"_13":193,"_81":188,"_83":-5,"_84":58,"_85":22,"_87":26,"_34":196,"_40":176,"_90":197,"_92":-5,"_66":48,"_94":-5,"_95":-7,"_74":198,"_97":-5},"81781c02-4564-11f1-94d6-42b51c65c3df",["D",1777643339620],"directory",[193],"frontend/components/TodoList.tsx",{"_32":201,"_13":202,"_81":203,"_83":135,"_84":58,"_85":204,"_87":26,"_34":205,"_40":176,"_90":137,"_92":206,"_66":48,"_94":-5,"_95":-7,"_74":207,"_97":208},"87f59488-4564-11f1-9529-42b51c65c3df","TodoList.tsx","87f59532-4564-11f1-9529-42b51c65c3df",4,["D",1777643350513],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Todo } from \"../../shared/types.ts\";\n\nexport function TodoList() {\n const [todos, setTodos] = useState([]);\n const [text, setText] = useState(\"\");\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n fetch(\"/api/todos\")\n .then((r) => r.json())\n .then((data) => {\n setTodos(data);\n setLoading(false);\n });\n }, []);\n\n async function addTodo(e: React.FormEvent) {\n e.preventDefault();\n if (!text.trim()) return;\n const res = await fetch(\"/api/todos\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ text }),\n });\n const newTodo: Todo = await res.json();\n setTodos((prev) => [newTodo, ...prev]);\n setText(\"\");\n }\n\n async function toggleTodo(todo: Todo) {\n // optimistic update\n setTodos((prev) => prev.map((t) => (t.id === todo.id ? { ...t, done: !t.done } : t)));\n await fetch(`/api/todos/${todo.id}`, {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ done: !todo.done }),\n });\n }\n\n async function deleteTodo(id: number) {\n setTodos((prev) => prev.filter((t) => t.id !== id));\n await fetch(`/api/todos/${id}`, { method: \"DELETE\" });\n }\n\n const remaining = todos.filter((t) => !t.done).length;\n\n return (\n

\n setText((e.target as HTMLInputElement).value)}\n placeholder=\"What needs to be done?\"\n class=\"flex-1 px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n \n Add\n \n \n\n {loading ? (\n

Loading…

\n ) : todos.length === 0 ? (\n

No todos yet — add one above!

\n ) : (\n

\n toggleTodo(todo)}\n class=\"w-5 h-5 cursor-pointer\"\n />\n \n {todo.text}\n \n deleteTodo(todo.id)}\n class=\"text-gray-400 hover:text-red-600 opacity-0 group-hover:opacity-100 transition-opacity\"\n aria-label=\"Delete\"\n >\n ✕\n \n \n ))}\n

\n )}\n\n {todos.length > 0 && (\n

\n {remaining} of {todos.length} remaining\n

\n )}\n

\n );\n}\n",[120,141,202],"0310ff422b6a61d28de48701e3d3c99d82e725ebb8f65c5f21f350a77e90728b",["D",1777643306241],"legacyEnvVars","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","userId","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","6d93883e456411f1bfed42b51c65c3df","tursoHostname","6d93883e456411f1bfed42b51c65c3df-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789498239291],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_250":246},"org",{"_11":12,"_244":-5,"_245":246,"_215":216,"_247":248,"_249":48},"branch","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":59,"_13":14,"_34":348,"_46":-5,"_210":48,"_49":50,"_211":50,"_212":213,"_214":-5,"_215":216,"_217":82,"_218":26,"_219":-5,"_220":-5,"_221":176,"_53":222,"_223":224,"_225":226,"_227":349,"_229":-5,"_230":231,"_232":231,"_233":234,"_235":234,"_236":234,"_237":231,"_238":231,"_239":350,"_241":351,"_243":352,"_47":48},"tree",[302,309,311,312],"files",[302,303,304,305,306,307,308,309,310,311,312],"counts",{"_292":176,"_293":89,"_294":176,"_295":296,"_297":298},"contents",[279,280,281,282],"upstreamProject",{"_32":39,"_13":56,"_212":213,"_214":276,"_49":50,"_239":277},"upstreamBranch",{"_32":33,"_34":274,"_36":275,"_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],"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789534799&sig=2fe932419d898cd124d0961cab25a5a9c3bd76c8b30cb3b9e71257c7b34e60a2",{"_11":52,"_250":278},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789534799&sig=94d49ad984a50880ef894a3794e08842e7b9b626be771ff48da114d7d9a149ed",{"_32":289,"_13":120,"_81":113,"_83":-5,"_84":58,"_85":89,"_87":26,"_34":290,"_40":176,"_90":197,"_92":-5,"_66":48,"_94":-5,"_74":291},{"_32":195,"_13":193,"_81":188,"_83":-5,"_84":58,"_85":22,"_87":26,"_34":287,"_40":176,"_90":197,"_92":-5,"_66":48,"_94":-5,"_74":288},{"_32":154,"_13":151,"_81":155,"_83":-5,"_84":58,"_85":20,"_87":26,"_34":285,"_40":89,"_90":116,"_92":157,"_66":48,"_94":-5,"_74":286},{"_32":80,"_13":75,"_81":82,"_83":-5,"_84":58,"_85":86,"_87":26,"_34":283,"_40":89,"_90":91,"_92":93,"_66":48,"_94":-5,"_74":284},["D",1777643330507],[75],["D",1777643380242],[151],["D",1777643339620],[193],"6da8b2cc-4564-11f1-bfed-42b51c65c3df",["D",1777643306241],[120],"pulls","branches","forks","envVars",{"_299":176,"_301":176},"connections",{"_299":176,"_300":176},"count","unfilledCount","emptyCount",{"_32":289,"_13":120,"_81":113,"_83":-5,"_84":58,"_85":89,"_87":26,"_34":345,"_40":176,"_90":197,"_92":-5,"_66":48,"_94":-5,"_95":346,"_74":347},{"_32":341,"_13":141,"_81":135,"_83":113,"_84":58,"_85":89,"_87":26,"_34":342,"_40":176,"_90":197,"_92":-5,"_66":48,"_94":-5,"_95":343,"_74":344},{"_32":132,"_13":133,"_81":134,"_83":135,"_84":58,"_85":57,"_87":26,"_34":136,"_40":86,"_90":137,"_92":138,"_66":48,"_94":-5,"_95":339,"_74":340},{"_32":201,"_13":202,"_81":203,"_83":135,"_84":58,"_85":204,"_87":26,"_34":205,"_40":176,"_90":137,"_92":206,"_66":48,"_94":-5,"_95":337,"_74":338},{"_32":330,"_13":331,"_81":332,"_83":113,"_84":58,"_85":89,"_87":26,"_34":333,"_40":176,"_90":116,"_92":334,"_66":48,"_94":-5,"_95":335,"_74":336},{"_32":110,"_13":111,"_81":112,"_83":113,"_84":58,"_85":114,"_87":26,"_34":115,"_40":89,"_90":116,"_92":117,"_66":48,"_94":-5,"_95":328,"_74":329},{"_32":321,"_13":322,"_81":323,"_83":113,"_84":58,"_85":89,"_87":26,"_34":324,"_40":176,"_90":137,"_92":325,"_66":48,"_94":-5,"_95":326,"_74":327},{"_32":195,"_13":193,"_81":188,"_83":-5,"_84":58,"_85":22,"_87":26,"_34":196,"_40":176,"_90":197,"_92":-5,"_66":48,"_94":-5,"_95":319,"_74":320},{"_32":185,"_13":186,"_81":187,"_83":188,"_84":58,"_85":22,"_87":26,"_34":189,"_40":176,"_90":137,"_92":190,"_66":48,"_94":-5,"_95":317,"_74":318},{"_32":154,"_13":151,"_81":155,"_83":-5,"_84":58,"_85":20,"_87":26,"_34":156,"_40":89,"_90":116,"_92":157,"_66":48,"_94":-5,"_95":315,"_74":316},{"_32":80,"_13":75,"_81":82,"_83":-5,"_84":58,"_85":86,"_87":26,"_34":88,"_40":89,"_90":91,"_92":93,"_66":48,"_94":-5,"_95":313,"_74":314},[],[75],[],[151],[],[193,186],[310],[193],"6da8ae62-4564-11f1-bfed-42b51c65c3df","index.tsx","019de3cc-3d7d-7038-84fe-5814472acae3",["D",1777643306241],"/** @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();",[],[120,322],[],[120,111],"6da89ea4-4564-11f1-bfed-42b51c65c3df","favicon.svg","019de3cc-3d7d-7038-84fe-500a0ecf9bc7",["D",1777643306241],"\n",[],[120,331],[],[120,141,202],[],[120,141,133],"6da89b66-4564-11f1-bfed-42b51c65c3df",["D",1777643306241],[304,305],[120,141],["D",1777643306241],[303,306,307,308],[120],["D",1777643306241],["D",1789498239291],{"_11":12,"_250":246},{"_11":12,"_244":-5,"_245":246,"_215":216,"_247":248,"_249":48},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"ctx",{"_239":-5,"_271":386,"_387":388,"_389":390,"_391":48,"_392":48,"_393":48,"_394":26,"_395":-5,"_396":-7,"_397":-7,"_398":176,"_399":48,"_400":48,"_401":-5,"_402":48,"_403":48,"_404":48,"_405":-5},"ENV",{"_357":358,"_359":360,"_361":16,"_362":363,"_364":365,"_366":367,"_368":369,"_370":371,"_372":373,"_374":375,"_376":377,"_378":379,"_380":381,"_382":383,"_384":385},"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

Mergestevekrouse/mainintotemplates/main

README.md+25-35

frontend/components/App.tsx+4-4

frontend/index.html+3-3

Hindex.ts+64-10

frontend/components/TodoList.tsx+109-0

shared

shared/types.ts+6-0

frontend/components/Counter.tsx+0-18