Schemaform

Schemaform is a React form-building toolkit built around a persisted Form Definition. It gives consuming developers the model, hooks, and renderer contract needed to build two product surfaces from the same source of truth:

• a Form Builder, where admin users design forms
• a Form Renderer, where end users fill those forms out

The package is headless-first. Core is the framework-agnostic engine for JSON Schema, UI Schema, Rules, validation, renderability checks, definition authoring helpers, and definition mutations. React hooks sit on top of Core, and the first-party Renderer is built with ShadCN-style components and React Hook Form.

That split is deliberate. Your product owns the storage, routes, permissions, and surrounding application UI. Schemaform owns the shared form language and the mechanics that make a designed form render consistently.

Two surfaces, one Form Definition

The Form Builder edits a versioned Form Definition:

{
  formatVersion: 1,
  schema,
  uiSchema,
  rules,
}

The Form Renderer consumes that same envelope. Because both surfaces speak the same documents, the builder does not have to generate bespoke renderer code, and the renderer does not have to reverse-engineer builder state.

Headless first

Core knows nothing about ShadCN, React Hook Form, or any component library. A Renderer maps Core's resolved form model to concrete widgets through a Registry. schemaform gives you a ready-made registry and form UI, while custom renderers can use different component stacks.

This is why the hooks are the product surface: you can build a deeply integrated Form Builder or Form Renderer without forking the engine, and still start quickly with the ShadCN Renderer.

What to read next

Start with Getting Started to render a real form in a plain Vite + React app.

Then read Authoring Forms to see how defineForm, field, layout helpers, and rule helpers produce the same persisted Form Definition.

Read Architecture to see how the Form Builder, Form Definition, Core, React hooks, Renderer, Registry, and your app connect.

Read The Three Layers to learn where data validation, presentation, and behavior live inside a Form Definition. Use Extension Points when you need to answer "where do I plug in custom code for this?"