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

📘 Documentation

- Full Documentation
- FAQ
- Guides

$3

Install the core package and RSuite free form components:

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

$3

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

`bash
npm install @react-form-builder/designer
`

![Formengine Drag and n Drop](https://formbuilder.formengine.io?utm_source=npmjs&utm_medium=banner&utm_campaign=readme)

🌍 Free Online Drag & Drop Form Builder

![Try it now](https://formbuilder.formengine.io/?utm_source=npmjs&utm_medium=article-badge&utm_campaign=readme)
![ChatGPT](https://formengine.io/ai-form-builder?utm_source=npmjs&utm_medium=article-badge&utm_campaign=readme)
![Try Demo](https://demo.formengine.io/?utm_source=npmjs&utm_medium=article-badge&utm_campaign=readme)
![Meet with US](https://optimajet.com/book-a-meeting/?utm_source=npmjs&utm_medium=article-badge&utm_campaign=readme)

🤝 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

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

![Formengine Drag and n Drop](https://formengine.io/react-form-components-library?utm_source=npmjs&utm_medium=article_banne-dndr&utm_campaign=readme)

🟦🟥🟨🟩 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

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

🫶 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!