New form

Build your form

Title setTitle(e.target.value)} className=\"mt-2 w-full rounded-xl border border-slate-200 px-4 py-3 text-base focus:border-violet-500 focus:outline-none focus:ring-4 focus:ring-violet-100\" placeholder=\"Customer feedback\" />Description optional

setDescription(e.target.value)} className=\"mt-2 w-full rounded-xl border border-slate-200 px-4 py-3 focus:border-violet-500 focus:outline-none focus:ring-4 focus:ring-violet-100\" rows={2} placeholder=\"Tell people why you're asking\" /></label></div></div><div className=\"my-6 space-y-4\">{questions.map((question, index) => <QuestionEditor key={question.id} question={question} index={index} total={questions.length} patch={patch} move={move} remove={() => setQuestions(q => q.filter(item => item.id !== question.id))} />)}</div><div className=\"flex flex-wrap items-center gap-3\"><button onClick={add} className={`${button} border-2 border-dashed border-violet-300 bg-violet-50 text-violet-700 hover:bg-violet-100`}>+ Add question</button><button onClick={save} disabled={saving} className={`${button} ml-auto bg-violet-700 text-white hover:bg-violet-800 disabled:opacity-50`}>{saving ? \"Saving...\" : \"Save and share\"}</button></div>{error && <p className=\"mt-4 rounded-xl bg-red-50 p-3 text-sm font-medium text-red-700\">{error}</p>}</main></Shell>;\n}\nfunction QuestionEditor({ question, index, total, patch, move, remove }: { question: Question; index: number; total: number; patch: (id: string, p: Partial<Question>) => void; move: (i: number, d: number) => void; remove: () => void }) {\n  const choices = question.options || [\"Option 1\", \"Option 2\"];\n  return <section className=\"rounded-2xl border border-slate-200 bg-white p-5 shadow-sm\"><div className=\"flex items-center gap-2 text-sm\"><span className=\"font-black text-violet-700\">{index + 1}</span><select value={question.type} onChange={e => patch(question.id, { type: e.target.value as Kind, options: [\"Option 1\", \"Option 2\"] })} className=\"rounded-lg border border-slate-200 px-2 py-1 font-semibold\">{kinds.map(kind => <option key={kind.value} value={kind.value}>{kind.label}</option>)}</select><label className=\"ml-auto flex items-center gap-1 text-slate-500\"><input type=\"checkbox\" checked={question.required} onChange={e => patch(question.id, { required: e.target.checked })} /> Required</label></div><input value={question.label} onChange={e => patch(question.id, { label: e.target.value })} className=\"mt-4 w-full rounded-xl border border-slate-200 px-4 py-3 font-semibold focus:border-violet-500 focus:outline-none focus:ring-4 focus:ring-violet-100\" placeholder=\"Write your question\" />{(question.type === \"single\" || question.type === \"multi\") && <div className=\"mt-3 space-y-2\">{choices.map((option, optionIndex) => <div key={optionIndex} className=\"flex gap-2\"><input value={option} onChange={e => patch(question.id, { options: choices.map((item, i) => i === optionIndex ? e.target.value : item) })} className=\"w-full rounded-lg border border-slate-200 px-3 py-2 text-sm\" /><button onClick={() => patch(question.id, { options: choices.filter((_, i) => i !== optionIndex) })} className=\"px-2 text-slate-400 hover:text-red-600\">×</button></div>)}<button onClick={() => patch(question.id, { options: [...choices, `Option ${choices.length + 1}`] })} className=\"text-sm font-bold text-violet-700\">+ Add option</button></div>}<div className=\"mt-4 flex justify-end gap-2\"><button disabled={index === 0} onClick={() => move(index, -1)} className=\"rounded-lg border px-3 py-1 text-sm disabled:opacity-30\">↑</button><button disabled={index === total - 1} onClick={() => move(index, 1)} className=\"rounded-lg border px-3 py-1 text-sm disabled:opacity-30\">↓</button><button onClick={remove} className=\"rounded-lg px-3 py-1 text-sm font-bold text-red-600 hover:bg-red-50\">Delete</button></div></section>;\n}\nfunction PublicForm({ slug }: { slug: string }) {\n  const [form, setForm] = useState<Form | null>(null); const [answers, setAnswers] = useState<Record<string, any>>({}); const [step, setStep] = useState(-1); const [error, setError] = useState(\"\"); const [done, setDone] = useState(false);\n  useEffect(() => { api(`/api/public/${slug}`).then(setForm).catch(e => setError(e.message)); }, [slug]);\n  if (error && !form) return <Shell><main className=\"mx-auto max-w-xl px-5 py-16\"><p className=\"rounded-xl bg-red-50 p-4 text-red-700\">{error}</p></main></Shell>;\n  if (!form) return <Shell><main className=\"mx-auto max-w-xl px-5 py-16 text-slate-500\">Loading form...</main></Shell>;\n  if (done) return <Shell><main className=\"mx-auto max-w-xl px-5 py-20 text-center\"><div className=\"mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-emerald-100 text-3xl text-emerald-700\">✓</div><h1 className=\"mt-6 text-4xl font-black\">Thank you</h1><p className=\"mt-3 text-slate-500\">Your response has been recorded.</p></main></Shell>;\n  if (step < 0) return <Shell><main className=\"mx-auto max-w-2xl px-5 py-20\"><div className=\"rounded-3xl border border-slate-200 bg-white p-8 shadow-sm md:p-12\"><p className=\"text-sm font-bold uppercase tracking-widest text-violet-600\">Formflow</p><h1 className=\"mt-3 text-4xl font-black tracking-tight md:text-5xl\">{form.title}</h1>{form.description && <p className=\"mt-4 text-lg leading-7 text-slate-500\">{form.description}</p>}<button autoFocus onClick={() => setStep(0)} className={`${button} mt-8 bg-violet-700 text-white hover:bg-violet-800`}>Start <span className=\"ml-2 text-xs opacity-70\">press Enter ↵</span></button></div></main></Shell>;\n  const question = form.questions[step]; const value = answers[question.id] ?? (question.type === \"multi\" ? [] : \"\"); const invalid = question.required && (Array.isArray(value) ? !value.length : !String(value).trim());\n  const next = async () => { if (invalid) return setError(\"This question is required.\"); setError(\"\"); if (step < form.questions.length - 1) return setStep(step + 1); try { await api(`/api/public/${slug}/responses`, { method: \"POST\", body: JSON.stringify({ answers }) }); setDone(true); } catch (e) { setError((e as Error).message); } };\n  return <Shell><main className=\"mx-auto max-w-2xl px-5 py-12\"><div className=\"mb-10\"><div className=\"h-2 overflow-hidden rounded-full bg-slate-200\"><div className=\"h-full rounded-full bg-violet-600 transition-all\" style={{ width: `${((step + 1) / form.questions.length) * 100}%` }} /></div><p className=\"mt-2 text-xs font-bold uppercase tracking-widest text-slate-400\">Question {step + 1} of {form.questions.length}</p></div><section onKeyDown={e => { if (e.key === \"Enter\" && question.type !== \"long\") { e.preventDefault(); next(); } }}><p className=\"text-sm font-black text-violet-700\">{step + 1} <span className=\"text-slate-300\">→</span></p><h1 className=\"mt-3 text-3xl font-black leading-tight md:text-4xl\">{question.label}{question.required && <span className=\"ml-1 text-violet-600\">*</span>}</h1><Answer question={question} value={value} setValue={value => setAnswers(old => ({ ...old, [question.id]: value }))} />{error && <p className=\"mt-4 text-sm font-bold text-red-600\">{error}</p>}<div className=\"mt-8 flex gap-3\"><button onClick={() => setStep(Math.max(-1, step - 1))} className={`${button} border border-slate-200 bg-white hover:border-violet-300`}>Back</button><button onClick={next} className={`${button} bg-violet-700 text-white hover:bg-violet-800`}>{step === form.questions.length - 1 ? \"Submit\" : \"Next\"} <span className=\"ml-2 text-xs opacity-70\">Enter ↵</span></button></div></section></main></Shell>;\n}\nfunction Answer({ question, value, setValue }: { question: Question; value: any; setValue: (v: any) => void }) {\n  if (question.type === \"short\") return <input autoFocus value={value} onChange={e => setValue(e.target.value)} className=\"mt-8 w-full border-b-2 border-slate-300 bg-transparent px-1 py-3 text-xl outline-none focus:border-violet-600\" placeholder=\"Type your answer here...\" />;\n  if (question.type === \"long\") return <textarea autoFocus value={value} onChange={e => setValue(e.target.value)} className=\"mt-8 w-full rounded-xl border-2 border-slate-200 bg-white p-4 text-lg outline-none focus:border-violet-600\" rows={5} placeholder=\"Type your answer here...\" />;\n  return <div className=\"mt-8 space-y-3\">{question.options?.map((option, index) => { const checked = question.type === \"multi\" ? value.includes(option) : value === option; return <label key={option} className={`flex cursor-pointer items-center gap-3 rounded-xl border-2 p-4 font-semibold transition ${checked ? \"border-violet-600 bg-violet-50\" : \"border-slate-200 bg-white hover:border-violet-300\"}`}><input autoFocus={index === 0} type={question.type === \"multi\" ? \"checkbox\" : \"radio\"} checked={checked} onChange={() => setValue(question.type === \"multi\" ? (checked ? value.filter((item: string) => item !== option) : [...value, option]) : option)} /><span>{option}</span></label>; })}</div>;\n}\nfunction Responses({ id }: { id: string }) {\n  const [data, setData] = useState<any>(null); useEffect(() => { api(`/api/forms/${id}/responses`).then(setData); }, [id]);\n  return <Shell><main className=\"mx-auto max-w-5xl px-5 py-10\"><button onClick={() => go(\"/\")} className=\"mb-6 text-sm font-bold text-violet-700\">← Back to dashboard</button>{!data ? <p>Loading responses...</p> : <><div className=\"mb-8\"><p className=\"text-sm font-bold uppercase tracking-widest text-violet-600\">Responses</p><h1 className=\"mt-2 text-4xl font-black\">{data.form.title}</h1><p className=\"mt-2 text-slate-500\">{data.responses.length} submitted response{data.responses.length === 1 ? \"\" : \"s\"}</p></div>{data.responses.length === 0 ? <div className=\"rounded-2xl border border-dashed border-slate-300 bg-white p-10 text-center text-slate-500\">No responses yet. Share the form to collect the first one.</div> : <div className=\"space-y-4\">{data.responses.map((response: any, index: number) => <article key={response.id} className=\"rounded-2xl border border-slate-200 bg-white p-6 shadow-sm\"><div className=\"mb-5 flex justify-between text-sm\"><strong>Response {data.responses.length - index}</strong><span className=\"text-slate-400\">{new Date(response.submitted_at + \"Z\").toLocaleString()}</span></div><dl className=\"space-y-4\">{data.form.questions.map((question: Question) => <div key={question.id}><dt className=\"text-xs font-bold uppercase tracking-wide text-slate-400\">{question.label}</dt><dd className=\"mt-1 whitespace-pre-wrap text-slate-800\">{Array.isArray(response.answers[question.id]) ? response.answers[question.id].join(\", \") : response.answers[question.id] || <span className=\"italic text-slate-400\">No answer</span>}</dd></div>)}</dl></article>)}</div>}</>}</main></Shell>;\n}\nexport function App() { const [path, setPath] = useState(location.pathname); useEffect(() => { const update = () => setPath(location.pathname); addEventListener(\"popstate\", update); return () => removeEventListener(\"popstate\", update); }, []); const publicMatch = path.match(/^\\/f\\/([^/]+)$/); const responsesMatch = path.match(/^\\/forms\\/(\\d+)\\/responses$/); if (publicMatch) return <PublicForm slug={publicMatch[1]} />; if (responsesMatch) return <Responses id={responsesMatch[1]} />; if (path === \"/new\") return <Builder />; return <Dashboard />; }\n",[211,113,88],"pulls","branches","forks","envVars",{"_84":26,"_230":26},"connections",{"_84":26,"_229":26},"unfilledCount","emptyCount",{"_36":288,"_13":211,"_75":204,"_46":-5,"_38":39,"_205":43,"_206":24,"_40":289,"_42":26,"_78":114,"_208":-5,"_80":30,"_209":-5,"_247":290,"_17":291},{"_36":203,"_13":113,"_75":112,"_46":204,"_38":39,"_205":43,"_206":24,"_40":285,"_42":26,"_78":114,"_208":-5,"_80":30,"_209":-5,"_247":286,"_17":287},{"_36":218,"_13":88,"_75":87,"_46":112,"_38":39,"_205":107,"_206":24,"_40":282,"_42":91,"_78":79,"_208":220,"_80":30,"_209":-5,"_247":283,"_17":284},{"_36":214,"_13":77,"_75":76,"_46":112,"_38":39,"_205":43,"_206":24,"_40":279,"_42":26,"_78":79,"_208":216,"_80":30,"_209":-5,"_247":280,"_17":281},{"_36":272,"_13":273,"_75":274,"_46":204,"_38":39,"_205":43,"_206":24,"_40":275,"_42":26,"_78":21,"_208":276,"_80":30,"_209":-5,"_247":277,"_17":278},{"_36":264,"_13":265,"_75":266,"_46":204,"_38":39,"_205":267,"_206":24,"_40":268,"_42":43,"_78":21,"_208":269,"_80":30,"_209":-5,"_247":270,"_17":271},{"_36":257,"_13":258,"_75":259,"_46":204,"_38":39,"_205":43,"_206":24,"_40":260,"_42":26,"_78":79,"_208":261,"_80":30,"_209":-5,"_247":262,"_17":263},{"_36":250,"_13":251,"_75":252,"_46":-5,"_38":39,"_205":43,"_206":24,"_40":253,"_42":26,"_78":21,"_208":254,"_80":30,"_209":-5,"_247":255,"_17":256},{"_36":240,"_13":241,"_75":127,"_46":-5,"_38":39,"_205":242,"_206":24,"_40":243,"_42":244,"_78":245,"_208":246,"_80":30,"_209":-5,"_247":248,"_17":249},"0c12b27e-5eaf-11f1-8c12-1607ee4eb77e","index.ts",10,["D",1780424133991],7,"http","import { getOAuthUserData, oauthMiddleware } from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport { 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();\ntype Question = { id: string; type: \"single\" | \"multi\" | \"short\" | \"long\"; label: string; required: boolean; options?: string[] };\nconst exampleQuestions: Question[] = [\n  { id: \"q1\", type: \"single\", label: \"How did you hear about us?\", required: true, options: [\"A friend\", \"Social media\", \"Search\", \"Other\"] },\n  { id: \"q2\", type: \"multi\", label: \"What would you like to explore?\", required: true, options: [\"Workshops\", \"Community events\", \"Resources\", \"Volunteering\"] },\n  { id: \"q3\", type: \"short\", label: \"What is your name?\", required: true },\n  { id: \"q4\", type: \"long\", label: \"Anything else you'd like us to know?\", required: false },\n];\n\nasync function creator(req: Request) {\n  const session = await getOAuthUserData(req);\n  const email = session?.user.email?.toLowerCase();\n  return email?.endsWith(\"@val.town\") ? session : null;\n}\nasync function requireApiCreator(c: any) {\n  if (!await creator(c.req.raw)) return c.json({ error: \"Val Town authentication with a verified @val.town email is required\" }, 401);\n}\n\nasync function ensureDb() {\n  await sqlite.execute(`CREATE TABLE IF NOT EXISTS forms (\n    id INTEGER PRIMARY KEY AUTOINCREMENT,\n    slug TEXT NOT NULL UNIQUE,\n    title TEXT NOT NULL,\n    description TEXT NOT NULL DEFAULT '',\n    questions TEXT NOT NULL,\n    created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP\n  )`);\n  await sqlite.execute(`CREATE TABLE IF NOT EXISTS responses (\n    id INTEGER PRIMARY KEY AUTOINCREMENT,\n    form_id INTEGER NOT NULL,\n    answers TEXT NOT NULL,\n    submitted_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,\n    FOREIGN KEY (form_id) REFERENCES forms(id)\n  )`);\n  const count = await sqlite.execute(\"SELECT COUNT(*) AS count FROM forms\");\n  if (Number(count.rows[0].count) === 0) {\n    await sqlite.execute({\n      sql: \"INSERT INTO forms (slug, title, description, questions) VALUES (?, ?, ?, ?)\",\n      args: [\"community-check-in\", \"Community check-in\", \"A short example form showing every question style.\", JSON.stringify(exampleQuestions)],\n    });\n  }\n}\n\nfunction cleanQuestion(question: any, index: number): Question {\n  const allowed = [\"single\", \"multi\", \"short\", \"long\"];\n  const type = allowed.includes(question?.type) ? question.type : \"short\";\n  const label = String(question?.label || \"\").trim();\n  if (!label) throw new Error(`Question ${index + 1} needs a prompt`);\n  const result: Question = { id: String(question?.id || crypto.randomUUID()), type, label, required: Boolean(question?.required) };\n  if (type === \"single\" || type === \"multi\") {\n    const options = Array.isArray(question?.options) ? question.options.map((item: unknown) => String(item).trim()).filter(Boolean) : [];\n    if (options.length < 2) throw new Error(`Question ${index + 1} needs at least two options`);\n    result.options = options;\n  }\n  return result;\n}\nfunction slugify(value: string) { return value.toLowerCase().trim().replace(/[^a-z0-9]+/g, \"-\").replace(/^-|-$/g, \"\").slice(0, 52) || \"form\"; }\nasync function uniqueSlug(title: string) {\n  const base = slugify(title); let slug = base;\n  for (let suffix = 2;; suffix++) {\n    const found = await sqlite.execute({ sql: \"SELECT id FROM forms WHERE slug = ?\", args: [slug] });\n    if (!found.rows.length) return slug;\n    slug = `${base}-${suffix}`;\n  }\n}\nfunction parseForm(row: any) { return { ...row, questions: JSON.parse(String(row.questions)), responseCount: Number(row.responseCount || 0) }; }\n\napp.get(\"/api/forms\", async (c) => {\n  const denied = await requireApiCreator(c); if (denied) return denied;\n  await ensureDb();\n  const result = await sqlite.execute(`SELECT forms.*, COUNT(responses.id) AS responseCount FROM forms LEFT JOIN responses ON responses.form_id = forms.id GROUP BY forms.id ORDER BY forms.id DESC`);\n  return c.json(result.rows.map(parseForm));\n});\napp.post(\"/api/forms\", async (c) => {\n  const denied = await requireApiCreator(c); if (denied) return denied;\n  await ensureDb();\n  try {\n    const body = await c.req.json(); const title = String(body?.title || \"\").trim(); const description = String(body?.description || \"\").trim();\n    if (!title) return c.json({ error: \"Title is required\" }, 400);\n    if (!Array.isArray(body?.questions) || body.questions.length === 0) return c.json({ error: \"Add at least one question\" }, 400);\n    const questions = body.questions.map(cleanQuestion); const slug = await uniqueSlug(title);\n    const created = await sqlite.execute({ sql: \"INSERT INTO forms (slug, title, description, questions) VALUES (?, ?, ?, ?) RETURNING *\", args: [slug, title, description, JSON.stringify(questions)] });\n    return c.json(parseForm(created.rows[0]), 201);\n  } catch (error) { return c.json({ error: error instanceof Error ? error.message : \"Could not save form\" }, 400); }\n});\napp.get(\"/api/forms/:id/responses\", async (c) => {\n  const denied = await requireApiCreator(c); if (denied) return denied;\n  await ensureDb();\n  const form = await sqlite.execute({ sql: \"SELECT * FROM forms WHERE id = ?\", args: [c.req.param(\"id\")] });\n  if (!form.rows.length) return c.json({ error: \"Form not found\" }, 404);\n  const responses = await sqlite.execute({ sql: \"SELECT * FROM responses WHERE form_id = ? ORDER BY id DESC\", args: [c.req.param(\"id\")] });\n  return c.json({ form: parseForm(form.rows[0]), responses: responses.rows.map((row: any) => ({ ...row, answers: JSON.parse(String(row.answers)) })) });\n});\napp.get(\"/api/public/:slug\", async (c) => {\n  await ensureDb();\n  const result = await sqlite.execute({ sql: \"SELECT id, slug, title, description, questions FROM forms WHERE slug = ?\", args: [c.req.param(\"slug\")] });\n  if (!result.rows.length) return c.json({ error: \"Form not found\" }, 404);\n  return c.json(parseForm(result.rows[0]));\n});\napp.post(\"/api/public/:slug/responses\", async (c) => {\n  await ensureDb();\n  const result = await sqlite.execute({ sql: \"SELECT id, questions FROM forms WHERE slug = ?\", args: [c.req.param(\"slug\")] });\n  if (!result.rows.length) return c.json({ error: \"Form not found\" }, 404);\n  const form = parseForm(result.rows[0]); const body = await c.req.json(); const answers = body?.answers && typeof body.answers === \"object\" ? body.answers : {};\n  for (const question of form.questions as Question[]) {\n    const answer = answers[question.id]; const empty = Array.isArray(answer) ? answer.length === 0 : !String(answer || \"\").trim();\n    if (question.required && empty) return c.json({ error: `Please answer: ${question.label}` }, 400);\n  }\n  await sqlite.execute({ sql: \"INSERT INTO responses (form_id, answers) VALUES (?, ?)\", args: [form.id, JSON.stringify(answers)] });\n  return c.json({ ok: true }, 201);\n});\n\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"*\", async (c) => {\n  const path = c.req.path;\n  if (path === \"/\" || path === \"/new\" || /^\\/forms\\/[^/]+\\/responses$/.test(path)) {\n    if (!await creator(c.req.raw)) return c.redirect(\"/auth/login\");\n  }\n  return serveFile(\"/frontend/index.html\");\n});\napp.onError((err) => Promise.reject(err));\nexport default oauthMiddleware(app.fetch);\n","children",[],[241],"7c7df5c6-5eac-11f1-8b32-1607ee4eb77e","README.md","019e897b-841c-7503-ba4e-973ec80e1ee2",["D",1780423033746],"# 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<br/>(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 <App />)\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",[],[251],"7c7deb44-5eac-11f1-8b32-1607ee4eb77e","index.tsx","019e897b-841c-7503-ba4e-8c7008013384",["D",1780423033746],"/** @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(<App />);",[],[211,258],"deb9a780-5eac-11f1-8730-1607ee4eb77e","index.html","019e897b-841c-7503-ba4e-89ebdb6a6d56",4,["D",1780423198912],"<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <meta name=\"theme-color\" content=\"#6d28d9\">\n    <title>Formflow</title>\n    <script src=\"https://cdn.twind.style\" crossorigin></script>\n    <link rel=\"icon\" href=\"/frontend/favicon.svg\" type=\"image/svg+xml\">\n  </head>\n  <body class=\"font-sans antialiased\">\n    <div id=\"root\"></div>\n    <script src=\"https://esm.town/v/std/catch\"></script>\n    <script src=\"/frontend/index.tsx\" type=\"module\"></script>\n  </body>\n</html>",[],[211,265],"7c7de220-5eac-11f1-8b32-1607ee4eb77e","favicon.svg","019e897b-841c-7503-ba4e-84c00166b681",["D",1780423033746],"<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"4\" y=\"4\" width=\"24\" height=\"24\" rx=\"6\" fill=\"#4a90e2\" />\n  <circle cx=\"16\" cy=\"16\" r=\"8\" fill=\"#ffffff\" opacity=\"0.3\" />\n</svg>",[],[211,273],["D",1780423033746],[],[211,113,77],["D",1780425079215],[],[211,113,88],["D",1780423033746],[233,234],[211,113],"7c7df026-5eac-11f1-8b32-1607ee4eb77e",["D",1780423033746],[232,235,236,237],[211],["D",1780423033746],["D",1789500119686],{"_11":12,"_170":83},{"_11":12,"_165":166,"_82":83,"_31":81,"_167":168,"_169":30},{"_42":107,"_13":16,"_36":39,"_154":116,"_155":72,"_156":157,"_158":120,"_159":160,"_161":162,"_163":14,"_164":12},"ctx",{"_55":-5,"_191":330,"_331":332,"_333":334,"_335":30,"_336":30,"_337":30,"_338":24,"_339":-5,"_340":-7,"_341":-7,"_342":26,"_343":30,"_344":30,"_345":-5,"_346":30,"_347":30,"_348":30,"_349":-5},"ENV",{"_301":302,"_303":304,"_305":16,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329},"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"]
</article></body></html>

Your forms

{form.title}

Build your form

History · components