[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_262":263,"_264":265},"routes/_app.x.$handle.$name",{"_112":111,"_38":52,"_120":98,"_33":121,"_13":14,"_122":-5,"_11":123,"_124":125,"_126":127,"_128":129,"_130":131,"_26":-5,"_132":133,"_134":135,"_136":31,"_137":138,"_139":67,"_140":-5,"_141":-5,"_142":143},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_50":51,"_38":52,"_45":53,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":62,"_19":63,"_64":65,"_66":67,"_68":-5,"_69":-5,"_70":71,"_72":73,"_74":75,"_76":77,"_78":79,"_80":-5,"_81":82,"_83":82,"_84":85,"_86":85,"_87":85,"_88":82,"_89":82,"_90":91,"_92":93,"_94":95,"_96":31},"version",4,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","a7e12362-0b1b-4905-9972-8ea7723cc2ed","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":39,"_40":41,"_42":44,"_45":46,"_47":14,"_48":49,"_30":31},"previous",{"_36":37,"_38":39,"_40":41,"_42":43},"deleted",false,"deletedHere","path","frontend/components/App.tsx","latestPath","fileId","019f18de-eb89-739a-ae0b-40f83b82ced0","name","App.tsx","fileType","script","content","/** @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","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { TodoApp } from \"./TodoApp.tsx\";\n\nexport function App() {\n return (\n

📝 Todo List

\n \n

\n View source\n

