Define forms as data.
Own the code that renders them.

The data shape and its validation. The single source of truth for what's valid — standard JSON Schema, no proprietary dialect.

{ "type": "string",
  "format": "email" }

Presentation and layout. Which widget renders each field, labels, grouping, order — all without touching the data contract.

{ "widget": "select",
  "label": "Plan" }

Conditional behavior. Show, hide, enable, or require fields based on other answers — evaluated by the core, not your components.

{ "when": { … },
  "show": ["seats"] }

Readable source

Start with the installed package. When you need deeper control, copy the renderer or widgets you want to own.

Swap the renderer

Ship with the first-party ShadCN renderer or wire the hooks to any component stack you already use.

Headless hooks

useFormRenderer() hands you state, validation, and rule evaluation. UI is entirely your call.

Framework-agnostic core

Validation and rules run in a plain TypeScript core. React hooks are a thin layer on top.

Drag-and-drop builder

A visual builder emits the same definition your renderer consumes. No export step, no translation.

JSON Schema standard

Definitions are portable JSON Schema — validate them anywhere, store them in any database, version them in git.

One definition powers both sides.

Admins design a form in the Builder. End users fill it out in the Renderer. Both read the exact same definition envelope — there's nothing to keep in sync.

Author forms with typed helpers.

Write the form once with defineForm, field, layout helpers, and rule helpers. Schemaform returns the same persisted Form Definition envelope, but developers get field-key suggestions and fewer raw JSON pointers.

import { defineForm, field } from "@mackehansson/schemaform";

const signupForm = defineForm({
  fields: {
    email: field.email({ title: "Email", required: true, meta: { iconText: "Use work email" } }),
    plan: field.select({ title: "Plan", options: ["Free", "Enterprise"] }),
    companyName: field.text({ title: "Company" }),
  },
  pages: ({ page }) => [
    page("Signup", ["email", "plan", "companyName"]),
  ],
  rules: ({ rule }) => [
    rule.when("plan").equals("Enterprise").require("companyName"),
  ],
});

import { defineForm, field, SchemaForm } from "@mackehansson/schemaform";

const contactForm = defineForm({
  fields: {
    name: field.text({ title: "Name", required: true }),
    email: field.email({ title: "Email", required: true }),
  },
  pages: ({ page }) => [
    page("Contact", ["name", "email"]),
  ],
});

export function ContactForm() {
  return (
    <SchemaForm
      definition={contactForm}
      onSubmit={(value) => createLead(value)}
    />
  );
}