A drag-and-drop JSON Forms Builder for React
npm install @thinkitive/form-builderThinkitive Form Builder is a powerful, extensible React library for building dynamic, drag-and-drop forms using JSON Forms and React DnD. It allows you to visually create forms, edit field properties, and generate JSON Schema and UI Schema for use in any JSON Forms-compatible renderer.
- JSON Forms: Provides the core utilities for managing and rendering JSON Schema-based forms. Highly customizable and framework-agnostic. Learn more
- React DnD: Enables robust drag-and-drop interactions in React. Learn more
- Drag-and-drop form builder UI
- Edit field properties (label, required, etc.) in a dedicated panel
- Save field property changes in batch
- JSON Schema and UI Schema output compatible with JSON Forms
- Built with React, TypeScript, Material-UI, Redux Toolkit
---
``bash`
npm install
`bash`
npm run dev
`bash`
npm run build
---
1. Install the package (after publishing to npm):
`bash`
npm install @thinkitive/form-builder
2. Use in your React app:
`jsx
import { FormBuilder, FormRenderer } from "@thinkitive/form-builder";
import type {
FormBuilderSchema,
FormBuilderUiSchema,
FormError,
} from "@thinkitive/form-builder";
function App() {
type FormBuilderSchema = typeof FormBuilderSchema;
type FormBuilderUiSchema = typeof FormBuilderUiSchema;
type FormError = typeof FormError;
const handleSchema = (schema: FormBuilderSchema) =>
console.log("SCHEMA:", schema);
const handleUiSchema = (uiSchema: FormBuilderUiSchema) =>
console.log("UISchema:", uiSchema);
const handleData = (data: unknown) => console.log("DATA:", data);
const schema: FormBuilderSchema = {
type: "object",
properties: {
firstName: {
type: "string",
minLength: 2,
maxLength: 50,
title: "First Name",
},
lastName: {
type: "string",
minLength: 2,
maxLength: 50,
title: "Last Name",
},
age: {
type: "integer",
minimum: 0,
maximum: 150,
title: "Age",
},
email: {
type: "string",
format: "email",
title: "Email Address",
},
isEmployed: {
type: "boolean",
title: "Currently Employed",
},
},
required: ["firstName", "lastName", "email"],
};
const uischema: FormBuilderUiSchema = {
type: "Group",
label: "Personal Information",
elements: [
{ type: "Control", scope: "#/properties/firstName" },
{ type: "Control", scope: "#/properties/lastName" },
{ type: "Control", scope: "#/properties/age" },
{ type: "Control", scope: "#/properties/email" },
{ type: "Control", scope: "#/properties/isEmployed" },
],
};
const data = {
firstName: "Rohit",
lastName: "Sharma",
age: 45,
email: "hitman.rohit@example.com",
isEmployed: true,
};
return (
<>
onUiSchemaChange={handleUiSchema}
onDataChange={handleData}
/>
export default App;
`
---
If you encounter TypeScript errors about missing module types, add the following to your global.d.ts or types.d.ts:
`ts``
// types.d.ts or global.d.ts
declare module '@thinkitive/form-builder';