This library is part of the React Form Builder project.
- UI-Agnostic Components: Works seamlessly with any UI library (MUI, Ant Design, shadcn/ui and others)
- Pre-Built React Suite Integration: Includes a ready-to-use component library – @react-form-builder/components-rsuite.
- Framework Support:
- Next.js Integration: Seamlessly works with Next.js.
- Remix Compatibility: Fully supports Remix.
- 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: Includes pre-configured validation rules powered by Zod.
- Extensible Validation Support: Works with Yup, AJV, Zod, Superstruct, Joi, and other custom validation libraries.
- Responsive Layouts: Build forms that automatically adapt to all screen sizes.
- Custom Actions: Enhance forms with interactive logic through custom JavaScript code.
- Dynamic Properties: Implement real-time component changes with MobX-powered reactive properties.
-
Flexible Storage Options:
- Store complete form definitions as JSON.
- Programmatically generate forms via code.
No installation required. Just include the script via CDN or host it on your own server.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FormEngine bundle embedding example</title>
<script src="https://unpkg.com/@react-form-builder/viewer-bundle@latest/dist/index.iife.js" async defer></script>
</head>
<body style="margin: 20px">
<div id="viewer"></div>
<script type="text/javascript">
window.onload = function () {
const {buildForm, renderFormViewer, rSuiteComponents} = window.FormEngineViewerBundle;
const simpleForm = buildForm({errorType: 'RsErrorMessage'})
.component('container', 'RsContainer')
.style({flexDirection: 'row'})
.children((builder) =>
builder
.component('firstName', 'RsInput')
.prop('placeholder', 'Enter your first name')
.prop('label', 'First Name')
.validation('required')
.component('lastName', 'RsInput')
.prop('placeholder', 'Enter your last name')
.prop('label', 'Last Name')
.validation('required')
)
.component('birthDate', 'RsDatePicker')
.prop('label', 'Birth Date')
.prop('oneTap', true)
.validation('min').args({value: '1900-01-07T12:25:37.000Z'})
.component('submit', 'RsButton')
.prop('children', 'Submit')
.prop('color', 'blue')
.prop('appearance', 'primary')
.event('onClick')
.commonAction('validate').args({failOnError: true})
.customAction('onSubmit')
.json()
const props = {
view: rSuiteComponents.viewWithCss,
getForm: () => simpleForm,
actions: {
onSubmit: (e) => {
// submit the form to the backend
alert('Form data: ' + JSON.stringify(e.data))
}
}
}
window.viewerRoot = renderFormViewer('viewer', props)
}
</script>
</body>
</html>This library is distributed under the MIT license.
Important: Some features and modules (e.g., Form Designer) are only available under a commercial license.
If you are interested in using the full version of the product, please contact us or visit the product website for licensing information.