FormStudioFormStudio home

Handoff · CLI

Add any form to your repo with a single command

You composed it in FormStudio. One command writes the Zod schema, the React form, and the spec into your app — then tells you what to install. No zip. No browser.

formstudio-cli

$npx formstudio-cli add contact-sales

Faster than exporting a zip.

One add. Three files you can commit, review, and ship.

  1. 1

    One command, three files

    schema.ts, form.tsx and spec.json land in components/forms/<form-id>. Change the folder with --dir.

  2. 2

    Same generator as Export

    The CLI writes the same source the canvas export panel downloads. No second pipeline.

  3. 3

    Prints what to install

    Peer packages and shadcn components are listed. The CLI does not install them for you.

your-app

components

forms

contact-salesNew

schema.tsNew

form.tsxNew

spec.jsonNew

After npx formstudio-cli add contact-sales

Get started

From your app root to files in the repo.

  1. 01

    Add a built-in form

    The eight gallery ids resolve on your machine. No registry call.

    $npx formstudio-cli add contact-sales

  2. 02

    Or pull a published form

    Any other id is GET /r/:id. Pin a version with @. Private forms need --key.

    $npx formstudio-cli add intake@3

  3. 03

    Or regenerate from a spec

    If you already exported spec.json, rewrite the three files from it.

    $npx formstudio-cli add --spec ./spec.json

  4. 04

    Install what it printed

    Copy the peer packages from the output. Then add the listed shadcn components.

    $npm install react-hook-form @hookform/resolvers zod lucide-react

Options

--dir
Folder to write. Defaults to components/forms/<form-id>.
--spec
Path to a local spec.json. The three files are regenerated from it.
--registry
Registry origin. Overrides FORMSTUDIO_REGISTRY. Defaults to https://formstudio.dev.
--key
Workspace API key, sent as Authorization: Bearer for a private registry form.
--dry-run
Print the files and install commands. Write nothing.
--force
Overwrite schema.ts, form.tsx and spec.json if they already exist.

Ready to add a form?

Start from a gallery id, or export a spec from the builder and regenerate.

Browse templatesOpen the builder