This library is part of the React Form Builder project.
This library is part of the React Form Builder project.
This package contains visual components based on React Suite. To learn how to use the package, see our documentation.
- 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.