@react-form-builder/core

v7.11.0

Published

2 days ago

React JSON Schema Form Builder to create complex, validated, reusable forms with no deep React knowledge required

React JSON schema form builder

Struggled with React Hook Form, Formik, or TanStack Form? You’re not alone. It’s time to use something better. Forms shouldn’t be this hard!

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.

Simple Form Example

Simple Form JSON Example

{
  "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"
}

Here’s a simple form example you can use in your React app.

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 = () => (
  <FormViewer
    view={viewWithCss}
    getForm={() => JSON.stringify(simpleForm)}
    actions={{
      onSubmit: (e) => {
        alert('Form data: ' + JSON.stringify(e.data))
      },
    }}
  />
)

📦 Formengine Core Installation

It’s time to use something better. Install the core package and RSuite free form components:

npm install @react-form-builder/core @react-form-builder/components-rsuite

💙 Why developers love Formengine Core?

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.

📘 Documentation

🗄️ Repository structure

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

🧩 Compatibility

Works out of the box with - Next.js.
Fully supports - Remix.

✅ Validation

Built-in Validation with Zod — Pre-configured validation powered by Zod
Extensible Validation Support — Works with Yup, AJV, Zod, Superstruct, Joi, and other libraries

Ready to use Pre-Built RSuite Form UI Components

npm install @react-form-builder/components-rsuite

🟦🟥🟨🟩 Custom components

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

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,
 })

🌍 Free Online Drag & Drop Form Builder

🤝 Support & Community

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.

A premium on-premise React Form Builder with drag-and-drop, built for SaaS and enterprise teams — backed by Optimajet Premium Support

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.

 npm install @react-form-builder/designer

📦 Formengine Core Installation.