Not a form host. A handoff tool.
The product is the loop between a visual canvas and merge-ready React. You are not publishing a FormStudio-hosted survey. You are designing structure, copy, size, radius and validation, then taking schema.ts, form.tsx and spec.json into a Next.js or React app that already has shadcn/ui. The public sitemap — acquisition, product, account V2, trust, handoff — lives on /roadmap.
Open /builder
Drop a template or a block onto the form chrome, snap size on the grid, edit Zod in the inspector, Run a sample in the probe terminal, then Export. Nothing leaves the browser until you copy files.
The unit of work is the form.
The canvas is a form frame — icon, title, description, submit — then blocks inside it. Templates load a finished form with regex already on email, phone, password and OTP. The icon panel stamps Lucide onto the chrome or a field. Grid snap still resizes each block.
Forms tab: start from contact, signup, tickets, RSVP, verify…
Blocks tab: identity, choice, files and sections — not only Input.
Icons tab: attach a mark to the form or the selected field.
Select the chrome to edit title and submit; select a block for Zod.
Probe before you export.
Custom regex is compiled into the Zod schema. The bottom terminal runs that pattern and the live schema against a sample string so you see accept / reject before you download files. Preview mode still shows inline field errors as the user types.
Wire it into your project.
Generated code assumes a Next.js or React project with shadcn/ui already configured. Pick your package manager — every command below updates to match.
1. Install the core dependencies
pnpm add react-hook-form @hookform/resolvers zod lucide-react2. Add the shadcn/ui components you need
pnpm dlx shadcn@latest add input textarea select checkbox switch radio-group popover calendar button form label3. Or inject a built-in template
pnpm dlx formstudio-cli add contact-sales4. Files land in components/forms/<form-id> (or copy them from Export)
your-project/
├── components/
│ └── forms/
│ └── contact-sales/
│ ├── schema.ts
│ ├── form.tsx
│ └── spec.json
└── ...Three files, no mystery.
Export Code downloads the three files. The same generator powers npx formstudio-cli add <form-id>, which writes them into components/forms/<id>. spec.json is the portable source of truth, so --spec can regenerate the same form.
Types + Zod validation
React Hook Form UI
Portable definition
SAML for a Team workspace.
Company sign-in uses Supabase Auth SAML 2.0. FormStudio resolves the work email's domain to the provider id saved on the workspace, then calls signInWithSSO. The IdP itself is registered with the Supabase CLI, not in this app. SAML is a Supabase Pro (or higher) feature and must be enabled under Auth providers. Full steps, attribute mapping, and a mocksaml.com test are in docs/enterprise-sso.md.
On a Supabase project at Pro or above, enable SAML 2.0 and install the CLI (v1.46.4 or newer).
Register the IdP with supabase sso add --type saml, a metadata URL, --domains, and an attribute-mapping file. Copy the provider UUID.
Set the workspace to Team. On Members, paste the provider id, add the domain, mark it verified, and set status to Active.
Optional: require SSO so password sign-in is refused for that domain. New SSO users join as the default role (viewer unless you change it).
Add https://<your-app>/auth/callback to the Supabase redirect URLs. Give the IdP the SP metadata from supabase sso info.
supabase sso add --type saml --project-ref <project-ref> \
--metadata-url 'https://company.com/idp/saml/metadata' \
--domains company.com \
--attribute-mapping-file ./supabase/saml-attribute-mapping.example.jsonTechnical FAQ
A visual studio for entire shadcn forms — chrome, sections, icons, identity fields and Zod — then export schema.ts, form.tsx and spec.json. Not a hosted form runtime, not a pile of Inputs.
Yes. There is no account and nothing is persisted on a server while you work. Your fields, sizes, radii and validation live in the browser until you export or download.
Select a field, set its regex in the inspector, type a sample in the Zod probe terminal, then Run. You see whether the pattern and the generated Zod schema accept or reject that value.
Yes. npx formstudio-cli add contact-sales writes schema.ts, form.tsx and spec.json for a built-in template. Any other id is pulled from the registry (https://formstudio.dev by default, or --registry / FORMSTUDIO_REGISTRY). Private forms need --key.
Yes. Exported code is plain React, Zod and shadcn/ui with no FormStudio runtime and no attribution requirement.
Canvas is free and never opens Stripe. Studio ($12/mo) and Team ($29/mo) start a Stripe Checkout subscription when you are signed in, then return to /billing. A signed webhook updates the workspace plan, subscription status, and period end. Manage billing opens the Stripe Customer Portal. If the Stripe keys are missing, Billing says payments are not configured and the builder still runs.