[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_261":262,"_263":264},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_194":-5,"_20":195,"_22":196,"_197":198,"_199":200,"_26":201,"_24":202,"_203":204,"_205":206,"_207":51,"_208":209,"_210":71,"_211":-5,"_212":-5,"_213":214},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":-5,"_31":32,"_33":34,"_35":-5},"handle","TheMiddleKid","name","tip-calculator","branchName","main","version","path","frontend/components","project",{"_36":144,"_13":14,"_38":145,"_49":-5,"_146":51,"_52":53,"_147":53,"_148":149,"_150":151,"_152":153,"_154":94,"_155":71,"_156":-5,"_157":-5,"_158":86,"_56":159,"_160":161,"_162":163,"_164":165,"_166":-5,"_167":168,"_169":168,"_170":171,"_172":171,"_173":171,"_174":168,"_175":168,"_176":177,"_178":179,"_180":181,"_50":51},"tree",[89,90,91],"file",{"_36":83,"_13":82,"_63":66,"_65":84,"_67":68,"_69":73,"_70":71,"_38":85,"_17":86,"_74":87,"_76":-5,"_78":51,"_79":-5,"_18":88},"contents",[60],"upstream",{"_36":37,"_38":39,"_40":41,"_13":16,"_42":43,"_17":44,"_45":-5,"_46":-5,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59},"pull","ahead",3,"behind",2,"envVars","id","961078ea-f528-11ef-aa68-569c3dd06744","createdAt",["D",1740674013689],"updatedAt",["D",1785420707976],"projectId","96102714-f528-11ef-aa68-569c3dd06744",91,"forkedBranchId","forkedBranchVersion","lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","deletedAt","isOwned",false,"privacy","public","userHandle","templates","orgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","react-hono-starter",{"_36":61,"_13":62,"_63":64,"_65":66,"_67":68,"_69":34,"_70":71,"_38":72,"_17":73,"_74":75,"_76":77,"_78":51,"_79":-5,"_18":80},"b39aace3-357e-418f-a295-703a6cf6d223","App.tsx","fileId","019f8608-dc15-77ae-8269-2ab047ad54f3","parentId","019f8608-dc16-760f-9b8a-850e09850927","branchId","0a83fa6c-91d7-4d05-8d49-194d5fb1caf7","branchVersion","latest",true,["D",1784660293013],1,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useMemo, useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function App() {\n const [bill, setBill] = useState(\"\");\n const [tipPercent, setTipPercent] = useState(18);\n const [people, setPeople] = useState(1);\n\n const billValue = parseFloat(bill) || 0;\n\n const { tipAmount, total, perPerson } = useMemo(() => {\n const tip = billValue * (tipPercent / 100);\n const totalAmount = billValue + tip;\n const numPeople = Math.max(1, people);\n return {\n tipAmount: tip,\n total: totalAmount,\n perPerson: totalAmount / numPeople,\n };\n }, [billValue, tipPercent, people]);\n\n const presets = [10, 15, 18, 20, 25];\n\n return (\n

Tip calculator

\n\n \n Bill amount\n \n

\n $\n setBill(e.target.value)}\n placeholder=\"0.00\"\n className=\"w-full pl-7 pr-3 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-400\"\n />\n

\n\n \n Tip percentage: {tipPercent}%\n \n

\n {presets.map((p) => (\n setTipPercent(p)}\n className={`flex-1 py-2 rounded-lg text-sm font-medium border transition-colors ${\n tipPercent === p\n ? \"bg-indigo-600 text-white border-indigo-600\"\n : \"bg-gray-50 text-gray-700 border-gray-200 hover:bg-gray-100\"\n }`}\n >\n {p}%\n \n ))}\n

\n setTipPercent(Number(e.target.value))}\n className=\"w-full mb-5 accent-indigo-600\"\n />\n\n \n Number of people\n \n

\n setPeople((p) => Math.max(1, p - 1))}\n className=\"w-9 h-9 rounded-lg bg-gray-100 text-gray-700 font-bold hover:bg-gray-200\"\n >\n -\n \n {people}\n setPeople((p) => p + 1)}\n className=\"w-9 h-9 rounded-lg bg-gray-100 text-gray-700 font-bold hover:bg-gray-200\"\n >\n +\n \n

\n\n

\n Tip amount\n ${tipAmount.toFixed(2)}\n

\n Total\n ${total.toFixed(2)}\n

\n Per person\n ${perPerson.toFixed(2)}\n

