Open Form is an open-source form framework for the agent era, for sign-ups, surveys, applications and feedback. A form is a small React component in your repo — questions, conditions and submission rules. Open Form supplies the runtime around it: state, validation on the client and the server, multi-step flow, accessible responsive UI, the submission API, spam protection, SQLite storage and a Studio for previews and responses.

How is it different from Typeform, Google Forms or Tally?

Those are hosted form builders: the form and the answers live in someone else’s product. With Open Form the form is code in your repo — reviewed in pull requests, written by your agent — and everything is self-hosted: the responses live in a SQLite file on your own server. There is deliberately no drag-and-drop builder.

How is it different from React Hook Form or Formik?

Those manage form state in the browser and leave the rest to you. Open Form also ships the server side: one set of validation rules that runs in the browser and in the API, conditional fields that are dropped on the server when hidden, response limits, deadlines, rate limiting, storage, export and a dashboard.

Which coding agents work with Open Form?

Any agent that can edit files. Every workspace ships an AGENTS.md (with CLAUDE.md pointing to it) and five skills — create-form, form-authoring, create-theme, current-form and apply-comments — that Claude Code, Codex, Cursor, Gemini CLI, OpenCode, Windsurf and Zed can use. There is no proprietary protocol.

Where are responses stored?

In .open-form/open-form.db, a SQLite database created by Node’s built-in node:sqlite — no database server, no native addon. The folder is gitignored, because responses are personal data. Export to Excel, CSV or JSON from Studio or the CLI, send each new response to a webhook, or plug in your own StorageAdapter.

Can I use it inside my Next.js app?

Yes. @open-form-build/core/next mounts the submission and admin API as a route handler, and renders a form inside any React page. Validation still comes from the same form files.

Is Open Form open source?

Yes, under the MIT license. The whole framework is one npm package, @open-form-build/core. It needs Node.js 22.13 or later and starts with npm create open-form@latest.

OF-01Open-source form framework

Forms your agent writes.Responses you own.

Describe the form to your coding agent. It writes one React file, and Open Form turns that file into a working form: checked in the browser and on the server, with a submission API, storage and a dashboard for the answers.

Get started

Written by: Your coding agent
Runs on: One Node server
Stored in: SQLite, on your disk
License: MIT

localhost:3000/f/intake

Demo · nothing leaves your browserReal runtime

02Data flow

The life of a response.

Every answer takes the same path, and every check along it comes from the one file your agent wrote.

Stop 1 of 5 · Browser

Checked as they type.

Required fields, formats and limits come from the form file, so mistakes are caught before anything is sent.

localhost:3000/f/meetup

Email *mei@example.comLooks good.

<Email name="email" label="Email" required />

The server reads this same line and runs the same check.

03Authoring

Written by your agent. Reviewed by you.

A form is one React component in your repo. Your agent drafts it, Studio previews it, and your notes go back into the file.

Fields docs

forms/beta/index.tsxtsx · 14 lines

import { defineForm, Email, Form, Select, Submit, Text } from '@open-form-build/core';
 
export const config = defineForm({ title: 'Join the beta' });
 
export default function Beta() {
  return (
    <Form>
      <Text name="name" label="Name" required />
      <Email name="email" label="Work email" required />
      <Select name="team" label="Team size" options={sizes} />
      <Submit>Request access</Submit>
    </Form>
  );
}

live form

Each field brings its label, validation and ARIA. Submit it empty: the browser shows the same errors the server would return.

3.1

One file holds the whole form.

Fields, pages, conditions and submission rules are components in one .tsx file. Open Form renders it once on the server to learn its fields, so the browser and the API enforce the same rules.

/create-forma meetup registration, 100 seats

...

3.2

/create-form writes the first draft.

It asks what it needs, proposes three visual directions for your audience, then writes the form and checks it.

3.3

Works with the agent you already use.

Forms are plain .tsx files and the skills are Markdown, so any agent that edits code can write one.

forms/meetup/index.tsx

<Page title="About you">
  <Text name="name" label="Name" required />
  <Tel name="phone" label="Phone" description="Only if the venue changes." />
</Page>

AgentApplied · marker removed

3.4

Mark it up like a paper form.

Select anything in Studio's Edit mode and leave a note. It lands in the source as a comment, and /apply-comments makes the change.

04Fields

Thirteen fields. Then your own.

Each one is checked in the browser and on the server, and stored as its own column in Responses. Your theme can restyle or replace each one to match your design, and what it stores stays the same. When none fits, useField turns any React input into one.

Field index13 + yours

<Text> · stored as stringDocs ↗

StoredSubmit to see the value.Same code · same stored value

Length limits and patterns, trimmed before it is checked.

<Text name="name" label="Name on your badge" required maxLength={40} />

Plus four layouts: the default card, StepperLayout, SplitLayout and FocusLayout. Layouts

05Looks

Same questions, five starting looks.

Each form's look is written for it from a theme, so restyling one never changes another. Start from a starter, or have /create-theme match your design system.

localhost:3000/f/meetup

The real runtime: validation, conditions and steps all work. Themes

06Compare

Not a builder. Not just a library.

Builders keep the form and the answers in their product. Libraries stop at the browser. Open Form keeps the form in your repo and brings the backend with it.

The form is

Open Form: Code in your repo
Hosted builders: A document in their app
Form libraries: Code in your repo

Who writes it

Open Form: Your agent, with built-in skills
Hosted builders: You, in their editor
Form libraries: You, in code

Validation

Open Form: One set of rules, run in the browser and on the server
Hosted builders: Theirs
Form libraries: In the browser; the server is yours to write

Submission API

Open Form: Included
Hosted builders: Theirs
Form libraries: You build it

Spam and limits

Open Form: Honeypot, timing token, rate limits, caps
Hosted builders: Theirs
Form libraries: You build it

Responses

Open Form: Studio, with Excel, CSV and JSON export
Hosted builders: Their dashboard
Form libraries: You build it

Where answers live

Open Form: A SQLite file on your server
Hosted builders: Their servers
Form libraries: Wherever you put them

Changes reviewed in

Open Form: Pull requests
Hosted builders: Their editor
Form libraries: Pull requests

Open Form compared with hosted builders and libraries
Aspect	Hosted buildersTypeform, Tally, Google Forms	Form librariesReact Hook Form, Formik	Open Formnpm create open-form
The form is	A document in their app	Code in your repo	Code in your repo
Who writes it	You, in their editor	You, in code	Your agent, with built-in skills
Validation	Theirs	In the browser; the server is yours to write	One set of rules, run in the browser and on the server
Submission API	Theirs	You build it	Included
Spam and limits	Theirs	You build it	Honeypot, timing token, rate limits, caps
Responses	Their dashboard	You build it	Studio, with Excel, CSV and JSON export
Where answers live	Their servers	Wherever you put them	A SQLite file on your server
Changes reviewed in	Their editor	Pull requests	Pull requests

07FAQ

What people ask first.

08Get started

Sign here.

Three steps from an empty folder to your first response. Free and open source under the MIT license.

01Scaffold a workspace
forms/, themes/, the agent skills and Studio. No database to set up.
$npm create open-form@latest my-forms
02Ask your agent
It proposes three visual directions, then writes the form as one small file.
›/create-form RSVP for our meetup
...
03Ship one server
Build and start it. Responses land in SQLite; set OPEN_FORM_ADMIN_PASSWORD to read them in Studio.
$npm run build && npm start

Read the docs

OF-01 · MIT