Skip to main content

​
FormEngine Documentation for React JSON Forms

FormEngine is a set of React tools for building forms from JSON. Use FormEngine Core when you want a schema-driven way to render forms, manage validation, and handle dynamic behavior. Use FormEngine Designer when your team also needs a visual drag-and-drop builder for creating and editing those forms.
FormEngine Core and the main view packages are MIT-licensed. FormEngine Designer is a separate commercial layer with its own licensing flow.
If you want the fastest proof that the model works, start with the quickstart. You will go from install to a working JSON-driven form in a few minutes.

​
What FormEngine gives you

FormEngine Core

Render and manage React forms from JSON. Keep structure, validation, and behavior closer to the schema instead of scattering logic across many components.

UI integrations

Use FormEngine with Next.js, Remix, Material UI, Mantine, shadcn/ui, and other stacks already used in production apps.

FormEngine Designer

Add a visual builder when product teams, operations teams, or non-developers need to create and update forms with less engineering effort.

​
Why teams use it

React forms often start small and become hard to maintain. Validation rules grow, field dependencies multiply, and multi-step workflows create more state, branching, and event logic than expected. FormEngine addresses that by making the form itself a reusable JSON asset instead of a large hand-wired JSX tree. This model is especially useful when:
  • the same workflow appears across multiple screens, apps, or customers
  • the form changes often
  • validation and conditional logic need to stay readable
  • you want a visual builder without giving up code-level control

​
How the model works

Every form is described as JSON. The schema defines structure, fields, layout, validation, and behavior. FormEngine Core renders that schema through the component library you choose. 
npm i @react-form-builder/core @react-form-builder/components-rsuite

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

const formJson = JSON.stringify({
  form: {
    key: 'Screen',
    type: 'Screen',
    children: []
  }
})

export default function App() {
  const getForm = useCallback(() => formJson, [])

  return <FormViewer view={rsView} getForm={getForm} />
}
FormEngine Core is not tied to one UI library. You can use RSuite, Material UI, Mantine, shadcn/ui, or custom components depending on your stack and design system.

​
Choose your path

I want to…Start here
Render a form quickly from JSONQuickstart
Understand how validation worksValidation guide
Build a multi-step workflowMulti-step form tutorial
Handle field dependencies and branchingConditional logic
Use FormEngine with my stackIntegrations
Evaluate the visual builderDesigner overview
Compare schema-driven forms with manual React wiringBuild forms from JSON in code
Start with the pages that match your real job to be done:

​
FAQ

It is both, but in separate layers. FormEngine Core is the JSON-driven React runtime. FormEngine Designer is the visual builder used to create and edit forms.
FormEngine Core is open source and MIT-licensed. The visual Designer is a separate commercial product, so it should be evaluated as a different licensing layer.
It becomes a strong fit when forms are dynamic, reused across teams, or need validation and behavior that would otherwise create a lot of custom React wiring.
No. You can use FormEngine Core on its own and define forms directly in JSON or code.
Open the quickstart, then the multi-step form tutorial or validation guide depending on what you plan to build next.

​
Next steps

Start the quickstart

Build your first working form from JSON.

Open the Online Builder

Create a form visually and export the schema.

Compare alternatives

See how FormEngine differs from manual React form patterns.