\n \n \n \n","label",[159,64],"frontend","pulls","branches","forks","envVars",{"_167":26,"_169":26},"connections",{"_167":26,"_168":26},"count","unfilledCount","emptyCount",{"_33":239,"_13":159,"_62":150,"_43":-5,"_35":36,"_151":199,"_152":144,"_37":240,"_39":26,"_65":236,"_155":-5,"_66":24,"_157":-5,"_186":241,"_17":242},{"_33":234,"_13":225,"_62":219,"_43":150,"_35":36,"_151":220,"_152":144,"_37":235,"_39":26,"_65":236,"_155":-5,"_66":24,"_157":-5,"_186":237,"_17":238},{"_33":226,"_13":227,"_62":228,"_43":219,"_35":36,"_151":113,"_152":144,"_37":229,"_39":230,"_65":201,"_155":231,"_66":24,"_157":-5,"_186":232,"_17":233},{"_33":216,"_13":217,"_62":218,"_43":219,"_35":36,"_151":220,"_152":144,"_37":221,"_39":26,"_65":201,"_155":222,"_66":24,"_157":-5,"_186":223,"_17":224},{"_33":208,"_13":209,"_62":210,"_43":150,"_35":36,"_151":211,"_152":144,"_37":212,"_39":26,"_65":21,"_155":213,"_66":24,"_157":-5,"_186":214,"_17":215},{"_33":149,"_13":64,"_62":63,"_43":150,"_35":36,"_151":72,"_152":144,"_37":205,"_39":154,"_65":21,"_155":156,"_66":24,"_157":-5,"_186":206,"_17":207},{"_33":196,"_13":197,"_62":198,"_43":150,"_35":36,"_151":199,"_152":144,"_37":200,"_39":26,"_65":201,"_155":202,"_66":24,"_157":-5,"_186":203,"_17":204},{"_33":189,"_13":190,"_62":191,"_43":-5,"_35":36,"_151":154,"_152":144,"_37":192,"_39":26,"_65":21,"_155":193,"_66":24,"_157":-5,"_186":194,"_17":195},{"_33":179,"_13":180,"_62":181,"_43":-5,"_35":36,"_151":182,"_152":144,"_37":183,"_39":26,"_65":184,"_155":185,"_66":24,"_157":-5,"_186":187,"_17":188},"6b42efbf-a420-41f1-bb93-4a3f5dd4225b","index.ts","3c6adfb0-7a3d-11f1-bfdf-1607ee4eb77e",3,["D",1783453884986],"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",[],[180],"4e0a35f7-372a-4567-ae23-0abfafb63fa0","README.md","3bd96a1c-7a3d-11f1-b662-1607ee4eb77e",["D",1783453884081],"# 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",[],[190],"ad65176d-1aa2-4e70-a465-60a4f43ed917","index.tsx","3c38b224-7a3d-11f1-ae23-1607ee4eb77e",2,["D",1783453884595],"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();",[],[159,197],["D",1783453916527],[],[159,64],"c3347841-2d46-470a-9f60-fe216b1b6f20","favicon.svg","3ca83a9a-7a3d-11f1-8c49-1607ee4eb77e",5,["D",1783453885404],"\n",[],[159,209],"f3511648-241c-4b3d-bb39-8386e0084ea0","Counter.tsx","3d6bfa20-7a3d-11f1-9f00-1607ee4eb77e","51a74af2-096f-4834-90e8-5d15f96fcf3e",6,["D",1783453886427],"/** @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",[],[159,225,217],"components","bfe3b7c6-e4d2-4dff-864f-d7b3f3053bc0","App.tsx","3d945b46-7a3d-11f1-a65a-1607ee4eb77e",["D",1783453991511],8,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState, useCallback, useRef } from \"https://esm.sh/react@18.2.0\";\n\n// ────────────────────────────────────────────────────────────────────────────\n// Types & constants\n// ────────────────────────────────────────────────────────────────────────────\n\ninterface Note {\n id: string;\n body: string;\n updatedAt: number; // epoch ms (UTC)\n}\n\nconst PASSWORD = \"my-notes-are-mine\";\nconst STORAGE_KEY = \"notes-app-notes-v1\";\nconst PLACEHOLDER_TITLE = \"New Note\";\n\n// ────────────────────────────────────────────────────────────────────────────\n// Helpers\n// ────────────────────────────────────────────────────────────────────────────\n\nfunction uid(): string {\n return Date.now().toString(36) + Math.random().toString(36).slice(2, 8);\n}\n\nfunction pad2(n: number): string {\n return n < 10 ? \"0\" + n : String(n);\n}\n\nfunction formatTimestamp(epochMs: number): string {\n const d = new Date(epochMs);\n const y = d.getUTCFullYear();\n const mo = pad2(d.getUTCMonth() + 1);\n const da = pad2(d.getUTCDate());\n const h = pad2(d.getUTCHours());\n const mi = pad2(d.getUTCMinutes());\n return `${y}-${mo}-${da} ${h}:${mi}`;\n}\n\nfunction noteTitle(body: string): string {\n const lines = body.split(\"\\n\");\n for (const line of lines) {\n const trimmed = line.trim();\n if (trimmed) return trimmed;\n }\n return PLACEHOLDER_TITLE;\n}\n\nfunction notePreview(body: string): string {\n const lines = body.split(\"\\n\");\n let foundTitle = false;\n for (const line of lines) {\n const trimmed = line.trim();\n if (trimmed) {\n if (!foundTitle) {\n foundTitle = true;\n continue;\n }\n // first non-empty line after the title line\n const single = trimmed.replace(/\\s+/g, \" \");\n return single.length > 80 ? single.slice(0, 80) + \"…\" : single;\n }\n }\n return \"\";\n}\n\nfunction loadNotes(): Note[] {\n try {\n const raw = localStorage.getItem(STORAGE_KEY);\n if (!raw) return [];\n const parsed = JSON.parse(raw);\n if (!Array.isArray(parsed)) return [];\n return parsed.filter((n: any) => n && typeof n.id === \"string\" && typeof n.body === \"string\" && typeof n.updatedAt === \"number\");\n } catch {\n return [];\n }\n}\n\nfunction saveNotes(notes: Note[]): void {\n localStorage.setItem(STORAGE_KEY, JSON.stringify(notes));\n}\n\n// Simple hash router\nfunction getHash(): string {\n return window.location.hash.replace(/^#/, \"\") || \"/\";\n}\n\nfunction navigate(hash: string): void {\n window.location.hash = hash;\n}\n\n// ────────────────────────────────────────────────────────────────────────────\n// Password Gate\n// ────────────────────────────────────────────────────────────────────────────\n\nfunction PasswordGate({ onUnlock }: { onUnlock: () => void }) {\n const [value, setValue] = useState(\"\");\n const [error, setError] = useState(\"\");\n\n const submit = useCallback((e?: any) => {\n if (e) e.preventDefault();\n if (!value.trim()) {\n setError(\"Password is required\");\n return;\n }\n if (value !== PASSWORD) {\n setError(\"Incorrect password\");\n return;\n }\n setError(\"\");\n onUnlock();\n }, [value]);\n\n return (\n

