[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_266":267,"_268":269},"routes/_app.x.$handle.$name",{"_110":109,"_38":50,"_119":96,"_33":120,"_13":14,"_121":-5,"_11":122,"_123":124,"_125":126,"_127":128,"_129":130,"_26":-5,"_131":132,"_133":134,"_135":31,"_136":137,"_138":65,"_139":-5,"_140":-5,"_141":142},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_38":50,"_43":51,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":60,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":89,"_90":91,"_92":93,"_94":31},"version",9,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","e7609a39-0da4-417e-9569-3611a96a0310","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":26,"_40":42,"_43":44,"_45":14,"_46":47,"_30":31},"previous",{"_36":37,"_38":34,"_39":26,"_40":41},"deleted",false,"deletedHere","path","README.md","latestPath","fileId","019f75bb-9063-75ee-b202-18a78a20caea","name","fileType","content","# 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","# Sorry Letter 💔\n\nA heartfelt, interactive apology letter served as a beautiful web page.\n\n## Features\n\n- 💌 **Envelope intro** — click to open the letter\n- 📝 **Heartfelt letter** — a sincere, emotional apology\n- 💖 **Floating hearts** — animated background of drifting hearts\n- 🫶 **Forgiveness button** — let them respond with a click\n- 🎀 **Soft rose theme** — warm, gentle design throughout\n\n## File structure\n\n```\nindex.ts ← Hono server (serves frontend)\nfrontend/\n index.html ← HTML shell (Twind + React)\n index.tsx ← React entrypoint\n favicon.svg ← Heart favicon\n components/\n App.tsx ← Root: envelope → letter flow\n Letter.tsx ← The sorry letter + forgiveness button\n FloatingHearts.tsx ← Animated background hearts\n```\n\n## Live URL\n\nClick the link below to see the letter in action.\n","createdAt",["D",1784386695386],"branchVersion","branchId","72d8e0f9-bd8e-40b3-aa72-bd16d5b8c098","id","689c958e-07c0-4ba0-9ad2-fa197cfead3a","sorry-letter",["D",1784386654250],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","A heartfelt sorry letter with a beautiful interactive UI","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789534799&sig=2fe932419d898cd124d0961cab25a5a9c3bd76c8b30cb3b9e71257c7b34e60a2","90c30498-250f-4d8e-b70a-c5ea86c433ea","pinnedFileId","019f75bb-9063-75ee-b202-1fe7b0782281","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019f75b9-4643-71ac-ba1a-071f31561f4e","tursoName","689c958e07c04ba09ad2fa197cfead3a","tursoHostname","689c958e07c04ba09ad2fa197cfead3a-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789472446807],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_110":109,"_118":114},"org",{"_110":109,"_111":112,"_113":114,"_19":61,"_115":116,"_117":31},"branch",{"_13":95,"_38":96,"_48":47,"_97":49,"_98":99,"_100":101,"_102":55,"_103":104,"_105":106,"_107":50,"_108":109},"isOwned",13,"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","Zaishin","handle","displayName","Niña Zaira Paez","avatar","https://lh3.googleusercontent.com/a/ACg8ocLlY7VGiD72Ed0SbJRbud9yfC3MqUu6CJ9M6DjJLDZsys4IWyEH=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_38":50,"_43":261,"_52":-5,"_53":31,"_54":55,"_56":55,"_57":58,"_59":60,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":262,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":263,"_90":264,"_92":265,"_94":31},"tree",[186,194,195],"files",[186,187,188,189,190,191,192,193,194,195],"counts",{"_176":69,"_177":160,"_178":69,"_179":180,"_181":182},"contents",[154,155,156],"upstreamProject",{"_48":104,"_38":150,"_57":151,"_59":60,"_54":55,"_88":152},"upstreamBranch",{"_48":99,"_43":143,"_144":145,"_38":96,"_97":104,"_13":146,"_98":-5,"_100":-5,"_147":148,"_52":-5,"_94":31,"_54":55,"_108":149,"_70":106,"_107":150},"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",{"_110":149,"_118":153},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789534799&sig=94d49ad984a50880ef894a3794e08842e7b9b626be771ff48da114d7d9a149ed",{"_48":170,"_38":171,"_36":172,"_159":-5,"_46":47,"_45":160,"_161":65,"_43":173,"_13":69,"_39":174,"_40":-5,"_30":31,"_165":-5,"_33":175},{"_48":167,"_38":34,"_36":37,"_159":-5,"_46":47,"_45":14,"_161":31,"_43":168,"_13":160,"_39":26,"_40":42,"_30":31,"_165":-5,"_33":169},{"_48":157,"_38":158,"_36":63,"_159":-5,"_46":47,"_45":160,"_161":65,"_43":162,"_13":69,"_39":163,"_40":164,"_30":31,"_165":-5,"_33":166},"14873ba2-401f-4ca0-8367-9516d8b7f861","index.ts","parentId",1,"latest",["D",1784386654250],"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","label",[158],"8b9d812f-0248-48ab-8ef2-1d577fd69091",["D",1784386695386],[34],"17e3737f-7347-4041-b27d-534bf0cfca19","frontend","019f75bb-9063-75ee-b202-14ae6155f65e",["D",1784386654250],"directory",[171],"pulls","branches","forks","envVars",{"_183":69,"_185":69},"connections",{"_183":69,"_184":69},"count","unfilledCount","emptyCount",{"_48":170,"_38":171,"_36":172,"_159":-5,"_46":47,"_45":160,"_161":65,"_43":258,"_13":69,"_39":174,"_40":-5,"_30":31,"_165":-5,"_197":259,"_33":260},{"_48":254,"_38":236,"_36":230,"_159":172,"_46":47,"_45":160,"_161":65,"_43":255,"_13":69,"_39":174,"_40":-5,"_30":31,"_165":-5,"_197":256,"_33":257},{"_48":245,"_38":246,"_36":247,"_159":230,"_46":47,"_45":248,"_161":31,"_43":249,"_13":250,"_39":207,"_40":251,"_30":31,"_165":-5,"_197":252,"_33":253},{"_48":237,"_38":238,"_36":239,"_159":230,"_46":47,"_45":240,"_161":31,"_43":241,"_13":69,"_39":207,"_40":242,"_30":31,"_165":-5,"_197":243,"_33":244},{"_48":227,"_38":228,"_36":229,"_159":230,"_46":47,"_45":231,"_161":31,"_43":232,"_13":69,"_39":207,"_40":233,"_30":31,"_165":-5,"_197":234,"_33":235},{"_48":219,"_38":220,"_36":221,"_159":172,"_46":47,"_45":222,"_161":65,"_43":223,"_13":160,"_39":26,"_40":224,"_30":31,"_165":-5,"_197":225,"_33":226},{"_48":211,"_38":212,"_36":213,"_159":172,"_46":47,"_45":214,"_161":65,"_43":215,"_13":160,"_39":26,"_40":216,"_30":31,"_165":-5,"_197":217,"_33":218},{"_48":203,"_38":204,"_36":205,"_159":172,"_46":47,"_45":160,"_161":65,"_43":206,"_13":69,"_39":207,"_40":208,"_30":31,"_165":-5,"_197":209,"_33":210},{"_48":167,"_38":34,"_36":37,"_159":-5,"_46":47,"_45":14,"_161":31,"_43":200,"_13":160,"_39":26,"_40":42,"_30":31,"_165":-5,"_197":201,"_33":202},{"_48":157,"_38":158,"_36":63,"_159":-5,"_46":47,"_45":160,"_161":65,"_43":196,"_13":69,"_39":163,"_40":164,"_30":31,"_165":-5,"_197":198,"_33":199},["D",1784386654250],"children",[],[158],["D",1784386695386],[],[34],"6fa119b4-e75a-4159-af7d-beace07f0bc3","index.tsx","019f75bb-9063-75ee-b202-130fd282fe7d",["D",1784386654250],"script","/** @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();",[],[171,204],"aa8e8f0d-7e3a-4367-900a-913dd54b75cb","index.html","019f75bb-9063-75ee-b202-0d9cabdaac96",3,["D",1784386664631],"\n\n \n \n \n I'm Sorry 💔\n \n \n \n \n

