# Open Form

- [Introduction](/docs): Open Form is a form framework for coding agents: your agent writes each form as a React file, and Open Form adds validation, submissions, storage and Studio.
- [Getting started](/docs/getting-started): Scaffold a workspace, have your coding agent write a form, preview it in Studio and collect your first response in a few minutes.

- **Core features**
- [Studio](/docs/core-feature/studio): Browse forms, preview them on every device, read responses and adjust the schedule.
- [Edit mode & comments](/docs/core-feature/edit-mode): Select anything in the preview, change its text in place, or leave a note for your agent.
- [Themes](/docs/core-feature/themes): Five starters and your own references to start from. Each form's look is written for it, with only what it uses.
- [Submissions & protection](/docs/core-feature/submissions): Limits, deadlines, one response per person, spam protection and what happens after submit.
- [Languages](/docs/core-feature/languages): Write a form in one language, translate it into others, and keep every response in one table.
- [Responses & export](/docs/core-feature/responses): Where responses are stored, how to browse them in Studio, and how to get them out.

- **Components**
- [Form](/docs/components/form): The root Form component and the form file contract: one file per form, render-to-collect, props, themes, Submit and the Success screen.
- [Page](/docs/components/page): Split a form into steps with Page: progress, Back and Next buttons and per-step validation built in, plus Row, Heading and Paragraph for layout.
- [Fields](/docs/components/fields): Every built-in field, from text and choices to ratings, matrices and phone numbers: what each one stores and how it's validated on both sides.
- [When](/docs/components/when): Conditional logic for forms: show fields and steps only while a condition on earlier answers holds, and the server drops hidden answers too.
- [Custom fields](/docs/components/custom-fields): Turn any React UI into a form field with useField and FieldShell: value, validation, errors, focus, ARIA and storage, just like the built-ins.
- [Layouts and chrome](/docs/components/layouts): Replace how fields, steps and screens look without touching behavior: theme components, the Stepper, Split and Focus layouts, and closed screens.
- [Live answers and navigation](/docs/components/hooks): Hooks for live previews, answer summaries, custom navigation and translated copy: useFormValues, useFieldValue, useFormNav and more.

- **Skills**
- [Overview](/docs/skills/overview): How Open Form works with your coding agent: the skills and AGENTS.md rules in every workspace, which skill fits which request, and how they update.
- [/create-form](/docs/skills/create-form): The /create-form skill takes a one-line request to a reviewed, working form: it asks what it needs, proposes three looks and writes the form.
- [/form-authoring](/docs/skills/form-authoring): The technical reference the agent reads before writing or editing a form.
- [/create-theme](/docs/skills/create-theme): Turns your design system, a screenshot or a brief into a reference theme for new forms.
- [/current-form](/docs/skills/current-form): Resolves "this form", "this step" and "this field" to a file and a line.
- [/apply-comments](/docs/skills/apply-comments): The /apply-comments skill turns the notes you leave on a form in Studio's Edit mode into code edits, then removes each marker it applied.

- **CLI**
- [Overview](/docs/cli/overview): One open-form CLI to scaffold, develop, check, build and serve forms, and the package.json scripts every workspace gets.
- [open-form init](/docs/cli/init): Scaffold a forms workspace with npm create open-form: forms, themes and agent skills, installed with the package manager you ran it with.
- [open-form dev](/docs/cli/dev): Run the dev server: Studio, every form at /f/<id> with hot reload, skills kept in sync, and what you are looking at shared with your agent.
- [open-form build](/docs/cli/build): Build your forms, Studio and server into dist/ for production with open-form build, then serve the result with open-form start.
- [open-form start](/docs/cli/start): Serve the production build from one Node process: form pages, Studio, the submission and admin API, and responses in SQLite on a persistent disk or in Postgres.
- [open-form check](/docs/cli/check): Load forms the way the server does and print their schema, or the exact error.
- [open-form create](/docs/cli/create): Create a new form from the starter at forms/<id>/index.tsx, with its own theme/index.ts, optionally starting from a theme's tokens, and print its preview path.
- [open-form delete](/docs/cli/delete): Delete a form for good: its responses, schema versions, Studio settings and its folder in forms/. Export the responses first to keep them.
- [open-form list](/docs/cli/list): List every form in the workspace with its id, title, response count and source file, read without starting a server.
- [open-form responses export](/docs/cli/responses-export): Export a form's responses from the workspace's database (SQLite or Postgres) as CSV, Excel or JSON, to stdout or a file, oldest first.
- [open-form db](/docs/cli/db): See which database stores this workspace's responses and whether it answers, and copy a SQLite database into Postgres.
- [open-form theme](/docs/cli/theme): List reference themes, check contrast, add a starter, and add Google Fonts.
- [open-form comments](/docs/cli/comments): List the notes left in Studio's Edit mode, saved as @form-comment markers in each form's source, so your agent can apply them.
- [open-form sync:skills](/docs/cli/sync-skills): Update the agent skills in your workspace from the installed open-form.

- **Deploy**
- [Production](/docs/deploy/production): Build once, run one Node process, and keep the database on a persistent disk.
- [Docker](/docs/deploy/docker): Self-host Open Form with Docker: build the workspace into an image, run open-form start, and keep responses and the signing secret on a volume.
- [Railway](/docs/deploy/railway): Deploy from GitHub without a Dockerfile and keep responses on a Railway volume.
- [Postgres](/docs/deploy/postgres): Keep responses in Postgres instead of a SQLite file: Supabase, Neon, RDS, Railway or your own server. Set one connection string; Open Form creates its tables.
- [Vercel](/docs/deploy/vercel): Deploy a whole Open Form project to Vercel, with responses in Neon or Supabase Postgres.
- [Next.js](/docs/deploy/nextjs): Mount the Open Form API in a Next.js app and render forms in your own pages.
- [Embed on another site](/docs/deploy/embed): Embed a form on a blog, landing page or docs site with one snippet or an iframe that grows to fit, after allowing the site in your config.
- [Webhooks](/docs/deploy/webhooks): POST every new response to Zapier, your own API or any other service, signed and retried.

- **Reference**
- [defineForm](/docs/reference/define-form): Every key of a form's config export, with defaults: title, language, schedule, submission limits, spam protection, drafts and the success screen.
- [open-form.config.ts](/docs/reference/config): Project-wide settings in open-form.config.ts: storage, port, locale, protection, proxies, webhooks, embedding and Studio access.
- [defineTheme](/docs/reference/define-theme): Every defineTheme option: color tokens, dark mode, fonts, radius and spacing, theme components, contrast checks and the --of-* CSS variables.
- [HTTP API](/docs/reference/http-api): The routes every Open Form server answers under /api, and the handler behind them.
- [Storage](/docs/reference/storage): The SQLite database, Postgres, the StorageAdapter interface and its built-in adapters.