\n );\n}\n\n// ────────────────────────────────────────────────────────────────────────────\n// Notes List View\n// ────────────────────────────────────────────────────────────────────────────\n\nfunction NotesList({\n notes,\n search,\n setSearch,\n onOpen,\n onNew,\n onDelete,\n}: {\n notes: Note[];\n search: string;\n setSearch: (s: string) => void;\n onOpen: (id: string) => void;\n onNew: () => void;\n onDelete: (id: string) => void;\n}) {\n const q = search.trim().toLowerCase();\n const filtered = q\n ? notes.filter(\n (n) =>\n noteTitle(n.body).toLowerCase().includes(q) ||\n n.body.toLowerCase().includes(q)\n )\n : notes;\n const sorted = [...filtered].sort((a, b) => b.updatedAt - a.updatedAt);\n\n return (\n

My Notes

\n \n + New Note\n \n

\n setSearch(e.target.value)}\n />\n {sorted.length === 0 ? (\n

\n {q ? \"No matching notes.\" : \"No notes yet. Create one to get started.\"}\n

\n ) : (\n

onOpen(n.id)}\n >\n

{noteTitle(n.body)}

\n {notePreview(n.body) && (\n

{notePreview(n.body)}

\n )}\n

{formatTimestamp(n.updatedAt)}

\n {\n e.stopPropagation();\n onDelete(n.id);\n }}\n >\n Delete\n \n \n ))}\n

