React JSON Schema Form Builder to create complex, validated, reusable forms with no deep React knowledge required
npm install @react-form-builder/core
That’s why we built Formengine Core — a JSON-first React Form Renderer and open-source form engine for React. Describe your form in JSON and
render it across your apps. No hooks. No context. No boilerplate. No pain.
``json `
{
"version": "1",
"errorType": "RsErrorMessage",
"form": {
"key": "Screen",
"type": "Screen",
"props": {},
"children": [
{
"key": "name",
"type": "RsInput",
"props": {
"label": {
"value": "Name"
}
}
},
{
"key": "email",
"type": "RsInput",
"props": {
"label": {
"value": "Email"
}
},
"schema": {
"validations": [
{
"key": "email"
}
]
}
},
{
"key": "submit",
"type": "RsButton",
"props": {
"appearance": {
"value": "primary"
},
"children": {
"value": "Submit"
}
},
"events": {
"onClick": [
{
"name": "validate",
"type": "common",
"args": {
"failOnError": true
}
},
{
"name": "onSubmit",
"type": "custom"
}
]
}
}
]
},
"localization": {},
"languages": [
{
"code": "en",
"dialect": "US",
"name": "English",
"description": "American English",
"bidi": "ltr"
}
],
"defaultLanguage": "en-US"
}
Click to see how you can define your entire form in JSON and render it with Formengine Core.
`tsx
import {viewWithCss} from '@react-form-builder/components-rsuite'
import {FormViewer} from '@react-form-builder/core'
const simpleForm = {
version: '1',
errorType: 'RsErrorMessage',
form: {
key: 'Screen',
type: 'Screen',
props: {},
children: [
{
key: 'name',
type: 'RsInput',
props: {
label: {
value: 'Name'
}
}
},
{
key: 'email',
type: 'RsInput',
props: {
label: {
value: 'Email'
}
},
schema: {
validations: [
{
key: 'email'
}
]
}
},
{
key: 'submit',
type: 'RsButton',
props: {
appearance: {
value: 'primary'
},
children: {
value: 'Submit'
}
},
events: {
onClick: [
{
name: 'validate',
type: 'common',
args: {
failOnError: true
}
},
{
name: 'onSubmit',
type: 'custom'
}
],
}
}
]
},
localization: {},
languages: [
{
code: 'en',
dialect: 'US',
name: 'English',
description: 'American English',
bidi: 'ltr'
}
],
defaultLanguage: 'en-US'
}
export const App = () => (
getForm={() => JSON.stringify(simpleForm)}
actions={{
onSubmit: (e) => {
alert('Form data: ' + JSON.stringify(e.data))
},
}}
/>
)
`
It’s time to use something better. Install the core package and RSuite free form components:
`bash `
npm install @react-form-builder/core @react-form-builder/components-rsuite
- Open Source & Free Forever – No vendor lock-in, no nonsense.
- Less Code, Fewer Bugs – Logic and UI stay separate.
- JSON-First Architecture – Define, render, and validate without touching React internals.
- UI-Agnostic Components — Works seamlessly with any UI library (MUI, Ant Design, shadcn/ui, and others).
- Framework-Agnostic — Can also be used without any framework via CDN.
- Multi-Database Support — Compatible with MySQL, PostgreSQL, MongoDB, SQLite, and more.
- Built-in Validation with Zod — Pre-configured validation powered by Zod.
- Extensible Validation Support — Works with Yup, AJV, Zod, Superstruct, Joi, and other libraries.
- Localization - Powerful capabilities for localizing forms using Fluent.js.
- Responsive Layouts — Build forms that automatically adapt to all screen sizes.
- Custom Actions — Enhance forms with interactive logic through custom JavaScript.
- Dynamic Properties — Enable real-time component updates with MobX-powered reactivity.
- Pre-Built RSuite Integration — Includes a ready-to-use component library: @react-form-builder/components-rsuite.
- Flexible Storage Options
- Store complete form definitions as JSON.
- Programmatically generate forms via code.
- Full Documentation
- FAQ
- Guides
- Community: Formengine Core source code and examples for FormEngine Community (MIT license).
- Premium: Examples for Premium On-Premise Drag-and-Drop React Form Builder (Commercial license). Premium On-Premise Drag-and-Drop React
Form Builder
- Source Code
- Works out of the box with - Next.js.
- Fully supports - Remix.
- Built-in Validation with Zod — Pre-configured validation powered by Zod
- Extensible Validation Support — Works with Yup, AJV, Zod, Superstruct, Joi, and other libraries
`bash `
npm install @react-form-builder/components-rsuite
Component description consists of defining meta-information about the component - component name, component type, component properties.
Meta-information on component properties in Formengine is called an annotation.
Well, let's describe some existing component from the popular MUI library. As an example, let's take a Button:
#### Example of a custom component definition
`tsx
import {Button} from '@mui/material'
import {define, disabled, event, oneOf, string} from '@react-form-builder/core'
// Let's call our component matButton, using the prefix 'mat' to make it easy to understand
// from the name that the component belongs to the MUI library.
//
// Here we call the define function and pass it two parameters - the Button component
// and the unique name of the component type.
export const matButton = define(Button, 'MatButton')
// component name displayed in the component panel in the designer
.name('Button')
// define the component properties that we want to edit in the designer
.props({
// button text
children: string.named('Caption').default('Button'),
// button color
color: oneOf('inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'),
// button disable flag
disabled: disabled,
// callback fired when the button is clicked.
onClick: event,
})
`
- Community Forum – Best for:
help with building, discussion about React form best practices.
- GitHub Issues – Best for: bugs
and errors you encounter using Formengine.
- Email Support – Best for: issues with Formengine
libraries or environment.
#### React Form Builder - That Developers Can Customize and Teams Can Use
A powerful commercial drag-and-drop form builder for React, built on top of the free, MIT-licensed FormEngine Core. Advanced form logic, UI
controls, export, and integrations.
`bash `
npm install @react-form-builder/designer
It’s time to use something better. Install the core package and RSuite free form components:
`bash ``
npm install @react-form-builder/core @react-form-builder/components-rsuite
#### Formengine Core — You’re not alone. Forms shouldn’t be this hard!
