Examples

Examples are the easiest way to check that the installed package works before you customize it.

Use them as smoke tests for the pieces you plan to use:

Example type	Verifies
first form	Core model, renderer wiring, registry defaults, and submit payload
validation	JSON Schema validation and visible error behavior
rules	Rule conditions, show/hide effects, required state, and hidden field projection
repeaters	Array layout, row controls, and submission projection
builder	`useFormBuilder`, Core mutations, widget palette, and builder UI

First verification path

After installing Schemaform, render one small form:

import type { FormDefinition } from "@mackehansson/schemaform";
import { SchemaForm } from "@mackehansson/schemaform-shadcn";

const contactForm = {
  formatVersion: 1,
  schema: {
    type: "object",
    required: ["name", "email"],
    properties: {
      name: { type: "string", title: "Name", minLength: 2 },
      email: { type: "string", title: "Email", format: "email" },
      message: { type: "string", title: "Message" },
    },
  },
  uiSchema: {
    pages: [
      {
        type: "Page",
        title: "Contact",
        children: [
          { type: "Control", scope: "#/properties/name" },
          { type: "Control", scope: "#/properties/email" },
          { type: "Control", scope: "#/properties/message", widget: "textarea" },
        ],
      },
    ],
  },
  rules: [],
} satisfies FormDefinition;

export function ContactForm() {
  return (
    <SchemaForm
      definition={contactForm}
      onSubmit={(payload) => console.log(payload)}
    />
  );
}

Once this works, move through the existing docs to add validation, layout, repeaters, rules, custom widgets, and the builder.

First verification path

On this page