A Drag and Drop Form Builder built on top of RJSF
RJSF is a great standard for defining forms in terms of JSON Schemas. This demo shows how easy it is to build a featureful visual form builder tool on top of RJSF.
- Drag and drop form builder interface
- JSON Schema based form generation
- Material-UI components
- Customizable field types
npm install json-form-builderimport React from 'react'; import { Provider } from 'react-redux'; import { configureStore } from '@reduxjs/toolkit'; import { FormBuilderApp, formBuilderSlice } from 'json-form-builder'; const store = configureStore({ reducer: { formBuilder: formBuilderSlice, }, }); function App() { return ( <Provider store={store}> <FormBuilderApp /> </Provider> ); } export default App;import { FormBuilderComponent, FormBuilderCanvas, ToolBoxComponent, CustomTextFieldComponent } from 'json-form-builder';- Text Field
- Number Field
- Text Area
- Password Field
- Date Picker
- Time Picker
- Radio Buttons
- Select Dropdown
- Multi-Select
- Header/Divider
To run the demo application:
npm install npm run demonpm run build:libnpm run devMIT