{"id":15588265,"url":"https://github.com/optimajet/formengine","last_synced_at":"2026-02-03T19:07:04.151Z","repository":{"id":213571805,"uuid":"707602588","full_name":"optimajet/formengine","owner":"optimajet","description":"Lightweight React JSON Schema form builder with true cross-application form reuse. Build once, deploy everywhere, with no deep React knowledge required.","archived":false,"fork":false,"pushed_at":"2026-01-16T19:34:47.000Z","size":9204,"stargazers_count":150,"open_issues_count":3,"forks_count":32,"subscribers_count":5,"default_branch":"master","last_synced_at":"2026-01-18T02:19:13.747Z","etag":null,"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"],"latest_commit_sha":null,"homepage":"https://formengine.io","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/optimajet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2023-10-20T08:57:51.000Z","updated_at":"2026-01-17T14:44:22.000Z","dependencies_parsed_at":"2024-03-14T18:05:18.894Z","dependency_job_id":"107f010b-9169-4f0c-b35a-2d0ed9d28843","html_url":"https://github.com/optimajet/formengine","commit_stats":{"total_commits":34,"total_committers":1,"mean_commits":34.0,"dds":0.0,"last_synced_commit":"0258ff63cbd7ecad28cfafb5bae090c268b3b7ea"},"previous_names":["optimajet/formengine"],"tags_count":70,"template":false,"template_full_name":null,"purl":"pkg:github/optimajet/formengine","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/optimajet%2Fformengine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/optimajet%2Fformengine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/optimajet%2Fformengine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/optimajet%2Fformengine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/optimajet","download_url":"https://codeload.github.com/optimajet/formengine/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/optimajet%2Fformengine/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29054096,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-03T15:43:47.601Z","status":"ssl_error","status_checked_at":"2026-02-03T15:43:46.709Z","response_time":96,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2024-10-02T22:22:16.358Z","updated_at":"2026-02-03T19:07:04.124Z","avatar_url":"https://github.com/optimajet.png","language":"TypeScript","readme":"[![FormEngine](https://formengine.io/repository-images/hero-1.jpg)](https://formengine.io/documentation/?utm_source=github\u0026utm_medium=banner-top\u0026utm_campaign=readme#quick-start)\n\u003c!-- ==================== FORMENGINE CORE BADGES ==================== --\u003e\n[![License MIT](https://img.shields.io/badge/License-MIT-green?style=for-the-badge\u0026logo=github\u0026logoColor=white\u0026color=4286F4)](https://github.com/optimajet/formengine/blob/master/LICENSE)\n[![Closed Issues](https://img.shields.io/github/issues-closed/optimajet/formengine?style=for-the-badge\u0026logo=github\u0026logoColor=white\u0026color=4286F4)](https://github.com/optimajet/formengine/issues?q=is%3Aissue+is%3Aclosed)\n[![Release date](https://img.shields.io/github/release-date/optimajet/formengine?style=for-the-badge\u0026logo=github\u0026logoColor=white\u0026color=4286F4)](https://github.com/optimajet/formengine/releases)\n[![Total Downloads](https://img.shields.io/npm/dt/@react-form-builder/core?style=for-the-badge\u0026logo=npm\u0026color=4286F4)](https://www.npmjs.com/package/@react-form-builder/core)\n\u003c!-- ================================================================ --\u003e\n\n# Lightweight React JSON Schema form builder library for MUI, Shadcn, RSuite, Mantine, Tailwind, Bootstrap\n\n## Supported Themes\n\n- [**MUI**](https://formengine.io/react-form-components-library/mui/?utm_source=github\u0026utm_medium=article\u0026utm_campaign=readme\u0026utm_term=mui)\n- [**shadcn/ui**](https://formengine.io/react-form-components-library/shadcn-ui/?utm_source=github\u0026utm_medium=article\u0026utm_campaign=readme\u0026utm_term=shadcn)\n- [**React Suite**](https://formengine.io/react-form-components-library?utm_source=github\u0026utm_medium=article\u0026utm_campaign=readme\u0026utm_term=rsuite#free)\n- [**Mantine UI**](https://formengine.io/react-form-components-library/mantine/?utm_source=github\u0026utm_medium=article\u0026utm_campaign=readme\u0026utm_term=mantine)\n\n## Supported Themes — coming soon (click link to check status)\n\n- [**Tailwind**](https://formengine.io/react-form-components-library/tailwind/?utm_source=github\u0026utm_medium=article\u0026utm_campaign=readme\u0026utm_term=tailwind)\n- [**Ant Design**](https://formengine.io/react-form-components-library/ant-design/?utm_source=github\u0026utm_medium=article\u0026utm_campaign=readme\u0026utm_term=ant-design)\n- [**Bootstrap**](https://formengine.io/react-form-components-library/bootstrap/?utm_source=github\u0026utm_medium=article\u0026utm_campaign=readme\u0026utm_term=bootstrap)\n- [**Chakra-UI**](https://formengine.io/react-form-components-library/chakra-ui/?utm_source=github\u0026utm_medium=article\u0026utm_campaign=readme\u0026utm_term=chakra-ui)\n- [**daisyUI**](https://formengine.io/react-form-components-library/daisyui/?utm_source=github\u0026utm_medium=article\u0026utm_campaign=readme\u0026utm_term=daisyui)\n\n## Bundle size FormEngine Core (for comparison with popular libraries)\n\n| Package                | Total size JS + CSS (raw/gzip) | Framework / Library      | Description                   |\n|------------------------|--------------------------------|--------------------------|-------------------------------|\n| **FormEngine Core**    | 618.80 KB / 188.54KB           | React                    | FormEngine Core + MUI         |\n| survey                 | 1.47 MB / 391.72KB             | Plain JavaScript + React | survey-react + MUI            |\n| vueform                | 467.35 KB / 141.09K            | Vue3                     | Tree-shaked vueform + MUI CSS |\n| React JSON Schema Form | 721.54 KB / 231.62KB           | React                    | RJSF + MUI                    |\n\n\u003csmall\u003e\nBundle sizes are approximate and depend on build configuration, tree-shaking, and selected features.  \nWe are preparing a public benchmark for comparing assembly sizes..\n\u003c/small\u003e\n\n## 📦 FormEngine Core MUI Installation\n\n**It’s time to use something better. Install the core package and MUI free form components:**\n\n```bash\nnpm install @react-form-builder/core @mui/material @emotion/react @emotion/styled @react-form-builder/components-material-ui\n```\n\n## Simple Form Example\n\n[![FormEngine](https://formengine.io/repository-images/simpleform-mui.png)](https://formengine.io/documentation/?utm_source=github\u0026utm_medium=article_banner-for\u0026utm_campaign=readme#quick-start)\n\n## Simple Form JSON Example\n\n```json  \n{\n  \"form\": {\n    \"key\": \"Screen\",\n    \"type\": \"Screen\",\n    \"children\": [\n      {\n        \"key\": \"name\",\n        \"type\": \"MuiTextField\",\n        \"props\": {\n          \"label\": {\n            \"value\": \"Name\"\n          }\n        }\n      },\n      {\n        \"key\": \"email\",\n        \"type\": \"MuiTextField\",\n        \"props\": {\n          \"label\": {\n            \"value\": \"Email\"\n          }\n        }\n      },\n      {\n        \"key\": \"submit\",\n        \"type\": \"MuiButton\",\n        \"props\": {\n          \"appearance\": {\n            \"value\": \"primary\"\n          },\n          \"children\": {\n            \"value\": \"Submit\"\n          }\n        },\n        \"events\": {\n          \"onClick\": [\n            {\n              \"name\": \"validate\",\n              \"type\": \"common\"\n            }\n          ]\n        }\n      }\n    ]\n  }\n}\n```  \n\n\u003cdetails\u003e \n\u003csummary\u003e Click to see how you can define your entire form in JSON and render it with FormEngine Core. \u003c/summary\u003e\n\n## Here’s a simple form example you can use in your React app\n\n```tsx\nimport {view as muiView} from '@react-form-builder/components-material-ui'\nimport {FormViewer} from '@react-form-builder/core'\n\nconst simpleForm = {\n  'errorType': 'MuiErrorWrapper',\n  'form': {\n    'key': 'Screen',\n    'type': 'Screen',\n    'children': [\n      {\n        'key': 'name',\n        'type': 'MuiTextField',\n        'props': {\n          'label': {\n            'value': 'Name'\n          }\n        },\n        'schema': {\n          'validations': [\n            {\n              'key': 'required'\n            }\n          ]\n        }\n      },\n      {\n        'key': 'email',\n        'type': 'MuiTextField',\n        'props': {\n          'label': {\n            'value': 'Email'\n          }\n        },\n        'schema': {\n          'validations': [\n            {\n              'key': 'required'\n            },\n            {\n              'key': 'email'\n            }\n          ]\n        }\n      },\n      {\n        'key': 'submit',\n        'type': 'MuiButton',\n        'props': {\n          'appearance': {\n            'value': 'primary'\n          },\n          'children': {\n            'value': 'Submit'\n          }\n        },\n        'events': {\n          'onClick': [\n            {\n              'name': 'validate',\n              'type': 'common',\n              'args': {\n                'failOnError': true\n              }\n            },\n            {\n              'name': 'onSubmit',\n              'type': 'custom'\n            }\n          ]\n        }\n      }\n    ]\n  }\n}\n\nexport const App = () =\u003e (\n  \u003cFormViewer\n    view={muiView}\n    getForm={() =\u003e JSON.stringify(simpleForm)}\n    actions={{\n      onSubmit: (e) =\u003e {\n        alert('Form data: ' + JSON.stringify(e.data))\n      },\n    }}\n  /\u003e\n)\n```\n\u003c/details\u003e \n\n## 💙 Why developers love FormEngine Core?\n\n- **Open Source \u0026 Free Forever** – no vendor lock-in, no nonsense.\n- **Less Code, Fewer Bugs** – logic and UI stay separate.\n- **JSON-First Architecture** – define, render, and validate without touching React internals.\n- **UI-Agnostic Components** — Works seamlessly with any UI library (MUI, Ant Design, shadcn/ui, and others).\n- **Framework-Agnostic** — Can also be used without any framework via CDN.\n- **Multi-Database Support** — Compatible with MySQL, PostgreSQL, MongoDB, SQLite, and more.\n- **Built-in Validation with Zod** — Pre-configured validation powered by Zod.\n- **Extensible Validation Support** — Works with Yup, AJV, Zod, Superstruct, Joi, and other libraries.\n- **Localization** - Powerful capabilities for localizing forms using [Fluent.js](https://projectfluent.org).\n- **Responsive Layouts** — Build forms that automatically adapt to all screen sizes.\n- **Custom Actions** — Enhance forms with interactive logic through custom JavaScript.\n- **Dynamic Properties** — Enable real-time component updates with MobX-powered reactivity.\n- **Pre-Built RSuite Integration** — Includes a ready-to-use component library: `@react-form-builder/components-rsuite`.\n- **Flexible Storage Options**\n  - Store complete form definitions as JSON.\n  - Programmatically generate forms via code.\n\n## 📘 Documentation\n\n- [Full Documentation](https://formengine.io/documentation/?utm_source=github\u0026utm_medium=article\u0026utm_campaign=readme#quick-start)\n- [FAQ](https://formengine.io/documentation/category/faq?utm_source=github\u0026utm_medium=article\u0026utm_campaign=readme)\n- [Guides](https://formengine.io/documentation/category/guides?utm_source=github\u0026utm_medium=article\u0026utm_campaign=readme)\n\n## 🗄️ Repository structure\n\n- **Community:** FormEngine Core source code and examples for FormEngine Community (MIT license).\n- **Premium:** Examples for Premium On-Premise Drag-and-Drop React Form Builder (Commercial license). Premium On-Premise Drag-and-Drop React\n  Form Builder\n- [Source Code](https://github.com/optimajet/formengine/tree/master/community/src)\n\n## 🧩 Compatibility \n\n- **Works out of the box with** - [Next.js](https://formengine.io/documentation/usage-with-nextjs?utm_source=github\u0026utm_medium=article\u0026utm_campaign=readme). \n- **Fully supports** - [Remix](https://formengine.io/documentation/usage-with-remix?utm_source=github\u0026utm_medium=article\u0026utm_campaign=readme). \n\n## ✅ Validation\n\n- **Built-in Validation with Zod** — [Pre-configured validation powered by Zod](https://formengine.io/documentation/validation?utm_source=github\u0026utm_medium=article\u0026utm_campaign=readme)\n- **Extensible Validation Support** — [Works with Yup, AJV, Zod, Superstruct, Joi, and other libraries](https://formengine.io/documentation/validation?utm_source=github\u0026utm_medium=article\u0026utm_campaign=readme#External)\n\n## Ready to use Pre-Built RSuite Form UI Components\n\n```bash  \nnpm install @react-form-builder/components-rsuite  \n```  \n\n[![FormEngine Drag and n Drop](https://formengine.io/repository-images/components-ui.png)](https://formengine.io/react-form-components-library?utm_source=github\u0026utm_medium=article_banne-dndr\u0026utm_campaign=readme)\n\n## 🟦🟥🟨🟩 Custom components\n\nComponent description consists of defining meta-information about the component - component name, component type, component properties.\nMeta-information on component properties in FormEngine is called an annotation.\n\nWell, let's describe some existing component from the popular MUI library. As an example, let's take a Button:\n\n#### Example of a custom component definition\n\n```tsx \nimport {Button} from '@mui/material'\nimport {define, disabled, event, oneOf, string} from '@react-form-builder/core'\n\n// Let's call our component matButton, using the prefix 'mat' to make it easy to understand\n// from the name that the component belongs to the MUI library.\n//\n// Here we call the define function and pass it two parameters - the Button component\n// and the unique name of the component type.\nexport const matButton = define(Button, 'MatButton')\n  // component name displayed in the component panel in the designer\n  .name('Button')\n  // define the component properties that we want to edit in the designer\n  .props({\n    // button text\n    children: string.named('Caption').default('Button'),\n    // button color\n    color: oneOf('inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'),\n    // button disable flag\n    disabled: disabled,\n    // callback fired when the button is clicked.\n    onClick: event,\n  })\n```\n\n## 🌍 Free Online Drag \u0026 Drop Form Builder\n\n[![Try it now](https://img.shields.io/badge/FORM_BUILDER-%20✅%20ONLINE%20-brightgreen?style=for-the-badge)](https://formbuilder.formengine.io/?utm_source=github\u0026utm_medium=article-badge\u0026utm_campaign=readme)\n[![ChatGPT](https://img.shields.io/badge/ChatGPT-COMPLEX_FORM_BUILDER-F58319?style=for-the-badge\u0026logo=openai\u0026logoColor=white)](https://formengine.io/ai-form-builder?utm_source=github\u0026utm_medium=article-badge\u0026utm_campaign=readme)\n\n## 🤝 Support \u0026 Community\n\n- [Community Forum](https://github.com/optimajet/formengine/discussions?utm_source=github\u0026utm_medium=article\u0026utm_campaign=readme) – Best\n  for: help with building, discussion about React form best practices.\n- [GitHub Issues](https://github.com/optimajet/formengine/issues?utm_source=github\u0026utm_medium=article\u0026utm_campaign=readme) – Best for: bugs\n  and errors you encounter using FormEngine.\n- [Email Support](mailto:support@optimajet.com) – Best for: issues with FormEngine libraries or environment.\n\n## A premium on-premise React Form Builder with drag-and-drop, built for SaaS and enterprise teams — backed by Optimajet Premium Support\n\n### React Form Builder - That Developers Can Customize and Teams Can Use\n\nA 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.\n\n```bash  \n npm install @react-form-builder/designer\n```\n\n[![Contributions welcome](https://img.shields.io/badge/Contribute-💡_Ideas-FF69B4?style=for-the-badge\u0026logo=github)](https://github.com/optimajet/formengine/issues?utm_source=github\u0026utm_medium=article-badge\u0026utm_campaign=readme)\n[![Try Demo](https://img.shields.io/badge/🚀_Try_Live_Demo-4286F4?style=for-the-badge)](https://demo.formengine.io/?utm_source=github\u0026utm_medium=article-badge\u0026utm_campaign=readme)\n[![Meet with US](https://img.shields.io/badge/Book%20a%20Meeting-WITH_OPTIMAJET-4286F4?style=for-the-badge\u0026logo=calendar\u0026logoColor=white)](https://optimajet.com/book-a-meeting/?utm_source=github\u0026utm_medium=article-badge\u0026utm_campaign=readme)\n\n[![FormEngine Drag and n Drop](https://formengine.io/repository-images/DND-react-form-builder.png)](https://formbuilder.formengine.io?utm_source=github\u0026utm_medium=banner\u0026utm_campaign=readme)\n\n## 📦 FormEngine Core Installation\n\n**It’s time to use something better. Install the core package and RSuite free form components:**  \n\n```bash  \nnpm install @react-form-builder/core @react-form-builder/components-rsuite  \n```\n\n## 🫶 We hope this project has saved you hours — ⭐ **star this repo** to support development. Your support keeps FormEngine Core open and free\n\n[![FormEngine](https://formengine.io/repository-images/star-click.gif)](https://formengine.io/documentation/?utm_source=github\u0026utm_medium=banner-top\u0026utm_campaign=readme#quick-start)\n[![Documentation](https://img.shields.io/badge/Documentation-Install-4286F4?style=for-the-badge\u0026logo=read-the-docs\u0026logoColor=white)](https://formengine.io/documentation/#quick-start?utm_source=github\u0026utm_medium=article-badge\u0026utm_campaign=readme#quick-start)\n[![LLMs.txt](https://img.shields.io/badge/_LLMs.txt-FF69B4?style=for-the-badge)](https://formengine.io/llms?utm_source=github\u0026utm_medium=article-badge\u0026utm_campaign=readme)\n[![LinkedIn](https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white)](https://hk.linkedin.com/company/optimajet?utm_source=github\u0026utm_medium=article-badge\u0026utm_campaign=readme)\n[![YouTube](https://img.shields.io/badge/YouTube-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white)](https://www.youtube.com/@optimajet?utm_source=github\u0026utm_medium=article-badge\u0026utm_campaign=readme)\n[![dev.to](https://img.shields.io/badge/dev.to-0A0A0A?style=for-the-badge\u0026logo=dev.to\u0026logoColor=white)](https://dev.to/optimajet?utm_source=github\u0026utm_medium=article-badge\u0026utm_campaign=readme)\n[![Join Community](https://img.shields.io/badge/💬_Join-Community-4286F4?style=for-the-badge\u0026logo=github)](https://github.com/optimajet/formengine/discussions?utm_source=github\u0026utm_medium=article-badge\u0026utm_campaign=readme)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foptimajet%2Fformengine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foptimajet%2Fformengine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foptimajet%2Fformengine/lists"}