\n );\n}\n","createdAt",["D",1782828722706],"branchVersion","branchId","f97dd5b4-2ff6-4352-8d75-55cb425692e3","id","8ea9927f-9a0c-4951-a7b8-8c3d18a738df","todo-test-app",["D",1782828690190],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Simple todo list app with React UI and SQLite persistence","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789691769&sig=1b526277103108c354fbe729201ce3bd8052e406bc8a59dacd955e604c65ab35","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","019f18de-eb89-739a-ae0b-60c8ef9f30ef","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","8ea9927f9a0c4951a7b88c3d18a738df","tursoHostname","8ea9927f9a0c4951a7b88c3d18a738df-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789609258211],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_112":111,"_119":115},"org",{"_112":111,"_113":-5,"_114":115,"_19":63,"_116":117,"_118":31},"branch",{"_13":97,"_38":98,"_50":49,"_99":51,"_100":101,"_102":103,"_104":57,"_105":106,"_107":108,"_109":52,"_110":111},"isOwned",7,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",89,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","stevekrouse","handle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_50":51,"_38":52,"_45":257,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":62,"_19":63,"_64":65,"_66":67,"_68":-5,"_69":-5,"_70":71,"_72":73,"_74":75,"_76":77,"_78":258,"_80":-5,"_81":82,"_83":82,"_84":85,"_86":85,"_87":85,"_88":82,"_89":82,"_90":259,"_92":260,"_94":261,"_96":31},"tree",[191,199,200],"files",[191,192,193,194,195,196,197,198,199,200],"counts",{"_181":71,"_182":164,"_183":71,"_184":185,"_186":187},"contents",[155,156,157],"upstreamProject",{"_50":106,"_38":151,"_59":152,"_61":62,"_56":57,"_90":153},"upstreamBranch",{"_50":101,"_45":144,"_145":146,"_38":98,"_99":106,"_13":147,"_100":-5,"_102":-5,"_148":149,"_54":-5,"_96":31,"_56":57,"_110":150,"_72":108,"_109":151},"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","Starter template with client-side React & Hono server",{"_112":150,"_119":154},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789691769&sig=b4fac6ebbfd67a1dbdd5189501a114ec6bc533bdf8da458482ccbec4ed0b0da0",{"_50":175,"_38":176,"_36":177,"_160":-5,"_48":49,"_47":164,"_162":67,"_45":178,"_13":71,"_40":179,"_42":-5,"_30":31,"_167":-5,"_33":180},{"_50":169,"_38":170,"_36":171,"_160":-5,"_48":49,"_47":164,"_162":31,"_45":172,"_13":71,"_40":26,"_42":173,"_30":31,"_167":-5,"_33":174},{"_50":158,"_38":159,"_36":65,"_160":-5,"_48":49,"_47":161,"_162":67,"_45":163,"_13":164,"_40":165,"_42":166,"_30":31,"_167":-5,"_33":168},"fef24cba-9257-489a-8a89-6716bdd778d4","index.ts","parentId",2,"latest",["D",1782828704887],1,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { Hono } from \"npm:hono\";\n\n// Ensure the todos table exists\nawait sqlite.execute(`\n CREATE TABLE IF NOT EXISTS todos (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n text TEXT NOT NULL,\n done INTEGER NOT NULL DEFAULT 0,\n created_at INTEGER NOT NULL DEFAULT (unixepoch())\n )\n`);\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// --- Todo API ---\n\n// List all todos\napp.get(\"/api/todos\", async (c) => {\n const result = await sqlite.execute(\n \"SELECT id, text, done, created_at FROM todos ORDER BY id DESC\",\n );\n const todos = result.rows.map((r) => ({\n id: r.id,\n text: r.text,\n done: Boolean(r.done),\n created_at: r.created_at,\n }));\n return c.json({ todos });\n});\n\n// Create a todo\napp.post(\"/api/todos\", async (c) => {\n const body = await c.req.json();\n const text = body?.text?.trim();\n if (!text) return c.json({ error: \"text is required\" }, 400);\n const result = await sqlite.execute({\n sql: \"INSERT INTO todos (text) VALUES (?)\",\n args: [text],\n });\n return c.json({\n id: Number(result.lastInsertRowid),\n text,\n done: false,\n }, 201);\n});\n\n// Toggle done / update text\napp.patch(\"/api/todos/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n const body = await c.req.json();\n const updates: string[] = [];\n const args: (string | number)[] = [];\n if (body.text !== undefined) {\n updates.push(\"text = ?\");\n args.push(body.text.trim());\n }\n if (body.done !== undefined) {\n updates.push(\"done = ?\");\n args.push(body.done ? 1 : 0);\n }\n if (updates.length === 0) return c.json({ error: \"no fields to update\" }, 400);\n args.push(id);\n await sqlite.execute({\n sql: `UPDATE todos SET ${updates.join(\", \")} WHERE id = ?`,\n args,\n });\n return c.json({ ok: true });\n});\n\n// Delete a todo\napp.delete(\"/api/todos/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n await sqlite.execute({ sql: \"DELETE FROM todos WHERE id = ?\", args: [id] });\n return c.json({ ok: true });\n});\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","label",[159],"eaf35584-f1d2-43a4-9d4f-10f536605aa7","README.md","019f18de-eb89-739a-ae0b-5f367574d2d1",["D",1782828690190],"# 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",[170],"4d791334-e793-400d-b8fa-a6d977354732","frontend","019f18de-eb89-739a-ae0b-5a2bc585ab43",["D",1782828690190],"directory",[176],"pulls","branches","forks","envVars",{"_188":71,"_190":71},"connections",{"_188":71,"_189":71},"count","unfilledCount","emptyCount",{"_50":175,"_38":176,"_36":177,"_160":-5,"_48":49,"_47":164,"_162":67,"_45":254,"_13":71,"_40":179,"_42":-5,"_30":31,"_167":-5,"_202":255,"_33":256},{"_50":250,"_38":238,"_36":232,"_160":177,"_48":49,"_47":164,"_162":67,"_45":251,"_13":71,"_40":179,"_42":-5,"_30":31,"_167":-5,"_202":252,"_33":253},{"_50":246,"_38":39,"_36":37,"_160":232,"_48":49,"_47":14,"_162":67,"_45":247,"_13":164,"_40":41,"_42":44,"_30":31,"_167":-5,"_202":248,"_33":249},{"_50":239,"_38":240,"_36":241,"_160":232,"_48":49,"_47":164,"_162":31,"_45":242,"_13":71,"_40":41,"_42":243,"_30":31,"_167":-5,"_202":244,"_33":245},{"_50":229,"_38":230,"_36":231,"_160":232,"_48":49,"_47":233,"_162":67,"_45":234,"_13":71,"_40":41,"_42":235,"_30":31,"_167":-5,"_202":236,"_33":237},{"_50":222,"_38":223,"_36":224,"_160":177,"_48":49,"_47":164,"_162":67,"_45":225,"_13":71,"_40":26,"_42":226,"_30":31,"_167":-5,"_202":227,"_33":228},{"_50":215,"_38":216,"_36":217,"_160":177,"_48":49,"_47":164,"_162":31,"_45":218,"_13":71,"_40":26,"_42":219,"_30":31,"_167":-5,"_202":220,"_33":221},{"_50":208,"_38":209,"_36":210,"_160":177,"_48":49,"_47":164,"_162":67,"_45":211,"_13":71,"_40":41,"_42":212,"_30":31,"_167":-5,"_202":213,"_33":214},{"_50":169,"_38":170,"_36":171,"_160":-5,"_48":49,"_47":164,"_162":31,"_45":205,"_13":71,"_40":26,"_42":173,"_30":31,"_167":-5,"_202":206,"_33":207},{"_50":158,"_38":159,"_36":65,"_160":-5,"_48":49,"_47":161,"_162":67,"_45":201,"_13":164,"_40":165,"_42":166,"_30":31,"_167":-5,"_202":203,"_33":204},["D",1782828704887],"children",[],[159],["D",1782828690190],[],[170],"c7ace193-4f1c-4553-aaeb-1c82dd9d1c41","index.tsx","019f18de-eb89-739a-ae0b-55d647cb6ceb",["D",1782828690190],"/** @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();",[],[176,209],"65988b66-b619-48c9-b327-bf837e6b8be3","index.html","019f18de-eb89-739a-ae0b-53eb8b6dbaae",["D",1782828690190],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[176,216],"3fe6d758-b011-4acb-bf6a-d673682e39f0","favicon.svg","019f18de-eb89-739a-ae0b-4ce6efd4ecb9",["D",1782828690190],"\n",[],[176,223],"73e7730a-8295-4e69-9f43-474fa37a75f0","TodoApp.tsx","a83552b2-748d-11f1-bcc6-1607ee4eb77e","019f18de-eb89-739a-ae0b-489c72bc838e",3,["D",1782828718639],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\n\ntype Todo = {\n id: number;\n text: string;\n done: boolean;\n};\n\nexport function TodoApp() {\n const [todos, setTodos] = useState([]);\n const [input, setInput] = useState(\"\");\n const [loading, setLoading] = useState(true);\n\n const fetchTodos = useCallback(async () => {\n const res = await fetch(\"/api/todos\");\n const data = await res.json();\n setTodos(data.todos ?? []);\n setLoading(false);\n }, []);\n\n useEffect(() => {\n fetchTodos();\n }, [fetchTodos]);\n\n const addTodo = async (e: React.FormEvent) => {\n e.preventDefault();\n const text = input.trim();\n if (!text) 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 todo = await res.json();\n setTodos((prev) => [todo, ...prev]);\n setInput(\"\");\n };\n\n const toggleTodo = async (id: number, done: boolean) => {\n await fetch(`/api/todos/${id}`, {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ done: !done }),\n });\n setTodos((prev) =>\n prev.map((t) => t.id === id ? { ...t, done: !done } : t)\n );\n };\n\n const deleteTodo = async (id: number) => {\n await fetch(`/api/todos/${id}`, { method: \"DELETE\" });\n setTodos((prev) => prev.filter((t) => t.id !== id));\n };\n\n const remaining = todos.filter((t) => !t.done).length;\n\n return (\n

\n setInput(e.target.value)}\n placeholder=\"What needs to be done?\"\n class=\"flex-1 border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-400\"\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.id, todo.done)}\n class=\"w-5 h-5 cursor-pointer accent-blue-500\"\n />\n \n {todo.text}\n \n deleteTodo(todo.id)}\n class=\"text-gray-400 hover:text-red-500 transition-colors cursor-pointer text-lg\"\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",[],[176,238,230],"components","d7ee2674-773e-41f1-8667-8e573a90afa5","Counter.tsx","019f18de-eb89-739a-ae0b-45e40a8ddf17",["D",1782828690190],"/** @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",[],[176,238,240],"88b47de5-9474-42d3-985e-63d0aa1d54db",["D",1782828722706],[],[176,238,39],"0e32d054-d94f-477c-8342-53df70c418c5",["D",1782828690190],[193,194,195],[176,238],["D",1782828690190],[192,196,197,198],[176],["D",1782828690190],["D",1789609258211],{"_112":111,"_119":115},{"_112":111,"_113":-5,"_114":115,"_19":63,"_116":117,"_118":31},{"_13":97,"_38":98,"_50":49,"_99":51,"_100":101,"_102":103,"_104":57,"_105":106,"_107":108,"_109":52,"_110":111},"ctx",{"_90":-5,"_141":295,"_296":297,"_298":299,"_300":31,"_301":31,"_302":31,"_303":67,"_304":-5,"_305":-7,"_306":-7,"_307":71,"_308":31,"_309":31,"_310":-5,"_311":31,"_312":31,"_313":31,"_314":-5},"ENV",{"_266":267,"_268":269,"_270":98,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292,"_293":294},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","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 · v4