JSON form definition for React, Vue, Figma and AI agents: validation, conditional fields, multi-step and branching in one file. Zero-dependency core, MCP server, JSON Schema.
The form framework for the AI era.
以下摘录自该仓库的 README(片段) · 在 GitHub 读完整 README →
One JSON definition holds fields, validation, conditions, steps and branching.
Render it in your React or Vue app, or publish it as a hosted form.
React · Vue · MCP · Figma Plugin
Documentation ·
Get started ·
Playground ·
Formhaus Cloud
**Add Formhaus to your coding agent**
Adds the Formhaus MCP server to Claude Code, Codex, Cursor and Claude Desktop. Writes, checks and repairs definitions locally, with no account · Setup for each client
Two independent ways to use it:
- **Use the library.** MIT, no account, no key. The core is framework-agnostic and runs the form in any app; React and Vue renderers are ready to use. Your submit handler sends the data wherever you want. CI tests React 18 and 19, and Vue 3.3 and 3.5.
- **Use Formhaus Cloud.** A hosted form backend: a submission endpoint with server validation, a dashboard and webhooks, plus hosted links, embeds and a visual builder. The first form needs no account.
Build in the browser at app.formhaus.dev, or add the remote MCP server and ask your agent: "Make me a waitlist form and give me the link."
Cloud quickstart · Connect Claude · Dashboard · Pricing
What you get
| Feature | |
|---|---|
| **One definition** | Fields, validation, conditional fields, steps, branching routes, sections and repeatable groups in one JSON file you keep in git |
| **React and Vue** | Native renderers with accessible defaults, or your own components through components |
| **Validation** | Built-in rules and custom validators. validateSubmission() checks the same definition on the server |
| **Agents** | The MCP server writes, validates and fixes definitions. Remote MCP publishes forms and reads responses |
| **i18n** | Translation catalogs and keys for labels, messages and options |
| **Accessibility** | Labels, error summary, focus management and live regions built in |
| **Small core** | Zero dependencies, tree-shakable ESM |
| **Figma** | The plugin renders mockups, flow maps and prototypes from the same definition |
| **Cloud, optional** | Hosted links, embeds, a submission endpoint, CSV export and webhooks |
What it's for
- Multi-step forms with branching in React or Vue.
- Rendering a form from JSON with your own components.
- Designing the form in Figma from the same file.
- Generating and checking definitions with AI agents: Claude Code skills, the MCP server (claude plugin marketplace add ignsm/formhaus && claude plugin install formhaus@formhaus), the JSON Schema and the format specification.
- Translated forms with your own catalogs, or with i18next, vue-i18n and Lokalise keys.
- A headless engine for Svelte or vanilla JS.
Example
Business accounts get a company step; everyone converges on review.
Compare with react-hook-form, TanStack Form, react-jsonschema-form and SurveyJS →
Packages
| Package | Description | npm |
|---------|-------------|-----|
| @formhaus/core | Zero-dependency form engine: types, validation, visibility, multi-step | npm i @formhaus/core |
| @formhaus/react | React adapter with native HTML defaults and custom component support | npm i @formhaus/core @formhaus/react |