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 FormFlow — a headless React hook that handles exactly this.
<img src="https://media.daily.dev/image/upload/s--cA7-BueK--/f_auto/v1774991288/ugc/content_d1c3e079-2ab1-4a67-9d2f-f2f4d3d010bc?_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 } = useFormFlow({
 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--UXm96usy--/f_auto/v1774991297/ugc/content_06dd1814-3fef-4208-b488-26215657090a?_a=BAMAMiWQ0" alt="FT-GI3.png">
<img src="https://media.daily.dev/image/upload/s--OAM8m0mb--/f_auto/v1774991306/ugc/content_b2b7c9ff-4946-4722-abc0-9edf1d8c626d?_a=BAMAMiWQ0" alt="FT-GI4.png">
<h2>Install</h2>
<pre><code>pnpm dlx @shngffrddev/formflow init
</code></pre>
Or manually: <code>pnpm add @shngffrddev/formflow zod</code>
🔗 Docs + interactive demo: <a href="https://formflow.shngffrd.com" target="_blank" rel="noopener nofollow">https://formflow.shngffrd.com</a>
📦 npm: <code>@shngffrddev/formflow</code>
⭐ GitHub: <a href="https://github.com/shngffrddev/formflow" target="_blank" rel="noopener nofollow">https://github.com/shngffrddev/formflow</a>
Still early days but the core is solid. Would love feedback from anyone who’s dealt with this pain before.

Welcome to the UX/UI Squad! This is a space where developers, designers, and project managers come together to share UX/UI insights and create better web and app services.

UX/UI

FormFlow 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 `useFormFlow` 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 and includes an interactive demo site.

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