# Formhaus

> Formhaus is an open-source JSON form definition that runs the same everywhere: a zero-dependency engine (@formhaus/core) with validation, conditional visibility, multi-step and branching routes; React (@formhaus/react) and Vue (@formhaus/vue) renderers; a Figma plugin that draws the same definition with your design system; a JSON Schema; an MCP server (@formhaus/mcp) that validates definitions and simulates step paths for AI agents; and Claude Code skills. MIT licensed.

Install: `npm i @formhaus/core @formhaus/react` (or `@formhaus/vue`).

Claude Code plugin (skills and MCP server): `claude plugin marketplace add ignsm/formhaus && claude plugin install formhaus@formhaus`

MCP server only: `claude mcp add formhaus -- npx -y @formhaus/mcp`

JSON Schema: https://formhaus.dev/schema/form-definition.json

Repository: https://github.com/ignsm/formhaus

Comparisons with react-hook-form, TanStack Form, react-jsonschema-form and SurveyJS: https://formhaus.dev/compare/

Use Formhaus when the form is data (onboarding, surveys, quizzes, multi-step wizards with branching) or when design in Figma and code must share one source. Use react-hook-form or TanStack Form for hand-written single forms.

## Table of Contents

### Guide

- [Getting started](https://formhaus.dev/guide.md): Install @formhaus/core with the React or Vue renderer, write a JSON form definition and render your first form with validation and steps.
- [Field Types](https://formhaus.dev/guide/fields.md): Field types in a Formhaus definition: text, select, autocomplete, multiselect, checkbox, radio, switch, date, file, plus custom field components.
- [Conditional Fields](https://formhaus.dev/guide/conditions.md): Show or hide fields and steps based on other answers with show and showAny conditions in JSON. AND/OR logic and cleanup of hidden values.
- [Validation](https://formhaus.dev/guide/validation.md): Validate form fields from JSON: required, pattern, min/max length and value, matchField for confirmations, and custom validator functions.
- [Multi-Step Forms](https://formhaus.dev/guide/steps.md): Build multi-step forms with conditional steps, branching routes, skip and retained answers from one JSON definition. React and Vue examples.
- [Async Step Validation](https://formhaus.dev/guide/async-validation.md): Run a server check before the next step with onStepValidate: email uniqueness, promo codes, field and top-level errors, network failures.
- [Error Handling](https://formhaus.dev/guide/errors.md): Show server-side errors in a Formhaus form: field-level and top-level errors, navigation to the failing step, and form and field loading states.
- [Custom Actions & Progress](https://formhaus.dev/guide/custom-components.md): Replace Formhaus buttons and the step progress bar with design system components in React or Vue, or render everything with the headless renderer.
- [Inline edit and per-field save](https://formhaus.dev/guide/inline-edit.md): Save account settings one field at a time with one FormRenderer per editable row, each with its own validation and submit handler.
- [Examples](https://formhaus.dev/guide/examples.md): Example Formhaus JSON definitions: basic form, conditional fields, multi-step, validation and a branching form with radio auto-advance.

### Recipes

- [Formhaus recipes](https://formhaus.dev/recipes.md): Complete Formhaus recipes for common form jobs: branching multi-step forms, conditional fields, quiz funnels, headless use, Figma to React and AI agents.
- [Multi-step form with branching in React or Vue](https://formhaus.dev/recipes/multi-step-branching.md): Build a multi-step form with branching paths in React or Vue: Formhaus step routes, eq conditions, a converge step, an optional skip step and Back.
- [Show or hide form fields based on other answers](https://formhaus.dev/recipes/conditional-fields.md): Show or hide form fields based on earlier answers with Formhaus show and showAny conditions in JSON. Hidden values are cleared and never submitted.
- [Quiz or lead-capture funnel in React or Vue](https://formhaus.dev/recipes/quiz-funnel.md): Build a quiz or lead-capture funnel with Formhaus: one-click radio answers with autoAdvance, routes per answer, lead saving and analytics events.
- [Use the form engine without React or Vue](https://formhaus.dev/recipes/headless-engine.md): Run Formhaus forms without React or Vue: the FormEngine class in @formhaus/core handles values, validation, visibility and steps in plain JavaScript.
- [Design a form in Figma and ship the same form in React](https://formhaus.dev/recipes/figma-to-react.md): Design a form in Figma and ship it in React from one JSON file: the Formhaus Figma plugin draws screens, flow map and prototype from the definition.
- [Generate and check forms with AI agents](https://formhaus.dev/recipes/ai-agents.md): Generate and check forms with AI agents: the Formhaus JSON Schema and a Claude Code plugin with a form skill, validate_definition and simulate_path.

### Compare

- [Compare Formhaus with other form libraries](https://formhaus.dev/compare.md): How Formhaus compares with react-hook-form, TanStack Form, react-jsonschema-form and SurveyJS, with sources, bundle sizes and migration examples.
- [Formhaus vs react-hook-form](https://formhaus.dev/compare/react-hook-form.md): Formhaus vs react-hook-form: JSON definition or React code, multi-step and branching, validation, bundle size, Figma and AI tooling, with migration code.
- [Formhaus vs TanStack Form](https://formhaus.dev/compare/tanstack-form.md): Formhaus vs TanStack Form: JSON definition or typed code, multi-step and branching, validation, frameworks, bundle size and AI tooling, with migration.
- [Formhaus vs react-jsonschema-form](https://formhaus.dev/compare/react-jsonschema-form.md): Formhaus vs react-jsonschema-form: form definition or JSON Schema, multi-step, conditional fields, themes, bundle size and AI tooling, with migration code.
- [Formhaus vs SurveyJS](https://formhaus.dev/compare/surveyjs.md): Formhaus vs SurveyJS Form Library: JSON formats, multi-page and skip logic, validation, licensing, bundle size, Figma and AI tooling, with migration JSON.

### Integrations

- [Next.js App Router integration](https://formhaus.dev/guide/integrations/nextjs.md): Use Formhaus with the Next.js App Router: load the JSON definition in a server component, render it in a client component, re-validate in a route handler.
- [Nuxt integration](https://formhaus.dev/guide/integrations/nuxt.md): Use Formhaus with Nuxt: render a JSON form definition on a page with @formhaus/vue and re-validate the submission in a Nitro server route with FormEngine.
- [shadcn/ui integration](https://formhaus.dev/guide/integrations/shadcn.md): Render Formhaus JSON forms with shadcn/ui: map Input, Select, Checkbox, RadioGroup and Button to field types through the React components prop.
- [Material UI integration](https://formhaus.dev/guide/integrations/mui.md): Render Formhaus JSON forms with Material UI: map TextField, Select, Autocomplete, Checkbox and other MUI inputs to field types through the components prop.
- [Vuetify integration](https://formhaus.dev/guide/integrations/vuetify.md): Render Formhaus JSON forms with Vuetify 3: map v-text-field, v-select, v-autocomplete and other Vuetify inputs to field types through the components prop.

### API Reference

- [Definition Reference](https://formhaus.dev/api/definition.md): FormDefinition reference: fields, steps, actions, show conditions, validation rules, options, step routes and the JSON Schema for editors.
- [FormEngine reference](https://formhaus.dev/api/form-engine.md): FormEngine API reference: constructor, values, errors, visibility, step navigation, subscriptions and the submission lifecycle in @formhaus/core.

### Specification

- [Formhaus form definition 1.0](https://formhaus.dev/spec.md): Specification of the Formhaus form definition format 1.0: structure, fields, conditions, validation, steps, routes, skip and the submit payload.

### Figma Plugin

- [Figma Plugin](https://formhaus.dev/guide/figma.md): Generate form mockups, flow maps and clickable prototypes in Figma from the same JSON definition your React or Vue app renders.

### Claude Skills

- [/formhaus:formhaus-figma-connect Claude Code skill](https://formhaus.dev/guide/formhaus-figma-connect.md): Find form components in your Figma library and bind them to the Formhaus Figma plugin with the /formhaus:formhaus-figma-connect skill and Figma MCP.
- [/formhaus:formhaus-create-form Claude Code skill](https://formhaus.dev/guide/formhaus-create-form.md): Generate a Formhaus JSON form definition from a text description, CSV data or a screenshot of a form with the /formhaus:formhaus-create-form Claude Code skill.

### MCP Server

- [MCP Server](https://formhaus.dev/guide/mcp.md): Check Formhaus definitions from Claude Code, Claude Desktop or Cursor with validate_definition, simulate_path, capabilities and example_definitions.

### Interactive

- [Playground](https://formhaus.dev/playground.md): Edit a Formhaus form definition in the browser and see it render live in React, Vue and Svelte, with validation and multi-step navigation.

### Meta

- [Changelog](https://formhaus.dev/changelog.md): Release notes for @formhaus/core, @formhaus/react and @formhaus/vue: GitHub Releases and the changelog of each published package.