Open Form is a form framework for the agent era. 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 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 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/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.

Questions + logic in, production form out

The form frameworkbuilt for agents.

Your agent writes the questions and logic. Open Form handles everything that makes them a form — validation, steps, submissions, storage and responses.

Get started

localhost:3000/f/meetup

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

How it works

Three steps to live responses.

Scaffold once, prompt your agent, then ship one server. No builder, no backend to write.

01
Spin up a workspace
One command scaffolds forms/, themes/, the agent skills and Studio. No database to provision.
$npm create open-form@latest my-forms
✓ studio on :3000
02
Ask your agent
It proposes three visual directions, then writes the questions and logic as one small file.
›/create-form RSVP for our meetup
...
03
Share it, collect responses
Build and start one Node server. Responses land in SQLite and show up in Studio.
$pnpm build && pnpm start
✓ responses in sqlite

Features

Just React. And everything around it.

No builder, no schema to keep in sync. A form is a component in your repo — the runtime, the API, the database and the dashboard come with it.

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.

A form is a file.

Fields, pages and conditions 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

...

Prompt to form.

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

Bring your own agent.

Forms are plain .tsx files and the skills are Markdown, so any agent that edits code already works.

POST /api/forms/meetup/submissions201 Created

same-origin · JSONok
windowopen until Oct 30
honeypotempty
timing token4.2s ≥ 2s
rate limit1 / 10 per 10m
validate9 fields, 0 errors
uniqueBy emailnew
maxResponses48 / 100

.open-form/open-form.dbstored as response #48

The backend is included.

Server validation, honeypot, signed timing token, rate limits, response caps and one-per-email — stored in SQLite with no infrastructure to run.

Studio · meetup · Responsesxlsxcsvjson

#	Name	Role	Submitted
48	Mei Chen	Student	just now
47	Kenji Mori	Engineer	2m ago
46	Priya Shah	Designer	9m ago
45	Tom Becker	Product	21m ago

Responses, not a database.

Studio lists every response with search, detail and delete. Export to Excel, CSV or JSON, or send each one to a webhook.

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

Comment. The agent applies.

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

classic
editorial
terminal
brutalist
conversational

Designed, not defaulted.

Five starters to start from. Each form keeps its own copy of its theme, so the look is yours to change. Or have /create-theme match your design system.

FAQ

Questions, answered.

Ship a form in the next minute.

One command, zero infrastructure. Free and open source under the MIT license. Your agent takes it from here.

Read the docs