The form framework for the AI era.

Describe a form to share, embed, or use in your app.

Publish your first form Install the library

MIT licensed. No account needed for the library.

claude mcp add -t http formhaus https://api.formhaus.dev/mcp

Connect your AI agent. No account needed for your first form.

An agent writes a waitlist form and publishes it. The same form runs in React, Vue, a hosted page and Figma. Someone fills it in, and the response lands in the dashboard, a webhook and a CSV file.

Try making a form

Edit this example or open the free builder, no signup needed.

Preview

1{2  "$schema": "https://formhaus.dev/schema/form-definition.json",3  "id": "onboarding",4  "title": "Set up your workspace",5  "submit": { "label": "Create workspace" },6  "steps": [7    {8      "id": "workspace",9      "title": "Workspace",10      "fields": [11        {12          "key": "whoIsItFor",13          "type": "radio",14          "label": "Who is it for?",15          "validation": { "required": true },16          "options": [17            { "value": "my-team", "label": "My team" },18            { "value": "just-me", "label": "Just me" }19          ]20        }21      ],22      "routes": [23        {24          "to": "team",25          "show": [{ "field": "whoIsItFor", "eq": "my-team" }]26        },27        { "to": "project" }28      ]29    },30    {31      "id": "team",32      "title": "Team",33      "fields": [34        {35          "key": "company",36          "type": "text",37          "label": "Company",38          "placeholder": "Acme Inc.",39          "validation": { "required": true }40        },41        {42          "key": "teamSize",43          "type": "radio",44          "label": "Team size",45          "validation": { "required": true },46          "options": [47            { "value": "2-10", "label": "2–10" },48            { "value": "11-50", "label": "11–50" },49            { "value": "51", "label": "51+" }50          ]51        }52      ],53      "routes": [{ "to": "invite" }]54    },55    {56      "id": "project",57      "title": "Project",58      "fields": [59        {60          "key": "whatWillYouBuildWith",61          "type": "radio",62          "label": "What will you build with?",63          "validation": { "required": true },64          "options": [65            { "value": "react", "label": "React" },66            { "value": "vue", "label": "Vue" },67            { "value": "something-else", "label": "Something else" }68          ]69        }70      ]71    },72    {73      "id": "invite",74      "title": "Invite",75      "fields": [76        {77          "key": "workEmail",78          "type": "email",79          "label": "Work email",80          "placeholder": "you@company.com",81          "validation": {82            "required": true,83            "pattern": "^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$",84            "patternMessage": "Enter an email like you@company.com"85          }86        }87      ]88    }89  ]90}

Valid definition · 90 linesJSON

Publish it, collect responses

Formhaus Cloud gives every form a link, an embed and a dashboard. Free for 5 forms.

Formhaus Cloud dashboard showing the Responses tab of a Contact us form, with seven submissions listing name, email, message, form version and when each was sent.

Learn about Cloud

Use your own components

Build forms in React or Vue with your design system.

Live formcontact-form.json

ContactForm.tsx · 7 lines

1import { FormRenderer } from '@formhaus/react';2import '@formhaus/core/style.css';3import definition from './contact-form.json';45export const ContactForm = (props) => (6  <FormRenderer definition={definition} {...props} />7);

See your form in Figma

One JSON file powers your app, hosted form and Figma mockups.

Account formFlow mapFormhaus plugin

A branching account form laid out in Figma as a flow map with labelled arrows

Make your first form

Publish your first form Install the library