\n )}\n

\n );\n}\n\n// ────────────────────────────────────────────────────────────────────────────\n// Editor View\n// ────────────────────────────────────────────────────────────────────────────\n\nfunction NoteEditor({\n note,\n onChange,\n onBack,\n onDelete,\n}: {\n note: Note;\n onChange: (body: string) => void;\n onBack: () => void;\n onDelete: (id: string) => void;\n}) {\n const textareaRef = useRef(null);\n\n useEffect(() => {\n if (textareaRef.current) {\n textareaRef.current.focus();\n }\n }, []);\n\n return (\n

\n \n ← Back\n \n onDelete(note.id)}\n class=\"text-red-500 hover:text-red-700 font-medium\"\n >\n Delete\n \n

\n onChange(e.target.value)}\n />\n

\n Last edited: {formatTimestamp(note.updatedAt)}\n

\n );\n}\n\n// ────────────────────────────────────────────────────────────────────────────\n// Confirm Dialog\n// ────────────────────────────────────────────────────────────────────────────\n\nfunction ConfirmDialog({\n message,\n onCancel,\n onConfirm,\n}: {\n message: string;\n onCancel: () => void;\n onConfirm: () => void;\n}) {\n return (\n

{message}

\n \n Cancel\n \n \n Delete\n \n