\n\n

\n view source\n

\n );\n}\n","deleted","label",[81,82,62],"frontend","components","d982a81e-9f83-44b0-8c5f-2c77e080c710","019f8608-dc16-760f-9b8a-95f5f9fe3918",["D",1784660155314],0,"directory",[81,82],{"_36":108,"_13":81,"_63":84,"_65":-5,"_67":68,"_69":73,"_70":71,"_38":109,"_17":86,"_74":87,"_76":-5,"_78":51,"_79":-5,"_98":110,"_18":111},{"_36":101,"_13":102,"_63":103,"_65":-5,"_67":68,"_69":73,"_70":71,"_38":104,"_17":86,"_74":24,"_76":105,"_78":51,"_79":-5,"_98":106,"_18":107},{"_36":92,"_13":93,"_63":94,"_65":-5,"_67":68,"_69":73,"_70":71,"_38":95,"_17":86,"_74":96,"_76":97,"_78":51,"_79":-5,"_98":99,"_18":100},"e0e7a55a-abcb-4a09-ba7a-7578e0856895","index.ts","019f8608-dc16-760f-9b8a-9f8b8a313171",["D",1784660155314],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\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// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","children",[],[93],"d9f3867b-2384-431d-988e-01a4c5cde18a","README.md","019f8608-dc16-760f-9b8a-98e3979f18eb",["D",1784660155314],"# 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",[],[102],"2a861559-7248-47d2-8cdd-83b44ff2ee3c",["D",1784660155314],[112,113,114,115],[81],{"_36":83,"_13":82,"_63":66,"_65":84,"_67":68,"_69":73,"_70":71,"_38":137,"_17":86,"_74":87,"_76":-5,"_78":51,"_79":-5,"_98":138,"_18":139},{"_36":130,"_13":131,"_63":132,"_65":84,"_67":68,"_69":73,"_70":71,"_38":133,"_17":86,"_74":24,"_76":134,"_78":51,"_79":-5,"_98":135,"_18":136},{"_36":123,"_13":124,"_63":125,"_65":84,"_67":68,"_69":32,"_70":71,"_38":126,"_17":73,"_74":24,"_76":127,"_78":51,"_79":-5,"_98":128,"_18":129},{"_36":116,"_13":117,"_63":118,"_65":84,"_67":68,"_69":73,"_70":71,"_38":119,"_17":86,"_74":75,"_76":120,"_78":51,"_79":-5,"_98":121,"_18":122},"f0e8b14a-57a7-4acc-86f0-25abc5910e90","index.tsx","019f8608-dc16-760f-9b8a-9281e4f1d097",["D",1784660155314],"/** @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();",[],[81,117],"2d229cc3-54ba-4049-84ef-54e9edd1b7a3","index.html","019f8608-dc16-760f-9b8a-8da6de10c0ec",["D",1784660313624],"\n\n \n \n \n Tip Calculator\n \n \n \n \n

