Name	Name	Last commit message	Last commit date
Latest commit History 74 Commits
community	community
premium	premium
screenshots	screenshots
.gitignore	.gitignore
LICENSE	LICENSE
README.md	README.md

License MIT Closed Issues Release date Total Downloads

Lightweight React JSON Schema form builder library for MUI, Shadcn, RSuite, Mantine, Tailwind, Bootstrap

Supported Themes

Supported Themes — coming soon (click link to check status)

Bundle size FormEngine Core (for comparison with popular libraries)

Package	Total size JS + CSS (raw/gzip)	Framework / Library	Description
FormEngine Core	618.80 KB / 188.54KB	React	FormEngine Core + MUI
survey	1.47 MB / 391.72KB	Plain JavaScript + React	survey-react + MUI
vueform	467.35 KB / 141.09K	Vue3	Tree-shaked vueform + MUI CSS
React JSON Schema Form	721.54 KB / 231.62KB	React	RJSF + MUI

Bundle sizes are approximate and depend on build configuration, tree-shaking, and selected features. We are preparing a public benchmark for comparing assembly sizes..

📦 FormEngine Core MUI Installation

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

npm install @react-form-builder/core @mui/material @emotion/react @emotion/styled @react-form-builder/components-material-ui

Simple Form Example

FormEngine

Simple Form JSON Example

{
 "form": {
 "key": "Screen",
 "type": "Screen",
 "children": [
 {
 "key": "name",
 "type": "MuiTextField",
 "props": {
 "label": {
 "value": "Name"
 }
 }
 },
 {
 "key": "email",
 "type": "MuiTextField",
 "props": {
 "label": {
 "value": "Email"
 }
 }
 },
 {
 "key": "submit",
 "type": "MuiButton",
 "props": {
 "appearance": {
 "value": "primary"
 },
 "children": {
 "value": "Submit"
 }
 },
 "events": {
 "onClick": [
 {
 "name": "validate",
 "type": "common"
 }
 ]
 }
 }
 ]
 }
}

Click to see how you can define your entire form in JSON and render it with FormEngine Core.

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

import {view as muiView} from '@react-form-builder/components-material-ui'
import {FormViewer} from '@react-form-builder/core'
const simpleForm = {
 'errorType': 'MuiErrorWrapper',
 'form': {
 'key': 'Screen',
 'type': 'Screen',
 'children': [
 {
 'key': 'name',
 'type': 'MuiTextField',
 'props': {
 'label': {
 'value': 'Name'
 }
 },
 'schema': {
 'validations': [
 {
 'key': 'required'
 }
 ]
 }
 },
 {
 'key': 'email',
 'type': 'MuiTextField',
 'props': {
 'label': {
 'value': 'Email'
 }
 },
 'schema': {
 'validations': [
 {
 'key': 'required'
 },
 {
 'key': 'email'
 }
 ]
 }
 },
 {
 'key': 'submit',
 'type': 'MuiButton',
 'props': {
 'appearance': {
 'value': 'primary'
 },
 'children': {
 'value': 'Submit'
 }
 },
 'events': {
 'onClick': [
 {
 'name': 'validate',
 'type': 'common',
 'args': {
 'failOnError': true
 }
 },
 {
 'name': 'onSubmit',
 'type': 'custom'
 }
 ]
 }
 }
 ]
 }
}
export const App = () => (
 <FormViewer
 view={muiView}
 getForm={() => JSON.stringify(simpleForm)}
 actions={{
 onSubmit: (e) => {
 alert('Form data: ' + JSON.stringify(e.data))
 },
 }}
 />
)

💙 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

FormEngine Drag and n Drop

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

Try it now ChatGPT

🤝 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

Contributions welcome Try Demo Meet with US

FormEngine Drag and n Drop

📦 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

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

FormEngine Documentation LLMs.txt LinkedIn YouTube dev.to Join Community

License

optimajet/formengine

Folders and files

Latest commit

History

Repository files navigation