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",[120,143,134],"09cc85b9fdff6f5ea3d0b06d2d691067b093df2f9d69327849a16b819038ea9a","components","5d7e5e30-3996-11f1-bbdd-42b51c65c3df","6e585892-f52b-11ef-a8e1-569c3dd06744","69ed66bc-f52b-11ef-9dac-569c3dd06744",75,["D",1776345339930],5,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Counter } from \"./Counter.tsx\";\n\nexport function App() {\n  return (\n    <div class=\"max-w-md mx-auto mt-12\">\n      <h1 class=\"text-3xl font-bold mb-6\">React + Hono Starter</h1>\n      <Counter />\n      <p class=\"mt-8 text-sm text-gray-500\">\n        <a href=\"/source\" class=\"underline hover:text-gray-700\">View source</a>\n      </p>\n    </div>\n  );\n}\n",[120,143,134],"de0a7e5fc76c6fd6135aff964af1a5835e04e2758b23f3d0c7d9fabffe514df7",["D",1780423033746],"legacyEnvVars","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789556399&sig=39cf692678889e4858e1d3f239cccdbb768d0b4bdeeecb6f122e7581a8e69c0b","userId","4672fa32-1c6f-4907-899e-57b7e45b1dcb","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"019e83d1-d41f-725b-9693-b632d430a029","tursoName","7c4f7fd45eac11f18b321607ee4eb77e","tursoHostname","7c4f7fd45eac11f18b321607ee4eb77e-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789500119686],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_197":193},"org",{"_11":12,"_190":191,"_192":193,"_160":161,"_194":195,"_196":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":296,"_46":-5,"_154":48,"_49":50,"_155":50,"_156":157,"_158":159,"_160":161,"_162":81,"_163":26,"_164":-5,"_165":-5,"_166":167,"_53":168,"_169":170,"_171":172,"_173":297,"_175":-5,"_176":177,"_178":177,"_179":180,"_181":180,"_182":180,"_183":177,"_184":177,"_185":298,"_187":299,"_189":300,"_47":48},"tree",[250,257,258],"files",[250,251,252,253,254,255,256,257,258],"counts",{"_240":167,"_241":115,"_242":167,"_243":244,"_245":246},"contents",[225,226,227],"upstreamProject",{"_32":39,"_13":56,"_156":157,"_158":159,"_49":50,"_185":223},"upstreamBranch",{"_32":33,"_34":221,"_36":222,"_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,"_197":224},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789556399&sig=d4d039bf60786a03d56ec8a29ec1b19630253aab318e490fcd07a6f24846b070",{"_32":236,"_13":120,"_80":112,"_82":-5,"_83":58,"_84":115,"_86":26,"_34":237,"_40":167,"_89":238,"_91":-5,"_66":48,"_93":-5,"_73":239},{"_32":230,"_13":231,"_80":232,"_82":-5,"_83":58,"_84":115,"_86":26,"_34":233,"_40":167,"_89":116,"_91":234,"_66":48,"_93":-5,"_73":235},{"_32":79,"_13":74,"_80":81,"_82":-5,"_83":58,"_84":85,"_86":26,"_34":228,"_40":88,"_89":90,"_91":92,"_66":48,"_93":-5,"_73":229},["D",1780424133991],[74],"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",[231],"7c7df026-5eac-11f1-8b32-1607ee4eb77e",["D",1780423033746],"directory",[120],"pulls","branches","forks","envVars",{"_247":167,"_249":167},"connections",{"_247":167,"_248":167},"count","unfilledCount","emptyCount",{"_32":236,"_13":120,"_80":112,"_82":-5,"_83":58,"_84":115,"_86":26,"_34":293,"_40":167,"_89":238,"_91":-5,"_66":48,"_93":-5,"_94":294,"_73":295},{"_32":289,"_13":143,"_80":136,"_82":112,"_83":58,"_84":115,"_86":26,"_34":290,"_40":167,"_89":238,"_91":-5,"_66":48,"_93":-5,"_94":291,"_73":292},{"_32":133,"_13":134,"_80":135,"_82":136,"_83":58,"_84":57,"_86":26,"_34":137,"_40":138,"_89":139,"_91":140,"_66":48,"_93":-5,"_94":287,"_73":288},{"_32":280,"_13":281,"_80":282,"_82":136,"_83":58,"_84":115,"_86":26,"_34":283,"_40":167,"_89":139,"_91":284,"_66":48,"_93":-5,"_94":285,"_73":286},{"_32":273,"_13":274,"_80":275,"_82":112,"_83":58,"_84":115,"_86":26,"_34":276,"_40":167,"_89":116,"_91":277,"_66":48,"_93":-5,"_94":278,"_73":279},{"_32":109,"_13":110,"_80":111,"_82":112,"_83":58,"_84":113,"_86":26,"_34":114,"_40":115,"_89":116,"_91":117,"_66":48,"_93":-5,"_94":271,"_73":272},{"_32":264,"_13":265,"_80":266,"_82":112,"_83":58,"_84":115,"_86":26,"_34":267,"_40":167,"_89":139,"_91":268,"_66":48,"_93":-5,"_94":269,"_73":270},{"_32":230,"_13":231,"_80":232,"_82":-5,"_83":58,"_84":115,"_86":26,"_34":261,"_40":167,"_89":116,"_91":234,"_66":48,"_93":-5,"_94":262,"_73":263},{"_32":79,"_13":74,"_80":81,"_82":-5,"_83":58,"_84":85,"_86":26,"_34":87,"_40":88,"_89":90,"_91":92,"_66":48,"_93":-5,"_94":259,"_73":260},[],[74],["D",1780423033746],[],[231],"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 />);",[],[120,265],[],[120,110],"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>",[],[120,274],"7c7dc150-5eac-11f1-8b32-1607ee4eb77e","Counter.tsx","019e897b-841c-7503-ba4e-7da0c1f2a759",["D",1780423033746],"/** @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    <div class=\"flex items-center gap-3\">\n      <span class=\"text-lg\">Clicked</span>\n      <button\n        onClick={() => 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      </button>\n      <span class=\"text-lg\">times</span>\n    </div>\n  );\n}\n",[],[120,143,281],[],[120,143,134],"7c7ddfbe-5eac-11f1-8b32-1607ee4eb77e",["D",1780423033746],[252,253],[120,143],["D",1780423033746],[251,254,255,256],[120],["D",1780423033746],["D",1789500119686],{"_11":12,"_197":193},{"_11":12,"_190":191,"_192":193,"_160":161,"_194":195,"_196":48},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"ctx",{"_185":-5,"_218":334,"_335":336,"_337":338,"_339":48,"_340":48,"_341":48,"_342":26,"_343":-5,"_344":-7,"_345":-7,"_346":167,"_347":48,"_348":48,"_349":-5,"_350":48,"_351":48,"_352":48,"_353":-5},"ENV",{"_305":306,"_307":308,"_309":16,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319,"_320":321,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331,"_332":333},"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

Compare

Mergepotluck/mainintotemplates/main

frontend/components/App.tsx+60-11

frontend/index.html+4-5

Hindex.ts+118-14