Overview

FormKrafter turns a form into data. A form is a JSON spec — a tree of bricks with their validations and rules — and that one spec drives everything: the drag & drop builder, the web and native renderers, and the verdict your backend returns. No component to rewrite per framework, no validation logic duplicated between client and server.

The idea in one pass

A spec, not components

Forms are portable JSON you can store, diff and version. Every builder edit also emits RFC 6902 patches, so undo/redo and audit trails come for free.

One behavior, every renderer

Web Components at the core, React and Vue wrappers generated from the same source, and a React Native renderer sharing the same engine. Pick per app without forking your form logic.

The same verdict everywhere

validateFormData(spec, data) runs on your server and reproduces the frontend result exactly — hidden fields excluded, messages localized.

Rules without eval

Conditional logic in JSON Logic or JavaScript, executed by an AST interpreter: CSP-safe, whitelisted builtins, bounded execution.

The five packages

Package	What it is	You need it when…
formkrafter-core	Headless engine: specs, ops, validation, rules sandbox, services	always (directly on a backend, transitively on a frontend)
formkrafter-wc	The UI as Web Components + the 30 built-in bricks	you render or build forms in the browser
formkrafter-react	Generated React wrappers	your app is React
formkrafter-vue	Generated Vue 3 wrappers	your app is Vue
formkrafter-react-native	Native renderer for the same specs	your app is React Native or Expo

Tip

The wrappers pull in formkrafter-wc and formkrafter-core transitively. Install formkrafter-core on its own only where there is no UI — a Node or Bun backend that validates submitted payloads.

Where to go next

Getting startedInstall, build a form, and validate it on the server — in React, Vue or plain HTML.

Form specsThe BrickSpec shape, immutable operations, patches and undo/redo.

BricksThe 30 built-in bricks and how to register your own.

ValidationDeclarative validators, custom sandboxed ones, and backend parity.

Components referenceProps, events and methods of the builder and the renderer.

Coming from Form.ioConvert existing form definitions and see what you gain.