Skip to main content
FormEngine is a React library that renders forms from JSON schemas. This guide gets you from zero to a working form with validation in under a minute — install, paste a JSON schema, render.
1

Install

npm install @react-form-builder/core @react-form-builder/components-rsuite rsuite
This pulls the JSON form runtime (core) and a ready-made React Suite UI pack. Use Material UI, Mantine, or your own components later — pick whichever fits your app.
2

Paste this JSON schema

{
  "form": {
    "key": "Screen",
    "type": "Screen",
    "children": [
      {
        "key": "email",
        "type": "RsInput",
        "props": { "label": { "value": "Email" } },
        "schema": {
          "validations": [
            { "key": "required" },
            { "key": "email" }
          ]
        }
      },
      {
        "key": "age",
        "type": "RsNumberFormat",
        "props": { "label": { "value": "Age" } },
        "schema": {
          "validations": [{ "key": "min", "args": { "value": 18 } }]
        }
      },
      {
        "key": "submit",
        "type": "RsButton",
        "props": {
          "children": { "value": "Submit" },
          "type": { "value": "submit" }
        }
      }
    ]
  }
}
3

Render the form

import { FormViewer, BiDi } from '@react-form-builder/core'
import { view } from '@react-form-builder/components-rsuite'
import 'rsuite/dist/rsuite.min.css'

import formJson from './form.json'

export default function App() {
  return (
    <FormViewer
      view={view}
      getForm={() => JSON.stringify(formJson)}
      onFormDataChange={(formData) => console.log(formData.data)}
    />
  )
}
Done. You have a working form with email validation, number validation, and live data tracking.
What you just built:
  • A React form rendered from JSON at runtime — change the JSON, the form changes, no redeploy
  • Built-in validation: required, email, min rules work out of the box (Zod under the hood)
  • Live form data via onFormDataChange — ready to send to your API
  • Keyboard, focus, and accessibility behavior inherited from React Suite

​
Next steps

Pick the path that matches what you’re building:

Send data to backend

Submit patterns, error handling, loading states

Use TypeScript

Typed schemas, inferred data types, generic forms

Build visually

Drag-and-drop builder that outputs the same JSON

Switch UI library

Material UI, Mantine, Ant Design, or your own

Add conditional logic

Show/hide fields, derive values from other fields

Custom components

Any React component becomes a form field
Having trouble?
Last modified on April 16, 2026