Skip to main content

​
What is FormEngine?

FormEngine is a React library that renders fully functional forms from JSON schemas. You define the form structure, validation rules, conditional logic, and layout in a single JSON object — FormEngine handles rendering, state management, and user interaction automatically.
Free and open-source. The core runtime is MIT-licensed — no seat limits, no attribution required, no cost. Production-ready today.

​
What you get

CapabilityHow it works
JSON-driven formsDescribe any form as a JSON object — FormEngine renders it as a React component
Built-in validationZod-backed rules declared in the schema, no extra wiring
Conditional logicShow/hide fields, compute values, change options — all from JSON
Pluggable UISame schema renders with Material UI, Mantine, React Suite, or your own components
No redeployUpdate the JSON → the form updates instantly in production
TypeScriptTyped schemas, typed props, typed data — end to end

​
How FormEngine is different

If you’ve used React Hook Form, Formik, or similar libraries — FormEngine replaces the pattern where you write JSX for every field with a declarative JSON approach. Add a field by adding a line to JSON, not by writing a new component.
React Hook Form / FormikFormEngine
Form definitionJSX + hooks per fieldOne JSON object
Add a new fieldNew React component + validation codeOne line in JSON
Change form at runtimeRebuild and redeployUpdate JSON, no redeploy
Conditional visibilityCustom JSX logicDeclared in schema
UI libraryTied to one librarySame schema → MUI, Mantine, RSuite, custom
Visual builderNoneFormEngine Designer (embeddable)
LicenseMITMIT (Core)

​
Minimal code example

import { FormViewer } from '@react-form-builder/core'
import { view } from '@react-form-builder/components-rsuite'

<FormViewer view={view} getForm={() => myFormSchema} />
Three lines: import the runtime, import a UI library adapter, render the form from your JSON schema.

Quick Start

Working form in 60 seconds

NPM Package

Install from npm registry

GitHub

Source code and issues

​
The FormEngine Suite

FormEngine is not just a library — it’s an ecosystem of four tools that share the same JSON schema format.

FormEngine Core

Free forever — MIT license, no limitsOpen-source React runtime. JSON in, form out. Works with Material UI, React Suite, Mantine, or your own components. Validation, conditional logic, computed properties, localization, TypeScript. No seat limits, no attribution required.

FormEngine Designer

Commercial — embeddable visual builderDrag-and-drop form builder that you embed directly into your React app. Non-technical users create and edit forms visually. Outputs the same JSON that Core renders. White-label ready. Includes premium components: Data Grid, Rich Text, Signature, Maps, QR Code.

Online FormBuilder

Hosted, freeBuild forms in your browser — no setup, no install. Prototype, test components, export JSON for use with Core. Perfect for quick experiments.

AI Form Builder

Hosted, free previewDescribe your form in plain English — AI generates the JSON schema. Output plugs straight into Core.

​
How the pieces fit together

All four tools produce the same FormEngine JSON schema. Core reads that JSON and renders it as a React form using your chosen UI library. You can mix and match: generate a base schema with AI → refine it in Designer → render with Core in production.

​
Choose Your Path

Ship a form in 60 seconds

Get a working form up and running with just a few lines of code.

Browse 35+ components

Fields, layouts, and actions — all free with MIT license.

Write forms in code

Build forms with JSON or JSX. Full control, type-safe, MIT-licensed.

Build forms visually

Drag-and-drop builder for non-technical users. Embed in your app.

Compare alternatives

FormEngine vs React Hook Form, Formik, SurveyJS, form.io, and more.

Migrate from existing lib

Switching from React Hook Form or Formik? Step-by-step guides.

​
What’s Inside

Get up and running with hands-on guides and best practices.
Get started with real-world examples and step-by-step guides.

Build forms in code

Learn JSON and JSX patterns for crafting form schemas programmatically.

Track form changes

Implement dirty state detection to notify users about unsaved changes.

Cascading dropdowns

Dynamically populate fields based on user selections—linked dropdowns in action.

Dynamic field arrays

Add, remove, and manage repeating form sections with the Repeater component.

Maps & address autocomplete

Integrate Google Maps and address autocomplete for location-based forms.

Migrate from React Hook Form

Step-by-step guide to switch from React Hook Form to FormEngine.

​
Community & Support

Contributing? We welcome bug reports, feature requests, and pull requests. The FormEngine core is open-source and maintained by the community and the core team.
Last modified on April 16, 2026