\n );\n}\n\n// ────────────────────────────────────────────────────────────────────────────\n// Main App\n// ────────────────────────────────────────────────────────────────────────────\n\nexport function App() {\n const [unlocked, setUnlockedState] = useState(false);\n const [notes, setNotes] = useState([]);\n const [hash, setHash] = useState(getHash());\n const [search, setSearch] = useState(\"\");\n const [draftBody, setDraftBody] = useState(null);\n const [confirmDeleteId, setConfirmDeleteId] = useState(null);\n\n // Load notes when unlocked\n useEffect(() => {\n if (unlocked) setNotes(loadNotes());\n }, [unlocked]);\n\n // Listen to hash changes\n useEffect(() => {\n const onHash = () => {\n setHash(getHash());\n setDraftBody(null);\n };\n window.addEventListener(\"hashchange\", onHash);\n return () => window.removeEventListener(\"hashchange\", onHash);\n }, []);\n\n // Parse route: \"/note/:id\" or \"/\"\n const m = hash.match(/^\\/note\\/(.+)$/);\n const editingId = m ? m[1] : null;\n const editingNote = editingId ? notes.find((n) => n.id === editingId) || null : null;\n\n // ── Autosave: when leaving a note (navigation away), persist draft ─────────\n // We track the currently-open note id. When editingId changes or component\n // unmounts, we flush the draft.\n const flushRef = useRef<(() => void) | null>(null);\n\n const flushDraft = useCallback(() => {\n flushRef.current && flushRef.current();\n }, []);\n\n // Whenever editingId changes, flush the previous draft before switching.\n const prevEditingId = useRef(null);\n useEffect(() => {\n if (prevEditingId.current !== editingId) {\n flushDraft();\n prevEditingId.current = editingId;\n }\n }, [editingId, flushDraft]);\n\n // Keep a ref to latest notes for synchronous save on unload.\n const notesRef = useRef(notes);\n useEffect(() => {\n notesRef.current = notes;\n }, [notes]);\n\n // Set up the flush function for the current note whenever draftBody changes.\n useEffect(() => {\n if (editingId && draftBody !== null) {\n flushRef.current = () => {\n const current = notesRef.current;\n const idx = current.findIndex((n) => n.id === editingId);\n if (idx === -1) return;\n const existing = current[idx];\n if (existing.body === draftBody) return;\n const updated: Note = { ...existing, body: draftBody, updatedAt: Date.now() };\n const next = [...current];\n next[idx] = updated;\n saveNotes(next);\n notesRef.current = next;\n setNotes(next);\n };\n } else {\n flushRef.current = null;\n }\n }, [editingId, draftBody]);\n\n // Flush on unmount / page unload\n useEffect(() => {\n const onBeforeUnload = () => flushDraft();\n window.addEventListener(\"beforeunload\", onBeforeUnload);\n return () => {\n flushDraft();\n window.removeEventListener(\"beforeunload\", onBeforeUnload);\n };\n }, [flushDraft]);\n\n // ── Actions ────────────────────────────────────────────────────────────────\n const doNew = useCallback(() => {\n const note: Note = { id: uid(), body: \"\", updatedAt: Date.now() };\n setNotes((prev) => {\n const next = [note, ...prev];\n saveNotes(next);\n return next;\n });\n setDraftBody(\"\");\n navigate(`/note/${note.id}`);\n }, []);\n\n const doOpen = useCallback((id: string) => {\n setDraftBody(null);\n navigate(`/note/${id}`);\n }, []);\n\n const doBack = useCallback(() => {\n navigate(\"/\");\n }, []);\n\n const requestDelete = useCallback((id: string) => {\n setConfirmDeleteId(id);\n }, []);\n\n const confirmDelete = useCallback(() => {\n const id = confirmDeleteId;\n setConfirmDeleteId(null);\n if (!id) return;\n // flush any pending draft for this note (discard)\n setNotes((prev) => {\n const next = prev.filter((n) => n.id !== id);\n saveNotes(next);\n return next;\n });\n if (editingId === id) {\n navigate(\"/\");\n }\n }, [confirmDeleteId, editingId]);\n\n // ── Render ─────────────────────────────────────────────────────────────────\n if (!unlocked) {\n return setUnlockedState(true)} />;\n }\n\n return (\n

\n {editingId && editingNote ? (\n setDraftBody(body)}\n onBack={doBack}\n onDelete={requestDelete}\n />\n ) : (\n \n )}\n {confirmDeleteId && (\n setConfirmDeleteId(null)}\n onConfirm={confirmDelete}\n />\n )}\n

\n );\n}\n",[],[159,225,227],"c0eb6e02-96b0-4e3a-b732-222235f212b3",["D",1783453886427],"directory",[172,173],[159,225],"e965a04b-c16d-49ba-968c-fc001bff2025",["D",1783453884595],[171,174,175,176],[159],["D",1783453883752],{"_11":12,"_126":69},{"_11":12,"_122":69,"_68":69,"_30":67,"_123":124,"_125":24},{"_39":113,"_13":16,"_33":36,"_114":79,"_115":-5,"_116":-5,"_117":-5,"_118":-5,"_119":-5,"_120":14,"_121":12},"ctx",{"_52":-5,"_146":280,"_281":282,"_283":284,"_285":24,"_286":24,"_287":24,"_288":144,"_289":-5,"_290":-7,"_291":-7,"_292":26,"_293":24,"_294":24,"_295":-5,"_296":24,"_297":24,"_298":24,"_299":-5},"ENV",{"_251":252,"_253":254,"_255":16,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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"]

🔒 My Notes

My Notes

History · index.html