https://github.com/optimajet/formengine
Lightweight React JSON Schema form builder with true cross-application form reuse. Build once, deploy everywhere, with no deep React knowledge required.
https://github.com/optimajet/formengine
form-material-ui json-form jsonform jsonforms lightweight-form-builder-plugin material-ui-form mui-forms react-form-builder react-form-component react-form-validator react-forms react-hook-form react-jsonschema-form reactform reactforms rjsf-form rjsf-material-ui
Last synced: 10 days ago
JSON representation
Lightweight React JSON Schema form builder with true cross-application form reuse. Build once, deploy everywhere, with no deep React knowledge required.
- Host: GitHub
- URL: https://github.com/optimajet/formengine
- Owner: optimajet
- License: mit
- Created: 2023-10-20T08:57:51.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2026-01-16T19:34:47.000Z (11 days ago)
- Last Synced: 2026-01-17T07:23:56.113Z (11 days ago)
- Topics: form-material-ui, json-form, jsonform, jsonforms, lightweight-form-builder-plugin, material-ui-form, mui-forms, react-form-builder, react-form-component, react-form-validator, react-forms, react-hook-form, react-jsonschema-form, reactform, reactforms, rjsf-form, rjsf-material-ui
- Language: TypeScript
- Homepage: https://formengine.io
- Size: 8.78 MB
- Stars: 149
- Watchers: 5
- Forks: 32
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://formengine.io/documentation/?utm_source=github&utm_medium=banner-top&utm_campaign=readme#quick-start)
[](https://github.com/optimajet/formengine/blob/master/LICENSE)
[](https://github.com/optimajet/formengine/issues?q=is%3Aissue+is%3Aclosed)
[](https://github.com/optimajet/formengine/releases)
[](https://www.npmjs.com/package/@react-form-builder/core)
# Lightweight React JSON Schema form builder library for MUI, Shadcn, RSuite, Mantine, Tailwind, Bootstrap
## Supported Themes
- [**MUI**](https://formengine.io/react-form-components-library/mui/?utm_source=github&utm_medium=article&utm_campaign=readme&utm_term=mui)
- [**shadcn/ui**](https://formengine.io/react-form-components-library/shadcn-ui/?utm_source=github&utm_medium=article&utm_campaign=readme&utm_term=shadcn)
- [**React Suite**](https://formengine.io/react-form-components-library?utm_source=github&utm_medium=article&utm_campaign=readme&utm_term=rsuite#free)
- [**Mantine UI**](https://formengine.io/react-form-components-library/mantine/?utm_source=github&utm_medium=article&utm_campaign=readme&utm_term=mantine)
## Supported Themes — coming soon (click link to check status)
- [**Tailwind**](https://formengine.io/react-form-components-library/tailwind/?utm_source=github&utm_medium=article&utm_campaign=readme&utm_term=tailwind)
- [**Ant Design**](https://formengine.io/react-form-components-library/ant-design/?utm_source=github&utm_medium=article&utm_campaign=readme&utm_term=ant-design)
- [**Bootstrap**](https://formengine.io/react-form-components-library/bootstrap/?utm_source=github&utm_medium=article&utm_campaign=readme&utm_term=bootstrap)
- [**Chakra-UI**](https://formengine.io/react-form-components-library/chakra-ui/?utm_source=github&utm_medium=article&utm_campaign=readme&utm_term=chakra-ui)
- [**daisyUI**](https://formengine.io/react-form-components-library/daisyui/?utm_source=github&utm_medium=article&utm_campaign=readme&utm_term=daisyui)
## 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:**
```bash
npm install @react-form-builder/core @mui/material @emotion/react @emotion/styled @react-form-builder/components-material-ui
```
## Simple Form Example
[](https://formengine.io/documentation/?utm_source=github&utm_medium=article_banner-for&utm_campaign=readme#quick-start)
## Simple Form JSON Example
```json
{
"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
```tsx
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 = () => (
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](https://projectfluent.org).
- **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
- [Full Documentation](https://formengine.io/documentation/?utm_source=github&utm_medium=article&utm_campaign=readme#quick-start)
- [FAQ](https://formengine.io/documentation/category/faq?utm_source=github&utm_medium=article&utm_campaign=readme)
- [Guides](https://formengine.io/documentation/category/guides?utm_source=github&utm_medium=article&utm_campaign=readme)
## 🗄️ 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](https://github.com/optimajet/formengine/tree/master/community/src)
## 🧩 Compatibility
- **Works out of the box with** - [Next.js](https://formengine.io/documentation/usage-with-nextjs?utm_source=github&utm_medium=article&utm_campaign=readme).
- **Fully supports** - [Remix](https://formengine.io/documentation/usage-with-remix?utm_source=github&utm_medium=article&utm_campaign=readme).
## ✅ Validation
- **Built-in Validation with Zod** — [Pre-configured validation powered by Zod](https://formengine.io/documentation/validation?utm_source=github&utm_medium=article&utm_campaign=readme)
- **Extensible Validation Support** — [Works with Yup, AJV, Zod, Superstruct, Joi, and other libraries](https://formengine.io/documentation/validation?utm_source=github&utm_medium=article&utm_campaign=readme#External)
## Ready to use Pre-Built RSuite Form UI Components
```bash
npm install @react-form-builder/components-rsuite
```
[](https://formengine.io/react-form-components-library?utm_source=github&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,
})
```
## 🌍 Free Online Drag & Drop Form Builder
[](https://formbuilder.formengine.io/?utm_source=github&utm_medium=article-badge&utm_campaign=readme)
[](https://formengine.io/ai-form-builder?utm_source=github&utm_medium=article-badge&utm_campaign=readme)
## 🤝 Support & Community
- [Community Forum](https://github.com/optimajet/formengine/discussions?utm_source=github&utm_medium=article&utm_campaign=readme) – Best
for: help with building, discussion about React form best practices.
- [GitHub Issues](https://github.com/optimajet/formengine/issues?utm_source=github&utm_medium=article&utm_campaign=readme) – Best for: bugs
and errors you encounter using FormEngine.
- [Email Support](mailto:support@optimajet.com) – 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.
```bash
npm install @react-form-builder/designer
```
[](https://github.com/optimajet/formengine/issues?utm_source=github&utm_medium=article-badge&utm_campaign=readme)
[](https://demo.formengine.io/?utm_source=github&utm_medium=article-badge&utm_campaign=readme)
[](https://optimajet.com/book-a-meeting/?utm_source=github&utm_medium=article-badge&utm_campaign=readme)
[](https://formbuilder.formengine.io?utm_source=github&utm_medium=banner&utm_campaign=readme)
## 📦 FormEngine Core Installation
**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
```
## 🫶 We hope this project has saved you hours — ⭐ **star this repo** to support development. Your support keeps FormEngine Core open and free
[](https://formengine.io/documentation/?utm_source=github&utm_medium=banner-top&utm_campaign=readme#quick-start)
[](https://formengine.io/documentation/#quick-start?utm_source=github&utm_medium=article-badge&utm_campaign=readme#quick-start)
[](https://formengine.io/llms?utm_source=github&utm_medium=article-badge&utm_campaign=readme)
[](https://hk.linkedin.com/company/optimajet?utm_source=github&utm_medium=article-badge&utm_campaign=readme)
[](https://www.youtube.com/@optimajet?utm_source=github&utm_medium=article-badge&utm_campaign=readme)
[](https://dev.to/optimajet?utm_source=github&utm_medium=article-badge&utm_campaign=readme)
[](https://github.com/optimajet/formengine/discussions?utm_source=github&utm_medium=article-badge&utm_campaign=readme)