Formhaus

Name: Formhaus
Author: ignsm

@ignsmMCP server · External

Validate Formhaus form definitions and simulate multi-step paths against the real engine.

Software testingv0.2.1MITTypeScript

Freeno charge per call

How to install

Runs on your machine from its package; the steps are below.

The Formhaus plugin editing a branching form next to its flow map — From the README · 1 of 2

What it does

Reads
Writes
High impact

Not assessed yet.

What it costs

Free

Odel charges nothing per call. The publisher may charge for its own service.

Runs locally over stdio

This server isn't hosted — your MCP client launches it from a package registry. Use one of the commands below, or drop the config into your client (e.g. Claude Desktop).

npm@formhaus/mcpv0.2.1

Run

npx -y @formhaus/mcp

MCP client config

{
  "mcpServers": {
    "formhaus": {
      "command": "npx",
      "args": [
        "-y",
        "@formhaus/mcp"
      ]
    }
  }
}

README4 min readView on GitHub

Formhaus is a JSON form definition with a zero-dependency engine, React and Vue renderers, a Figma plugin, a JSON Schema and an MCP server for AI agents. One file describes fields, validation, conditional fields, multi-step navigation, branching routes and skippable steps.

Example · Packages · Install · Quick start · Custom components · Figma plugin · Docs · Spec · Playground

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.
A headless engine for Svelte or vanilla JS.

Example

Business accounts get a company step; everyone converges on review.

json

{
  "$schema": "https://formhaus.dev/schema/form-definition.json",
  "id": "signup",
  "title": "Sign up",
  "submit": { "label": "Create account" },
  "steps": [
    {
      "id": "account",
      "title": "Account",
      "fields": [
        { "key": "email", "type": "email", "label": "Email", "validation": { "required": true } },
        { "key": "kind", "type": "radio", "label": "Account type", "autoAdvance": true,
          "options": [{ "value": "personal", "label": "Personal" }, { "value": "business", "label": "Business" }] }
      ],
      "routes": [
        { "to": "company", "show": [{ "field": "kind", "eq": "business" }] },
        { "to": "review" }
      ]
    },
    { "id": "company", "title": "Company", "routes": [{ "to": "review" }],
      "fields": [{ "key": "company", "type": "text", "label": "Company name", "validation": { "required": true } }] },
    { "id": "review", "title": "Review",
      "fields": [{ "key": "terms", "type": "checkbox", "label": "I accept the terms", "validation": { "required": true } }] }
  ]
}

tsx

import { FormRenderer } from '@formhaus/react';
import definition from './signup.json';

<FormRenderer definition={definition} onSubmit={save} />;

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`
`@formhaus/vue`	Vue 3 adapter with native HTML defaults and custom component support	`npm i @formhaus/core @formhaus/vue`
`@formhaus/mcp`	MCP server: validate definitions and simulate paths from AI agents	`claude mcp add formhaus -- npx -y @formhaus/mcp`

@formhaus/figma generates form mockups on the Figma canvas. It is not on Figma Community yet; build it locally, then import packages/figma/manifest.json.

Svelte, Solid, or anything else: use @formhaus/core directly. The playground has a Svelte example.

Install

bash

npm install @formhaus/core

If you need a framework adapter:

bash

npm install @formhaus/core @formhaus/react   # React
npm install @formhaus/core @formhaus/vue     # Vue

Or use @formhaus/core directly with any framework. See the Svelte example.

Quick start

Define a form

Write the JSON by hand, or use the /formhaus:formhaus-create-form Claude Code skill to generate it from a text description, a CSV table, or a screenshot of an existing form.

json

{
  "$schema": "https://formhaus.dev/schema/form-definition.json",
  "id": "contact",
  "title": "Contact Us",
  "submit": { "label": "Send" },
  "fields": [
    {
      "key": "name",
      "type": "text",
      "label": "Name",
      "placeholder": "Your name",
      "validation": { "required": true, "minLength": 2 }
    },
    {
      "key": "email",
      "type": "email",
      "label": "Email",
      "placeholder": "you@example.com",
      "validation": {
        "required": true,
        "pattern": "^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$",
        "patternMessage": "Please enter a valid email address"
      }
    },
    {
      "key": "message",
      "type": "textarea",
      "label": "Message",
      "placeholder": "How can we help?",
      "rows": 4,
      "validation": { "required": true }
    }
  ]
}

React

bash

npm install @formhaus/core @formhaus/react

tsx

import { FormRenderer } from '@formhaus/react';
import definition from './contact-form.json';

function ContactPage() {
  async function handleSubmit(values: Record<string, unknown>) {
    await fetch('/api/contact', {
      method: 'POST',
      body: JSON.stringify(values),
    });
  }

  return <FormRenderer definition={definition} onSubmit={handleSubmit} />;
}

Vue

bash

npm install @formhaus/core @formhaus/vue

vue

<script setup lang="ts">
import { FormRenderer } from '@formhaus/vue';
import definition from './contact-form.json';

async function handleSubmit(values: Record<string, unknown>) {
  await fetch('/api/contact', {
    method: 'POST',
    body: JSON.stringify(values),
  });
}
</script>

<template>
  <FormRenderer :definition="definition" @submit="handleSubmit" />
</template>

By default, both adapters render native HTML inputs. A step can hide Next with next: false, and cancellable async hooks run before and after navigation and submission. See lifecycle hooks.

Custom components

Both adapters accept a components prop (a FieldComponentMap) that lets you swap native HTML inputs for your own UI kit.

React

tsx

import type { FieldComponentMap, FieldComponentProps } from '@formhaus/react';

function MyTextInput({ field, value, error, onChange, onBlur }: FieldComponentProps) {
  return (
    <div>
      <label>{field.label}</label>
      <input
        type={field.type}
        value={(value as string) ?? ''}
        placeholder={field.placeholder}
        onChange={(e) => onChange(e.target.value)}
        onBlur={onBlur}
      />
      {error && <span className="error">{error}</span>}
    </div>
  );
}

const components: FieldComponentMap = {
  text: MyTextInput,
  email: MyTextInput,
};

<FormRenderer definition={definition} onSubmit={handleSubmit} components={components} />;

Vue

vue

<!-- MyTextInput.vue -->
<script setup lang="ts">
import type { FormFieldProps } from '@formhaus/vue';

const props = defineProps<FormFieldProps>();
const emit = defineEmits<{ (e: 'update:modelValue', value: unknown): void }>();
</script>

<template>
  <label>{{ props.field.label }}</label>
  <input
    :value="(props.modelValue as string) ?? ''"
    @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
  />
</template>

vue

<!-- Usage -->
<script setup>
import { FormRenderer } from '@formhaus/vue';
import MyTextInput from './MyTextInput.vue';
</script>

<template>
  <FormRenderer
    :definition="definition"
    :components="{ text: MyTextInput, email: MyTextInput }"
    @submit="handleSubmit"
  />
</template>

Each field component receives the full FormField descriptor, the current value, and any validation error. Implement as many or as few field types as you need. Unmapped types fall back to native HTML.

Figma plugin

@formhaus/figma renders form definitions in Figma with built-in Material 3 and iOS-like kits or with your own components. Branching forms get a flow map, multi-step forms a clickable prototype, and a generated form can be selected, edited and updated in place.

The Formhaus plugin editing a branching form next to its flow map