\n \n \n \n\n",[],[171,212],"ec650fd3-68bb-4522-9a6b-8007512f3bd4","favicon.svg","019f75bb-9063-75ee-b202-096378e85123",4,["D",1784386664633],"\n\n",[],[171,220],"91f8b7d1-4c6b-4040-baf5-264a6b90981a","Letter.tsx","146c506e-82b9-11f1-899c-1607ee4eb77e","019f75bb-9063-75ee-b202-06aa373a6f9e",6,["D",1784386684794],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Letter() {\n const [forgiven, setForgiven] = useState(false);\n\n return (\n \n \n\n {/* Letter card */}\n

\n {/* Wax seal */}\n

\n ❤\n

\n\n {/* Header */}\n

A Letter from the Heart

\n \n ✦\n \n

\n\n {/* Letter body */}\n

Dear you,

\n\n

\n I've been thinking a lot about what happened, and I want you to know\n that I am truly, deeply sorry. Not the kind of sorry that brushes\n things under the rug — but the kind that sits with you at 2 AM and\n wishes it could rewind time.\n

\n\n

\n I know that I hurt you, and that's the last thing I ever wanted to\n do. You mean more to me than my pride, more than being right, more\n than any argument we could ever have. I see that now — clearly.\n

\n\n

\n I'm not asking you to forget. I'm not even asking you to forgive me\n right now. I'm just asking you to know that every single word\n here is real. You deserve honesty, and this is mine: I messed\n up, I own it, and I want to do better — for you, and for us.\n