\n \n \n \n",[],[81,124],"6f257549-14df-4201-a9bc-b2c50054425c","favicon.svg","019f8608-dc16-760f-9b8a-883f5617708d",["D",1784660155314],"\n",[],[81,131],["D",1784660155314],[140],[81,82],{"_36":61,"_13":62,"_63":64,"_65":66,"_67":68,"_69":34,"_70":71,"_38":141,"_17":73,"_74":75,"_76":77,"_78":51,"_79":-5,"_98":142,"_18":143},["D",1784660293013],[],[81,82,62],"4be1f1e3-7aac-4fa9-b902-a211dcb7ffde",["D",1784660155314],"legacyEnvVars","httpPrivacy","description","Simple tip calculator app","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789588022&sig=05e642b547136a22da24fb284ba88517227c00fcfe70cbd57065b119426caf21","userId","5f007fe6-1d40-44da-8ffe-76db2d41b4e9","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019f85f1-9da6-712b-9023-bf160059ca8e","tursoName","4be1f1e37aac4fa9b902a211dcb7ffde","tursoHostname","4be1f1e37aac4fa9b902a211dcb7ffde-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789560070146],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_193":188},"org",{"_11":12,"_187":188,"_189":188,"_152":153,"_190":191,"_192":51},"branch",{"_17":182,"_13":16,"_36":68,"_42":144,"_45":37,"_46":183,"_184":53,"_185":43,"_186":57,"_58":14,"_54":12},4,89,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","","avatar","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":144,"_13":14,"_38":256,"_49":-5,"_146":51,"_52":53,"_147":53,"_148":149,"_150":151,"_152":153,"_154":94,"_155":71,"_156":-5,"_157":-5,"_158":86,"_56":159,"_160":161,"_162":163,"_164":257,"_166":-5,"_167":168,"_169":168,"_170":171,"_172":171,"_173":171,"_174":168,"_175":168,"_176":258,"_178":259,"_180":260,"_50":51},[232,238,239],"files",[232,233,234,235,236,237,238,239],"counts",{"_223":86,"_224":73,"_225":86,"_35":226,"_227":228},[221],{"_36":83,"_13":82,"_63":66,"_65":84,"_67":68,"_69":73,"_70":71,"_38":85,"_17":86,"_74":87,"_76":-5,"_78":51,"_79":-5,"_18":220},"upstreamProject",{"_36":43,"_13":59,"_148":217,"_150":151,"_52":53,"_176":218},"upstreamBranch",{"_36":37,"_38":215,"_40":216,"_13":16,"_42":43,"_17":44,"_45":-5,"_46":-5,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],"Starter template with client-side React & Hono server",{"_11":55,"_193":219},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789588022&sig=13aa468e49564d23c35a2d5ff25224f2ea520c2f7dfab6f0eadcd683deed3652",[81,82],{"_36":61,"_13":62,"_63":64,"_65":66,"_67":68,"_69":34,"_70":71,"_38":72,"_17":73,"_74":75,"_76":77,"_78":51,"_79":-5,"_18":222},[81,82,62],"pulls","branches","forks",{"_229":86,"_231":86},"connections",{"_229":86,"_230":86},"count","unfilledCount","emptyCount",{"_36":108,"_13":81,"_63":84,"_65":-5,"_67":68,"_69":73,"_70":71,"_38":109,"_17":86,"_74":87,"_76":-5,"_78":51,"_79":-5,"_98":254,"_18":255},{"_36":83,"_13":82,"_63":66,"_65":84,"_67":68,"_69":73,"_70":71,"_38":137,"_17":86,"_74":87,"_76":-5,"_78":51,"_79":-5,"_98":252,"_18":253},{"_36":61,"_13":62,"_63":64,"_65":66,"_67":68,"_69":34,"_70":71,"_38":141,"_17":73,"_74":75,"_76":77,"_78":51,"_79":-5,"_98":250,"_18":251},{"_36":130,"_13":131,"_63":132,"_65":84,"_67":68,"_69":73,"_70":71,"_38":133,"_17":86,"_74":24,"_76":134,"_78":51,"_79":-5,"_98":248,"_18":249},{"_36":123,"_13":124,"_63":125,"_65":84,"_67":68,"_69":32,"_70":71,"_38":126,"_17":73,"_74":24,"_76":127,"_78":51,"_79":-5,"_98":246,"_18":247},{"_36":116,"_13":117,"_63":118,"_65":84,"_67":68,"_69":73,"_70":71,"_38":119,"_17":86,"_74":75,"_76":120,"_78":51,"_79":-5,"_98":244,"_18":245},{"_36":101,"_13":102,"_63":103,"_65":-5,"_67":68,"_69":73,"_70":71,"_38":104,"_17":86,"_74":24,"_76":105,"_78":51,"_79":-5,"_98":242,"_18":243},{"_36":92,"_13":93,"_63":94,"_65":-5,"_67":68,"_69":73,"_70":71,"_38":95,"_17":86,"_74":96,"_76":97,"_78":51,"_79":-5,"_98":240,"_18":241},[],[93],[],[102],[],[81,117],[],[81,124],[],[81,131],[],[81,82,62],[234],[81,82],[233,235,236,237],[81],["D",1784660155314],["D",1789560070146],{"_11":12,"_193":188},{"_11":12,"_187":188,"_189":188,"_152":153,"_190":191,"_192":51},{"_17":182,"_13":16,"_36":68,"_42":144,"_45":37,"_46":183,"_184":53,"_185":43,"_186":57,"_58":14,"_54":12},"ctx",{"_176":-5,"_212":294,"_295":296,"_297":298,"_299":51,"_300":51,"_301":51,"_302":71,"_303":-5,"_304":-7,"_305":-7,"_306":86,"_307":51,"_308":51,"_309":-5,"_310":51,"_311":51,"_312":51,"_313":-5},"ENV",{"_265":266,"_267":268,"_269":16,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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"]