@react-form-builder/designer

An Enterprise-Grade React Form Builder with Drag-and-Drop for Complex Forms and No Performance Compromises

📘 Documentation

• Full Documentation
• FAQ
• Guides

📦 Formengine Core Installation — MIT Licensed.

Install the core package and RSuite free form components:

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

📦 Formengine Drag-and-Drop Form Builder Installation — Commercial License.

Install drag-and-drop Form Builder, built on top of the free, MIT-licensed FormEngine Core.

 npm install @react-form-builder/designer

🌍 Free Online Drag & Drop Form Builder

🤝 Powered by Optimajet Premium Support, designed for SaaS and enterprise teams.

• Email Support – Best for: issues with Formengine libraries or environment.
• Community Forum – Best for: help with building, discussion about React form best practices.
• GitHub Issues – Best for: bugs and errors you encounter using Formengine.

🗄️ 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
• Formengine Core 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,
 })

🫶 We hope this project has saved you hours — ⭐ star this repo to support development. Your support keeps Formengine Core open and free.

Formengine — You’re not alone. Forms shouldn’t be this hard!