Getting Started

Schemaform is install-first. Install the package, import from the main schemaform entrypoint, and render a form with the bundled React hooks and default ShadCN-style renderer.

Most applications should start here:

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

The source is still intentionally easy to browse and copy. If you want to own the renderer, replace the widgets, or fork a layer into your app, use the repository as a source map after you have the installed path working.

Start With Installation

Add Schemaform to a React app:

npm install schemaform

Then render a Form Definition with <SchemaForm />. The default export path includes the core form model, React hooks, validation, rules, the default renderer, widgets, and the form builder helpers.

Create A React App

Start from a normal React app. There are no Next.js assumptions in the copied implementation.

npm create vite@latest my-forms -- --template react-ts
cd my-forms
npm install

Schemaform expects React to be installed by your app. The package brings the form engine, React helpers, and default renderer dependencies with it.

Render your first form

A form definition has a JSON Schema for data and validation, a UI Schema for presentation, and rules for behavior. defineForm writes that envelope for you from typed field keys and layout helpers.

import { defineForm, field } from "@mackehansson/schemaform";import { SchemaForm } from "@mackehansson/schemaform-shadcn";const contactForm = defineForm({fields: {name: field.text({ title: "Name", required: true, minLength: 2 }),email: field.email({ title: "Email", required: true }),message: field.textarea({ title: "Message" }),},pages: ({ page }) => [page("Contact", ["name", "email", "message"]),],});export function App() {  return (    <SchemaForm      definition={contactForm}      onSubmit={(data) => console.log(data)}    />  );}

In a real app, store the form definition wherever your product stores configuration. Schemaform does not own persistence; it owns the model, the hooks, and the rendering contract.

Next, read Authoring Forms to see the field, layout, and rule helpers in more detail.