Install the package along with FormEngine Core and Mantine dependencies:
npm install @react-form-builder/core @react-form-builder/components-mantine
Open Source Lightweight React JSON Schema Form Library for Mantine
Build dynamic, reusable forms from JSON schema with Mantine components — optimized for bundle size, tree-shaking, and developer experience.
npm i @react-form-builder/core @react-form-builder/components-mantine
Why Choose FormEngine Core with Mantine
Modern Design System
Mantine offers clean, modern components with excellent attention to detail. Your forms will look professional out of the box.
MIT Licensed
Both FormEngine Core and the Mantine components package are MIT licensed. Use them freely in commercial and personal projects.
Rich Component Set
TextInput, NumberInput, Select, MultiSelect, Checkbox, Radio, Switch, Slider, DatePicker, ColorPicker, and more.
Excellent DX
Mantine is known for its developer experience. Great TypeScript support, intuitive APIs, and comprehensive documentation.
Accessible by Default
Mantine components are built with accessibility in mind. ARIA attributes, keyboard navigation, and screen reader support included.
TypeScript Support
Full TypeScript definitions for all components. Get autocomplete and type checking in your IDE.
Flexible Styling
Use Mantine's CSS-in-JS styling, CSS modules, or Tailwind CSS. Style your forms however you prefer.
Form Validation
Built-in validation with Mantine-styled error messages. Works with FormEngine's validation system and third-party libraries.
RTL Support
Mantine supports RTL languages. Build forms for Arabic, Hebrew, and other RTL locales with ease.
How FormEngine Core fits into your stack
FormEngine Core maps a JSON form definition to a dynamic HTML form and lets you plug in your own UI components — or use the ready-made Mantine pack.
1
JSON schema stored (Git / DB / API)
2
Frontend loads schema
3
FormEngine Core renders UI through Mantine view
4
Submit data to your backend
Features built for real-world Mantine apps
Mantine components pack
Use Mantine components via @react-form-builder/components-mantine.
UI-agnostic core
Keep the renderer independent from UI. Swap themes when needed.
Reusable JSON schemas
Copy, version, and reuse forms across applications and teams.
Modern stack friendly
Works smoothly with Next.js, Remix, and other React setups.
Multiple themes supported
MUI, shadcn/ui, React Suite, Mantine — with more on the way.
Open-source core + optional drag and drop form builder
Start with the free MIT core and scale to a drag-and-drop workflow when needed.
Quickstart: render your first Mantine form in minutes
1
Install core + Mantine components pack
2
Load a JSON schema (local file or API)
3
Render with FormViewer and submit to your backend
Installation
Basic Usage
Here's an example of how to set up FormEngine with Mantine components:
import {view} from '@react-form-builder/components-mantine'
import {buildForm, FormViewer} from '@react-form-builder/core'
import '@mantine/core/styles.css'
import '@mantine/dates/styles.css'
const simpleForm = buildForm()
.component('container', 'MtContainer')
.style({flexDirection: 'row'})
.children((builder) =>
builder
.component('firstName', 'MtTextInput')
.prop('placeholder', 'Enter your first name')
.prop('label', 'First Name')
.validation('required')
.component('lastName', 'MtTextInput')
.prop('placeholder', 'Enter your last name')
.prop('label', 'Last Name')
.validation('required')
)
.component('birthDate', 'MtDatePickerInput')
.prop('label', 'Birth Date')
.validation('min').args({value: '1980-01-07T00:00:00.000Z'})
.component('submit', 'MtButton')
.prop('children', 'Submit')
.event('onClick')
.commonAction('validate').args({failOnError: true})
.customAction('onSubmit')
.json()
export const App = () => {
return <FormViewer
view={view}
getForm={() => simpleForm}
actions={{
onSubmit: (e) => {
// submit the form to the backend
alert('Form data: ' + JSON.stringify(e.data))
},
}}
/>
}
Built for API-driven products and internal tools
Admin panels & back-office forms
Onboarding flows
B2B configuration forms
Surveys & questionnaires
Internal tooling
Multi-tenant schema-driven UI
FAQ
Is FormEngine Core open source?
Yes. The core library is MIT-licensed, which is suitable for commercial use.
Can I store form schemas in a database and deliver them via API?
Yes — the JSON schema can be loaded from any source (file, DB, CMS, API) and rendered in the client.
How small is the bundle?
The repository provides a benchmark example: ~188.54 KB gzip for FormEngine Core (JS + CSS).
How do I use it with Mantine?
Install @react-form-builder/components-mantine and render forms with FormViewer using the provided Mantine view.
Does it work with Next.js / Remix?
Yes — it's designed to work smoothly with modern React stacks, including Next.js and Remix.
Can I use my own Mantine-based components?
Yes — the core is designed to render using your components; the Mantine pack is a ready-made option.
Do I need a visual drag-and-drop builder?
No. You can render and manage forms purely from JSON. A visual builder can be added later if your workflow needs it.
What UI themes are supported?
MUI, shadcn/ui, React Suite, Mantine are listed as supported themes, with more coming soon.
Ready to build schema-driven Mantine forms?
Start with the MIT-licensed core, render your first form, and keep your UI consistent with Mantine.