Multi-step forms look simple on the surface. Then the requirements hit:
<ul>
<li>Step 3 only shows if the user picked “professional” in step 1</li>
<li>Users need to save progress and return later</li>
<li>The same validation needs to run server-side too</li>
</ul>
I’ve rebuilt this pattern from scratch three times. Each time it became a mess of <code>useReducer</code>, <code>useEffect</code>, and scattered <code>localStorage</code> calls. So I built FormTrek — a headless React hook that handles exactly this.
<img src="https://media.daily.dev/image/upload/s--TTYX-7Py--/f_auto/v1774991383/ugc/content_2b0133cf-0ffe-4374-8672-d677ed32a7f6?_a=BAMAMiWQ0" alt="FT-GI2.png">
<h2>What it does</h2>
🔀 Conditional branching via plain objects — no JSX, no custom DSL
✅ Per-step Zod schemas that work client AND server-side
💾 Pluggable persistence — localStorage, sessionStorage, URL params, or custom
🎯 TypeScript-first, zero UI dependencies — you own the rendering
<h2>The whole API is one hook</h2>
<pre><code>const { state, actions, currentStep } = useTrek({
 formId: &#x27;onboarding&#x27;,
 steps,
 persistence: localStorageAdapter,
 onComplete: async (values) =&gt; submitToServer(values),
})
</code></pre>
Steps are plain objects. Conditions are plain objects. You keep full control of rendering.
<img src="https://media.daily.dev/image/upload/s--fmmGOb_u--/f_auto/v1774991391/ugc/content_9bfee121-ee8d-4051-afb8-e15a2c3f1ac8?_a=BAMAMiWQ0" alt="FT-GI3.png">
<img src="https://media.daily.dev/image/upload/s--LDHY-DUg--/f_auto/v1774991401/ugc/content_805cf208-78e2-43d3-86ac-f9d7b0bbd84b?_a=BAMAMiWQ0" alt="FT-GI4.png">
<h2>Install</h2>
<pre><code>pnpm dlx formtrek init
</code></pre>
Or manually: <code>pnpm add formtrek zod</code>
🔗 Docs + interactive demo: <a href="https://formflow.shngffrd.com" target="_blank" rel="noopener nofollow">https://formtrek.dev/demo</a>
📦 npm: <code>formtrek</code>
⭐ GitHub: <a href="https://github.com/shngffrddev/formflow" target="_blank" rel="noopener nofollow">https://github.com/shngffrddev/FormTrek</a>
Still early days but the core is solid. Would love feedback from anyone who’s dealt with this pain before.

Squad is established to Post content related to web developement.

Web Developement

FormTrek is a headless React hook library for building multi-step forms with conditional branching, per-step Zod validation, and pluggable persistence (localStorage, sessionStorage, URL params, or custom). The API centers on a single `useTrek` hook that accepts steps as plain objects, supports TypeScript, and has zero UI dependencies so developers retain full rendering control. It can be installed via `pnpm dlx formtrek init` or manually with `pnpm add formtrek zod`.

I built a headless React hook for multi-step forms with conditional branching, Zod validation, and persistence