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

\n \n \n \n",[118,109],"1ea8b3da4e18d579298229ba24af91b14b14ae02565f57c996f9acaa1f8333bc","frontend/components/App.tsx",{"_32":142,"_13":132,"_80":143,"_82":144,"_83":33,"_84":145,"_85":26,"_34":146,"_40":20,"_88":137,"_90":147,"_66":48,"_92":-5,"_93":-7,"_73":148,"_95":149},{"_32":131,"_13":132,"_80":133,"_82":134,"_83":58,"_84":135,"_85":26,"_34":136,"_40":87,"_88":137,"_90":138,"_66":48,"_92":-5,"_93":-7,"_73":139,"_95":140},"6882dd10-de73-4bd0-bda2-a0f2ed5c5534","App.tsx","019f0594-e762-709d-bcd4-dbf591fa996b","019f0594-e762-709d-bcd4-e076aae9ad15",3,["D",1782505146495],"script","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nconst COLOR_STYLES: Record = {\n yellow: { bg: \"bg-yellow-100 border-yellow-300\", dot: \"bg-yellow-400\", label: \"Yellow\" },\n green: { bg: \"bg-green-100 border-green-300\", dot: \"bg-green-500\", label: \"Green\" },\n blue: { bg: \"bg-blue-100 border-blue-300\", dot: \"bg-blue-400\", label: \"Blue\" },\n purple: { bg: \"bg-purple-100 border-purple-300\", dot: \"bg-purple-500\", label: \"Purple\" },\n};\n\nconst COLOR_ORDER = [\"yellow\", \"green\", \"blue\", \"purple\"];\n\ntype Group = { color: string; category: string; words: string[] };\ntype PuzzleResult = { puzzle_number: number; puzzle_date: string; groups: Group[] };\n\nfunction formatDate(dateStr: string): string {\n try {\n const d = new Date(dateStr + \"T12:00:00Z\");\n return d.toLocaleDateString(\"en-US\", { year: \"numeric\", month: \"long\", day: \"numeric\", timeZone: \"UTC\" });\n } catch {\n return dateStr;\n }\n}\n\nfunction highlight(text: string, query: string, mode: string): JSX.Element {\n if (!query) return <>{text};\n const needle = query.toLowerCase();\n const haystack = text.toLowerCase();\n if (mode === \"exact\") {\n if (haystack === needle) {\n return {text};\n }\n return <>{text};\n }\n const idx = haystack.indexOf(needle);\n if (idx === -1) return <>{text};\n return (\n <>\n {text.slice(0, idx)}\n {text.slice(idx, idx + query.length)}\n {text.slice(idx + query.length)}\n \n );\n}\n\nfunction PuzzleCard({ puzzle, query, mode }: { puzzle: PuzzleResult; query: string; mode: string }) {\n const sorted = [...puzzle.groups].sort((a, b) => {\n const ai = COLOR_ORDER.indexOf(a.color.toLowerCase());\n const bi = COLOR_ORDER.indexOf(b.color.toLowerCase());\n return (ai === -1 ? 99 : ai) - (bi === -1 ? 99 : bi);\n });\n\n return (\n

\n {formatDate(puzzle.puzzle_date)}, #{puzzle.puzzle_number}\n

\n {sorted.map((g) => {\n const style = COLOR_STYLES[g.color.toLowerCase()] ?? {\n bg: \"bg-gray-100 border-gray-300\",\n dot: \"bg-gray-400\",\n label: g.color,\n };\n return (\n

\n \n

\n {g.category}:\n {g.words.map((w, i) => (\n \n {highlight(w, query, mode)}\n {i < g.words.length - 1 ? \", \" : \"\"}\n \n ))}\n

\n );\n })}\n

\n );\n}\n\ntype Tab = \"search\" | \"add\";\n\nexport function App() {\n const [tab, setTab] = useState(\"search\");\n const [stats, setStats] = useState<{ puzzles: number; clues: number } | null>(null);\n\n useEffect(() => {\n fetch(\"/api/stats\")\n .then((r) => r.json())\n .then(setStats)\n .catch(console.error);\n }, [tab]);\n\n return (\n

\n {/* Header */}\n

\n 🔗 Connections Archive\n

\n Search all words from past NYT Connections puzzles\n

\n {stats && (\n

\n {stats.puzzles} puzzle{stats.puzzles !== 1 ? \"s\" : \"\"} · {stats.clues} clues archived\n

\n )}\n

\n\n {/* Tabs */}\n

\n {([\"search\", \"add\"] as Tab[]).map((t) => (\n setTab(t)}\n class={`flex-1 py-1.5 text-sm font-medium rounded-md transition-all capitalize ${\n tab === t ? \"bg-white text-gray-900 shadow-sm\" : \"text-gray-500 hover:text-gray-700\"\n }`}\n >\n {t === \"search\" ? \"🔍 Search\" : \"➕ Add Puzzle\"}\n \n ))}\n

\n\n {tab === \"search\" ? : setTab(\"search\")} />}\n

\n );\n}\n\nfunction SearchTab() {\n const [query, setQuery] = useState(\"\");\n const [mode, setMode] = useState<\"substring\" | \"exact\">(\"substring\");\n const [results, setResults] = useState(null);\n const [loading, setLoading] = useState(false);\n const inputRef = useRef(null);\n\n useEffect(() => {\n inputRef.current?.focus();\n }, []);\n\n async function search(q: string, m: string) {\n if (!q.trim()) { setResults(null); return; }\n setLoading(true);\n try {\n const r = await fetch(`/api/search?q=${encodeURIComponent(q)}&mode=${m}`);\n const data = await r.json();\n setResults(data.results);\n } finally {\n setLoading(false);\n }\n }\n\n function handleSubmit(e: Event) {\n e.preventDefault();\n search(query, mode);\n }\n\n function handleModeChange(m: \"substring\" | \"exact\") {\n setMode(m);\n if (results !== null) search(query, m);\n }\n\n return (\n

\n setQuery((e.target as HTMLInputElement).value)}\n placeholder=\"Search for a word…\"\n class=\"flex-1 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400\"\n />\n \n Search\n \n \n\n {/* Mode toggle */}\n

\n \n handleModeChange(\"substring\")}\n class=\"accent-blue-600\"\n />\n Substring match\n \n \n handleModeChange(\"exact\")}\n class=\"accent-blue-600\"\n />\n Exact match\n \n

\n\n {loading && (\n

Searching…

\n )}\n\n {!loading && results !== null && (\n

\n {results.length === 0\n ? `No puzzles found for \"${query}\"`\n : `${results.length} puzzle${results.length !== 1 ? \"s\" : \"\"} found for \"${query}\"`}\n

\n {results.map((p) => (\n \n ))}\n

\n )}\n\n {!loading && results === null && (\n

🔍

Type a word and hit Search

\n )}\n

\n );\n}\n\nfunction AddTab({ onAdded }: { onAdded: () => void }) {\n const [puzzleNumber, setPuzzleNumber] = useState(\"\");\n const [puzzleDate, setPuzzleDate] = useState(\"\");\n const [groups, setGroups] = useState([\n { color: \"yellow\", category: \"\", words: \"\" },\n { color: \"green\", category: \"\", words: \"\" },\n { color: \"blue\", category: \"\", words: \"\" },\n { color: \"purple\", category: \"\", words: \"\" },\n ]);\n const [status, setStatus] = useState<{ type: \"success\" | \"error\"; msg: string } | null>(null);\n const [loading, setLoading] = useState(false);\n\n async function handleSubmit(e: Event) {\n e.preventDefault();\n setStatus(null);\n setLoading(true);\n try {\n const payload = {\n puzzle_number: parseInt(puzzleNumber),\n puzzle_date: puzzleDate,\n groups: groups.map((g) => ({\n color: g.color,\n category: g.category.trim(),\n words: g.words.split(\",\").map((w) => w.trim().toUpperCase()).filter(Boolean),\n })),\n };\n const r = await fetch(\"/api/puzzles\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(payload),\n });\n const data = await r.json();\n if (!r.ok) throw new Error(data.error ?? \"Unknown error\");\n setStatus({ type: \"success\", msg: `Puzzle #${data.puzzle_number} added (${data.clues_inserted} clues)` });\n setPuzzleNumber(\"\");\n setPuzzleDate(\"\");\n setGroups([\n { color: \"yellow\", category: \"\", words: \"\" },\n { color: \"green\", category: \"\", words: \"\" },\n { color: \"blue\", category: \"\", words: \"\" },\n { color: \"purple\", category: \"\", words: \"\" },\n ]);\n } catch (err: unknown) {\n setStatus({ type: \"error\", msg: String(err) });\n } finally {\n setLoading(false);\n }\n }\n\n return (\n

\n Puzzle #\n setPuzzleNumber((e.target as HTMLInputElement).value)}\n required\n placeholder=\"e.g. 365\"\n class=\"w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400\"\n />\n

\n Date\n setPuzzleDate((e.target as HTMLInputElement).value)}\n required\n class=\"w-full border border-gray-300 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400\"\n />\n

\n\n {groups.map((g, i) => {\n const style = COLOR_STYLES[g.color] ?? { dot: \"bg-gray-400\", bg: \"\", label: g.color };\n return (\n

\n \n {g.color}\n

\n {\n const updated = [...groups];\n updated[i] = { ...g, category: (e.target as HTMLInputElement).value };\n setGroups(updated);\n }}\n required\n placeholder=\"Category name (e.g. TIGHTLY PACKED)\"\n class=\"w-full border border-gray-300 rounded-md px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400\"\n />\n {\n const updated = [...groups];\n updated[i] = { ...g, words: (e.target as HTMLInputElement).value };\n setGroups(updated);\n }}\n required\n placeholder=\"Words, comma-separated (e.g. COMPACT, DENSE, SQUASHED, COMPRESSED)\"\n class=\"w-full border border-gray-300 rounded-md px-2.5 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400\"\n />\n

\n );\n })}\n\n {status && (\n \n {status.msg}\n \n )}\n\n \n {loading ? \"Adding…\" : \"Add Puzzle\"}\n \n \n );\n}\n",[118,141,132],"94c2f494a5219f6463be9103532774f09a76f9d894412a0740dc6800704e7a56","components","5d7e5e30-3996-11f1-bbdd-42b51c65c3df","6e585892-f52b-11ef-a8e1-569c3dd06744","69ed66bc-f52b-11ef-9dac-569c3dd06744",75,["D",1776345339930],"/** @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",[118,141,132],"de0a7e5fc76c6fd6135aff964af1a5835e04e2758b23f3d0c7d9fabffe514df7",{"_73":162,"_75":-7,"_77":163},{"_73":152,"_75":-7,"_77":153},"scripts/import-archive.ts",{"_32":154,"_13":155,"_80":156,"_82":157,"_83":58,"_84":57,"_85":26,"_34":158,"_40":87,"_88":137,"_90":159,"_66":48,"_92":-5,"_93":-7,"_73":160,"_95":161},"38d5a21e-f302-4ada-97a4-89b65ebdbd07","import-archive.ts","a4e9dc34-719c-11f1-bc07-1607ee4eb77e","e5cbff70-cdda-4058-9573-63adeceb23e5",["D",1782505313591],"/**\n * Bulk import script: fetches all past NYT Connections puzzles from wordsrated.com\n * and POSTs each puzzle to the /api/puzzles endpoint.\n *\n * Run this once (or re-run safely — the API uses INSERT OR REPLACE).\n *\n * Usage: run this file as a Val Town script.\n */\n\nconst API_BASE = \"https://potluck--019f0594e762709dbcd4fba649db20e4.web.val.run\";\nconst SOURCE_URL = \"https://wordsrated.com/solvers/nyt-connections-archive-all-past-answers/\";\n\nconst COLOR_NAMES = [\"Yellow\", \"Green\", \"Blue\", \"Purple\"] as const;\nconst COLOR_KEYS = [\"yellow\", \"green\", \"blue\", \"purple\"] as const;\n\ntype PuzzlePayload = {\n puzzle_number: number;\n puzzle_date: string;\n groups: { color: string; category: string; words: string[] }[];\n};\n\n// Fetch the full page (it's ~300KB of text, need to paginate)\nasync function fetchFullPage(): Promise {\n const PAGE_SIZE = 50000;\n let text = \"\";\n let offset = 0;\n let hasMore = true;\n\n while (hasMore) {\n const url = `${SOURCE_URL}?_offset=${offset}`; // not a real param — we just need to loop\n const res = await fetch(SOURCE_URL, {\n headers: { \"User-Agent\": \"Mozilla/5.0 (compatible; archive-importer/1.0)\" },\n });\n if (!res.ok) throw new Error(`HTTP ${res.status} fetching source page`);\n const full = await res.text();\n text = full; // we get the whole thing each time; we'll chunk it ourselves\n hasMore = false; // fetch() gives us everything at once\n }\n\n return text;\n}\n\n// Strip HTML tags and decode common HTML entities\nfunction stripHtml(html: string): string {\n return html\n .replace(/<[^>]*>/g, \" \")\n .replace(/&/g, \"&\")\n .replace(/</g, \"<\")\n .replace(/>/g, \">\")\n .replace(/"/g, '\"')\n .replace(/'/g, \"'\")\n .replace(/’/g, \"'\")\n .replace(/“/g, '\"')\n .replace(/”/g, '\"')\n .replace(/ /g, \" \")\n .replace(/\\s+/g, \" \")\n .trim();\n}\n\n// Convert a date string like \"June 25, 2026\" to \"2026-06-25\"\nfunction parseDate(dateStr: string): string {\n const months: Record = {\n January: \"01\", February: \"02\", March: \"03\", April: \"04\",\n May: \"05\", June: \"06\", July: \"07\", August: \"08\",\n September: \"09\", October: \"10\", November: \"11\", December: \"12\",\n };\n const m = dateStr.match(/(\\w+)\\s+(\\d+),\\s+(\\d{4})/);\n if (!m) throw new Error(`Can't parse date: ${dateStr}`);\n const [, month, day, year] = m;\n return `${year}-${months[month]}-${day.padStart(2, \"0\")}`;\n}\n\nfunction parsePuzzles(text: string): PuzzlePayload[] {\n const puzzles: PuzzlePayload[] = [];\n\n // Each puzzle block looks like:\n // \"Month Day, Year, #NUMBER Yellow Group: CATEGORY: WORD, WORD ... Purple Group: CATEGORY: WORD, WORD\"\n // We split on the date+number pattern\n const puzzlePattern =\n /(\\w+ \\d+, \\d{4}),\\s*#(\\d+)\\s+(Yellow Group:.*?Purple Group:.*?)(?=(?:\\w+ \\d+, \\d{4}),\\s*#\\d+|$)/gs;\n\n let match: RegExpExecArray | null;\n while ((match = puzzlePattern.exec(text)) !== null) {\n const [, dateStr, numStr, body] = match;\n\n let puzzle_date: string;\n try {\n puzzle_date = parseDate(dateStr);\n } catch {\n console.warn(`Skipping puzzle #${numStr}: bad date \"${dateStr}\"`);\n continue;\n }\n\n const puzzle_number = parseInt(numStr, 10);\n const groups: PuzzlePayload[\"groups\"] = [];\n\n for (let i = 0; i < COLOR_NAMES.length; i++) {\n const color = COLOR_NAMES[i];\n const colorKey = COLOR_KEYS[i];\n const nextColor = COLOR_NAMES[i + 1] ? `${COLOR_NAMES[i + 1]} Group:` : \"$\";\n\n // Match \"Yellow Group: CATEGORY: WORD, WORD, WORD, WORD\"\n const groupRe = new RegExp(\n `${color} Group:\\\\s*([^:]+?):\\\\s*(.*?)(?=${nextColor}|$)`,\n \"s\",\n );\n const gm = body.match(groupRe);\n if (!gm) {\n console.warn(`Puzzle #${puzzle_number}: missing ${color} group`);\n continue;\n }\n\n const category = gm[1].trim();\n const wordsRaw = gm[2].trim();\n const words = wordsRaw\n .split(\",\")\n .map((w) => w.trim())\n .filter((w) => w.length > 0);\n\n if (words.length === 0) {\n console.warn(`Puzzle #${puzzle_number}: ${color} group has no words (skipping group)`);\n continue;\n }\n\n groups.push({ color: colorKey, category, words });\n }\n\n if (groups.length < 4) {\n console.warn(`Puzzle #${puzzle_number}: only ${groups.length}/4 groups parsed — skipping`);\n continue;\n }\n\n puzzles.push({ puzzle_number, puzzle_date, groups });\n }\n\n return puzzles;\n}\n\nasync function importPuzzle(puzzle: PuzzlePayload): Promise {\n const res = await fetch(`${API_BASE}/api/puzzles`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(puzzle),\n });\n if (!res.ok) {\n const text = await res.text();\n console.error(`Failed #${puzzle.puzzle_number}: HTTP ${res.status} — ${text}`);\n return false;\n }\n return true;\n}\n\n// Main\nconsole.log(\"Fetching archive page...\");\nconst html = await fetchFullPage();\nconst text = stripHtml(html);\n\nconsole.log(`Page fetched (${text.length} chars). Parsing puzzles...`);\nconst puzzles = parsePuzzles(text);\nconsole.log(`Found ${puzzles.length} puzzles. Importing...`);\n\nlet imported = 0;\nlet failed = 0;\nlet skipped = 0;\n\n// Check which puzzles are already in the DB\nconst statsRes = await fetch(`${API_BASE}/api/stats`);\nconst stats = await statsRes.json();\nconst alreadyHas = (stats.puzzles as number) > 0;\n\nif (alreadyHas) {\n console.log(`DB already has ${stats.puzzles} puzzles. Re-importing all (INSERT OR REPLACE)...`);\n}\n\n// Import in batches to avoid hammering the API\nconst BATCH = 20;\nfor (let i = 0; i < puzzles.length; i += BATCH) {\n const batch = puzzles.slice(i, i + BATCH);\n await Promise.all(\n batch.map(async (p) => {\n const ok = await importPuzzle(p);\n if (ok) imported++;\n else failed++;\n }),\n );\n console.log(`Progress: ${Math.min(i + BATCH, puzzles.length)}/${puzzles.length}`);\n}\n\nconsole.log(`\\n✅ Done!`);\nconsole.log(` Imported: ${imported}`);\nconsole.log(` Failed: ${failed}`);\nconsole.log(` Skipped (parse): ${puzzles.length - imported - failed + skipped}`);\n\nconst finalStats = await fetch(`${API_BASE}/api/stats`).then((r) => r.json());\nconsole.log(`\\nDB now has ${finalStats.puzzles} puzzles, ${finalStats.clues} clues.`);\n",[162,155],"826b077daf71f482a8867d940628120b07e2b048b8c7e4bb74cc37e156246491","scripts",{"_32":164,"_13":162,"_80":157,"_82":-5,"_83":58,"_84":20,"_85":26,"_34":165,"_40":166,"_88":167,"_90":-5,"_66":48,"_92":-5,"_93":-7,"_73":168,"_95":-5},"444b1995-5c2a-49ec-a410-cd94c5ac0162",["D",1782505302068],0,"directory",[162],["D",1782505072423],"legacyEnvVars","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789541999&sig=8fad4d8ed521ff338d1e7bb443f46241d1f9e0e657d24a41f82306e6eb92823c","userId","4672fa32-1c6f-4907-899e-57b7e45b1dcb","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019e83d1-d41f-725b-9693-b632d430a029","tursoName","fcd5a5658cff4b4a886ec6decfe884f2","tursoHostname","fcd5a5658cff4b4a886ec6decfe884f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789500689328],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_212":208},"org",{"_11":12,"_205":206,"_207":208,"_176":177,"_209":210,"_211":48},"branch","displayName","Potluck Mittal","avatar","https://lh3.googleusercontent.com/a/ACg8ocJYeiSQ8_eyVYtUAg9f5qRwEXzS1AreFm572a1csvZx7c6b_S8=s96-c","tier","pro","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":59,"_13":14,"_34":319,"_46":-5,"_170":48,"_49":50,"_171":50,"_172":173,"_174":175,"_176":177,"_178":81,"_179":26,"_180":-5,"_181":-5,"_182":166,"_53":183,"_184":185,"_186":187,"_188":320,"_190":-5,"_191":192,"_193":192,"_194":195,"_196":195,"_197":195,"_198":192,"_199":192,"_200":321,"_202":322,"_204":323,"_47":48},"tree",[267,274,276,277],"files",[267,268,269,270,271,272,273,274,275,276,277],"counts",{"_257":166,"_258":87,"_259":166,"_260":261,"_262":263},"contents",[240,241,242,243],"upstreamProject",{"_32":39,"_13":56,"_172":173,"_174":175,"_49":50,"_200":238},"upstreamBranch",{"_32":33,"_34":236,"_36":237,"_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],{"_11":52,"_212":239},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789541999&sig=156ae2b8ac752fc06f52d45eab428b512e0d31e2aab99a830d8bb32149c64f0f",{"_32":254,"_13":118,"_80":111,"_82":-5,"_83":58,"_84":87,"_85":26,"_34":255,"_40":166,"_88":167,"_90":-5,"_66":48,"_92":-5,"_73":256},{"_32":164,"_13":162,"_80":157,"_82":-5,"_83":58,"_84":20,"_85":26,"_34":252,"_40":166,"_88":167,"_90":-5,"_66":48,"_92":-5,"_73":253},{"_32":246,"_13":247,"_80":248,"_82":-5,"_83":58,"_84":87,"_85":26,"_34":249,"_40":166,"_88":114,"_90":250,"_66":48,"_92":-5,"_73":251},{"_32":79,"_13":74,"_80":81,"_82":-5,"_83":58,"_84":22,"_85":26,"_34":244,"_40":87,"_88":89,"_90":91,"_66":48,"_92":-5,"_73":245},["D",1782505098026],[74],"96542375-b3d3-4e0c-bdce-83069b926fd9","README.md","019f0594-e762-709d-bcd4-f5173084ebc7",["D",1782505072423],"# 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",[247],["D",1782505302068],[162],"3b06a731-899f-40e0-b822-fb8f63345e17",["D",1782505072423],[118],"pulls","branches","forks","envVars",{"_264":166,"_266":166},"connections",{"_264":166,"_265":166},"count","unfilledCount","emptyCount",{"_32":254,"_13":118,"_80":111,"_82":-5,"_83":58,"_84":87,"_85":26,"_34":316,"_40":166,"_88":167,"_90":-5,"_66":48,"_92":-5,"_93":317,"_73":318},{"_32":312,"_13":141,"_80":134,"_82":111,"_83":58,"_84":87,"_85":26,"_34":313,"_40":166,"_88":167,"_90":-5,"_66":48,"_92":-5,"_93":314,"_73":315},{"_32":131,"_13":132,"_80":133,"_82":134,"_83":58,"_84":135,"_85":26,"_34":136,"_40":87,"_88":137,"_90":138,"_66":48,"_92":-5,"_93":310,"_73":311},{"_32":303,"_13":304,"_80":305,"_82":134,"_83":58,"_84":87,"_85":26,"_34":306,"_40":166,"_88":137,"_90":307,"_66":48,"_92":-5,"_93":308,"_73":309},{"_32":296,"_13":297,"_80":298,"_82":111,"_83":58,"_84":87,"_85":26,"_34":299,"_40":166,"_88":114,"_90":300,"_66":48,"_92":-5,"_93":301,"_73":302},{"_32":108,"_13":109,"_80":110,"_82":111,"_83":58,"_84":112,"_85":26,"_34":113,"_40":87,"_88":114,"_90":115,"_66":48,"_92":-5,"_93":294,"_73":295},{"_32":287,"_13":288,"_80":289,"_82":111,"_83":58,"_84":87,"_85":26,"_34":290,"_40":166,"_88":137,"_90":291,"_66":48,"_92":-5,"_93":292,"_73":293},{"_32":164,"_13":162,"_80":157,"_82":-5,"_83":58,"_84":20,"_85":26,"_34":165,"_40":166,"_88":167,"_90":-5,"_66":48,"_92":-5,"_93":285,"_73":286},{"_32":154,"_13":155,"_80":156,"_82":157,"_83":58,"_84":57,"_85":26,"_34":158,"_40":87,"_88":137,"_90":159,"_66":48,"_92":-5,"_93":283,"_73":284},{"_32":246,"_13":247,"_80":248,"_82":-5,"_83":58,"_84":87,"_85":26,"_34":280,"_40":166,"_88":114,"_90":250,"_66":48,"_92":-5,"_93":281,"_73":282},{"_32":79,"_13":74,"_80":81,"_82":-5,"_83":58,"_84":22,"_85":26,"_34":86,"_40":87,"_88":89,"_90":91,"_66":48,"_92":-5,"_93":278,"_73":279},[],[74],["D",1782505072423],[],[247],[],[162,155],[275],[162],"f53584c0-101e-4fcb-92c6-998a9675f4ae","index.tsx","019f0594-e762-709d-bcd4-eee68a14b224",["D",1782505072423],"/** @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();",[],[118,288],[],[118,109],"d1a572f3-1a50-40a4-bd9b-2fd0f15e94fd","favicon.svg","019f0594-e762-709d-bcd4-e5248efd08af",["D",1782505072423],"\n",[],[118,297],"aa85801a-6b8c-48d0-9478-5745e06089b5","Counter.tsx","019f0594-e762-709d-bcd4-df3bad74b386",["D",1782505072423],"/** @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",[],[118,141,304],[],[118,141,132],"99a38126-ca12-44bc-b88f-bc015696ea5b",["D",1782505072423],[269,270],[118,141],["D",1782505072423],[268,271,272,273],[118],["D",1782505072423],["D",1789500689328],{"_11":12,"_212":208},{"_11":12,"_205":206,"_207":208,"_176":177,"_209":210,"_211":48},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"ctx",{"_200":-5,"_233":357,"_358":359,"_360":361,"_362":48,"_363":48,"_364":48,"_365":26,"_366":-5,"_367":-7,"_368":-7,"_369":166,"_370":48,"_371":48,"_372":-5,"_373":48,"_374":48,"_375":48,"_376":-5},"ENV",{"_328":329,"_330":331,"_332":16,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342,"_343":344,"_345":346,"_347":348,"_349":350,"_351":352,"_353":354,"_355":356},"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

Mergepotluck/mainintotemplates/main

frontend/components/App.tsx+365-7

frontend/index.html+3-3

Hindex.ts+187-12

scripts

scripts/import-archive.ts+195-0