[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_277":278,"_279":280},"routes/_app.x.$handle.$name",{"_109":108,"_37":50,"_117":95,"_32":118,"_13":14,"_119":-5,"_11":120,"_121":122,"_123":124,"_125":126,"_127":128,"_26":-5,"_129":130,"_131":132,"_133":30,"_134":135,"_136":64,"_137":-5,"_138":-5,"_139":140},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_37":50,"_43":51,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":88,"_89":90,"_91":92,"_93":30},"version",4,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","92860152-167d-4b05-a992-09dff8975433","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":14,"_46":47,"_29":30},"previous","deleted",false,"deletedHere","path","frontend/components/TodoList.tsx","latestPath","fileId","87f59532-4564-11f1-9529-42b51c65c3df","name","TodoList.tsx","fileType","script","content","/** @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","createdAt",["D",1777643350513],"branchVersion","branchId","6d9e47d8-4564-11f1-bfed-42b51c65c3df","id","6d93883e-4564-11f1-bfed-42b51c65c3df","todos",["D",1777643306241],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","019de3cc-3d7d-7038-84fe-649bd8a15ea7","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","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",{"_109":108,"_116":112},"org",{"_109":108,"_110":-5,"_111":112,"_19":60,"_113":114,"_115":30},"branch",{"_13":94,"_37":95,"_48":47,"_96":49,"_97":98,"_99":100,"_101":55,"_102":103,"_104":105,"_106":50,"_107":108},"isOwned",9,"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","stevekrouse","handle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_37":50,"_43":272,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":273,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":274,"_89":275,"_91":276,"_93":30},"tree",[195,203,205,206],"files",[195,196,197,198,199,200,201,202,203,204,205,206],"counts",{"_185":68,"_186":162,"_187":68,"_188":189,"_190":191},"contents",[152,153,154,155],"upstreamProject",{"_48":103,"_37":148,"_57":58,"_59":149,"_54":55,"_87":150},"upstreamBranch",{"_48":98,"_43":141,"_142":143,"_37":95,"_96":103,"_13":144,"_97":-5,"_99":-5,"_145":146,"_52":-5,"_93":30,"_54":55,"_107":147,"_69":105,"_106":148},"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=1789531199&sig=c3082dd86ea52a30fbf464ba0f44a3fec10dd3791f436c3bf6ebddd1bfbb94d7",{"_109":147,"_116":151},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789531199&sig=c4c4bdc5c2acbb6312e40d49bdb32dbf55ef8c86dbe1955b3579126e34f9a554",{"_48":180,"_37":181,"_35":182,"_158":-5,"_46":47,"_45":162,"_160":64,"_43":183,"_13":68,"_39":178,"_41":-5,"_29":30,"_165":-5,"_32":184},{"_48":173,"_37":174,"_35":175,"_158":-5,"_46":47,"_45":176,"_160":64,"_43":177,"_13":68,"_39":178,"_41":-5,"_29":30,"_165":-5,"_32":179},{"_48":167,"_37":168,"_35":169,"_158":-5,"_46":47,"_45":162,"_160":30,"_43":170,"_13":68,"_39":26,"_41":171,"_29":30,"_165":-5,"_32":172},{"_48":156,"_37":157,"_35":62,"_158":-5,"_46":47,"_45":159,"_160":64,"_43":161,"_13":162,"_39":163,"_41":164,"_29":30,"_165":-5,"_32":166},"7c0d4fa8-4564-11f1-94d6-42b51c65c3df","index.ts","parentId",2,"latest",["D",1777643330507],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\nconst app = new Hono();\n\n// --- Database setup ---\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\ntype TodoRow = { id: number; text: string; done: number; created_at: number };\nconst serializeTodo = (t: TodoRow) => ({\n id: t.id,\n text: t.text,\n done: !!t.done,\n createdAt: t.created_at,\n});\n\n// --- Frontend ---\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// --- API ---\napp.get(\"/api/todos\", async (c) => {\n const result = await sqlite.execute(\"SELECT * FROM todos ORDER BY created_at DESC\");\n return c.json((result.rows as TodoRow[]).map(serializeTodo));\n});\n\napp.post(\"/api/todos\", async (c) => {\n const { text } = await c.req.json<{ text: string }>();\n if (!text?.trim()) return c.json({ error: \"text is required\" }, 400);\n const result = await sqlite.execute({\n sql: \"INSERT INTO todos (text) VALUES (?) RETURNING *\",\n args: [text.trim()],\n });\n return c.json(serializeTodo(result.rows[0] as TodoRow), 201);\n});\n\napp.patch(\"/api/todos/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n const body = await c.req.json<{ done?: boolean; text?: string }>();\n const updates: string[] = [];\n const args: (string | number)[] = [];\n if (typeof body.done === \"boolean\") {\n updates.push(\"done = ?\");\n args.push(body.done ? 1 : 0);\n }\n if (typeof body.text === \"string\" && body.text.trim()) {\n updates.push(\"text = ?\");\n args.push(body.text.trim());\n }\n if (updates.length === 0) return c.json({ error: \"nothing to update\" }, 400);\n args.push(id);\n const result = await sqlite.execute({\n sql: `UPDATE todos SET ${updates.join(\", \")} WHERE id = ? RETURNING *`,\n args,\n });\n if (result.rows.length === 0) return c.json({ error: \"not found\" }, 404);\n return c.json(serializeTodo(result.rows[0] as TodoRow));\n});\n\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",[157],"6da8b4d4-4564-11f1-bfed-42b51c65c3df","README.md","019de3cc-3d7d-7038-84fe-604a198e6edc",["D",1777643306241],"# 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",[168],"81781c02-4564-11f1-94d6-42b51c65c3df","shared","359d9061-b7ff-476e-9a59-9f122be48e8a",3,["D",1777643339620],"directory",[174],"6da8b2cc-4564-11f1-bfed-42b51c65c3df","frontend","019de3cc-3d7d-7038-84fe-5c3481c5a8d7",["D",1777643306241],[181],"pulls","branches","forks","envVars",{"_192":68,"_194":68},"connections",{"_192":68,"_193":68},"count","unfilledCount","emptyCount",{"_48":180,"_37":181,"_35":182,"_158":-5,"_46":47,"_45":162,"_160":64,"_43":269,"_13":68,"_39":178,"_41":-5,"_29":30,"_165":-5,"_208":270,"_32":271},{"_48":265,"_37":250,"_35":246,"_158":182,"_46":47,"_45":162,"_160":64,"_43":266,"_13":68,"_39":178,"_41":-5,"_29":30,"_165":-5,"_208":267,"_32":268},{"_48":258,"_37":259,"_35":260,"_158":246,"_46":47,"_45":162,"_160":30,"_43":261,"_13":68,"_39":40,"_41":262,"_29":30,"_165":-5,"_208":263,"_32":264},{"_48":251,"_37":252,"_35":253,"_158":246,"_46":47,"_45":162,"_160":30,"_43":254,"_13":68,"_39":40,"_41":255,"_29":30,"_165":-5,"_208":256,"_32":257},{"_48":245,"_37":38,"_35":36,"_158":246,"_46":47,"_45":14,"_160":64,"_43":247,"_13":68,"_39":40,"_41":42,"_29":30,"_165":-5,"_208":248,"_32":249},{"_48":238,"_37":239,"_35":240,"_158":182,"_46":47,"_45":162,"_160":64,"_43":241,"_13":68,"_39":26,"_41":242,"_29":30,"_165":-5,"_208":243,"_32":244},{"_48":231,"_37":232,"_35":233,"_158":182,"_46":47,"_45":162,"_160":30,"_43":234,"_13":68,"_39":26,"_41":235,"_29":30,"_165":-5,"_208":236,"_32":237},{"_48":224,"_37":225,"_35":226,"_158":182,"_46":47,"_45":162,"_160":64,"_43":227,"_13":68,"_39":40,"_41":228,"_29":30,"_165":-5,"_208":229,"_32":230},{"_48":173,"_37":174,"_35":175,"_158":-5,"_46":47,"_45":176,"_160":64,"_43":221,"_13":68,"_39":178,"_41":-5,"_29":30,"_165":-5,"_208":222,"_32":223},{"_48":214,"_37":215,"_35":216,"_158":175,"_46":47,"_45":176,"_160":64,"_43":217,"_13":68,"_39":40,"_41":218,"_29":30,"_165":-5,"_208":219,"_32":220},{"_48":167,"_37":168,"_35":169,"_158":-5,"_46":47,"_45":162,"_160":30,"_43":211,"_13":68,"_39":26,"_41":171,"_29":30,"_165":-5,"_208":212,"_32":213},{"_48":156,"_37":157,"_35":62,"_158":-5,"_46":47,"_45":159,"_160":64,"_43":207,"_13":162,"_39":163,"_41":164,"_29":30,"_165":-5,"_208":209,"_32":210},["D",1777643330507],"children",[],[157],["D",1777643306241],[],[168],"81781284-4564-11f1-94d6-42b51c65c3df","types.ts","81781338-4564-11f1-94d6-42b51c65c3df",["D",1777643339620],"export type Todo = {\n id: number;\n text: string;\n done: boolean;\n createdAt: number;\n};\n",[],[174,215],["D",1777643339620],[204],[174],"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();",[],[181,225],"6da8a368-4564-11f1-bfed-42b51c65c3df","index.html","019de3cc-3d7d-7038-84fe-553ead85ad18",["D",1777643306241],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[181,232],"6da89ea4-4564-11f1-bfed-42b51c65c3df","favicon.svg","019de3cc-3d7d-7038-84fe-500a0ecf9bc7",["D",1777643306241],"\n",[],[181,239],"87f59488-4564-11f1-9529-42b51c65c3df","019de3cc-3d7d-7038-84fe-4fb284662031",["D",1777643350513],[],[181,250,38],"components","6da892c4-4564-11f1-bfed-42b51c65c3df","Counter.tsx","019de3cc-3d7d-7038-84fe-481779c8e534",["D",1777643306241],"/** @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",[],[181,250,252],"6da88234-4564-11f1-bfed-42b51c65c3df","App.tsx","019de3cc-3d7d-7038-84fe-47c850c8848d",["D",1777643306241],"/** @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",[],[181,250,259],"6da89b66-4564-11f1-bfed-42b51c65c3df",["D",1777643306241],[197,198,199],[181,250],["D",1777643306241],[196,200,201,202],[181],["D",1777643306241],["D",1789498239291],{"_109":108,"_116":112},{"_109":108,"_110":-5,"_111":112,"_19":60,"_113":114,"_115":30},{"_13":94,"_37":95,"_48":47,"_96":49,"_97":98,"_99":100,"_101":55,"_102":103,"_104":105,"_106":50,"_107":108},"ctx",{"_87":-5,"_138":310,"_311":312,"_313":314,"_315":30,"_316":30,"_317":30,"_318":64,"_319":-5,"_320":-7,"_321":-7,"_322":68,"_323":30,"_324":30,"_325":-5,"_326":30,"_327":30,"_328":30,"_329":-5},"ENV",{"_281":282,"_283":284,"_285":95,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309},"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"]

Diff · v4