\n\n

\n If you're reading this, it means you opened the envelope. That alone\n gives me hope. Thank you for that. Thank you for still being here,\n even when I didn't make it easy.\n

\n\n

\n I'll wait. However long it takes. Because some things — some\n people — are worth being patient for.\n

\n\n

\n Forever yours,\n
\n Me 💗\n

\n\n {/* Divider */}\n

\n \n 🤍\n \n

\n\n {/* Forgiveness button */}\n {!forgiven ? (\n

\n setForgiven(true)}\n class=\"bg-rose-500 hover:bg-rose-600 text-white font-medium px-8 py-3 rounded-full transition-all hover:scale-105 cursor-pointer shadow-lg shadow-rose-200\"\n >\n I forgive you 🫶\n \n

\n no pressure — only if you mean it\n

\n ) : (\n \n

🥹💕

\n Thank you. I promise to be better.\n

\n ❤️🧡💛💚💙💜\n

\n )}\n \n \n );\n}\n",[],[171,236,228],"components","1335cf29-0b1d-4ef3-9cd6-e8d27dddeab9","FloatingHearts.tsx","1465cba4-82b9-11f1-b8d8-1607ee4eb77e",5,["D",1784386684787],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ninterface Heart {\n id: number;\n left: number;\n size: number;\n duration: number;\n delay: number;\n emoji: string;\n}\n\nconst HEART_EMOJIS = [\"💜\", \"💛\", \"🤍\", \"💙\", \"🤎\", \"💖\", \"💕\"];\n\nexport function FloatingHearts() {\n const [hearts, setHearts] = useState([]);\n\n useEffect(() => {\n const generated: Heart[] = Array.from({ length: 18 }, (_, i) => ({\n id: i,\n left: Math.random() * 100,\n size: 14 + Math.random() * 22,\n duration: 6 + Math.random() * 8,\n delay: Math.random() * 8,\n emoji: HEART_EMOJIS[Math.floor(Math.random() * HEART_EMOJIS.length)],\n }));\n setHearts(generated);\n }, []);\n\n return (\n <>\n \n

\n {hearts.map((h) => (\n \n {h.emoji}\n \n ))}\n

\n \n );\n}\n",[],[171,236,238],"24ed195a-d21a-45af-ad06-4d3736d368bb","App.tsx","019f75bb-9063-75ee-b201-fe73f6fd7eec",8,["D",1784386687159],2,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { Letter } from \"./Letter.tsx\";\nimport { FloatingHearts } from \"./FloatingHearts.tsx\";\n\nexport function App() {\n const [opened, setOpened] = useState(false);\n\n return (\n

\n \n\n {!opened ? (\n

setOpened(true)}>\n

💌

You have a letter...

click to open

\n ) : (\n \n )}\n\n

\n view source\n

\n );\n}\n",[],[171,236,246],"3fb7b2c2-eddd-4a0c-b605-01ef7e063bfe",["D",1784386654250],[188,189,190],[171,236],["D",1784386654250],[187,191,192,193],[171],["D",1784386654250],["D",1789472446807],{"_110":109,"_118":114},{"_110":109,"_111":112,"_113":114,"_19":61,"_115":116,"_117":31},{"_13":95,"_38":96,"_48":47,"_97":49,"_98":99,"_100":101,"_102":55,"_103":104,"_105":106,"_107":50,"_108":109},"ctx",{"_88":-5,"_140":299,"_300":301,"_302":303,"_304":31,"_305":31,"_306":31,"_307":65,"_308":-5,"_309":-7,"_310":-7,"_311":69,"_312":31,"_313":31,"_314":-5,"_315":31,"_316":31,"_317":31,"_318":-5},"ENV",{"_270":271,"_272":273,"_274":96,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292,"_293":294,"_295":296,"_297":298},"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 · v9