Thinkitive Form Builder

About

Thinkitive 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

$3

- 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

---

Getting Started

$3

``bash npm install`

`$3`

`bash npm run dev`

`$3`

`bash npm run build`

---

`Usage Example: Importing in Another React Project`

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 ( <> onSchemaChange={handleSchema} onUiSchemaChange={handleUiSchema} onDataChange={handleData} />

`Sample Form Preview (View mode):`


              schema={schema}
        uischema={uischema}
        data={data}
        onChange={(updatedData: unknown) =>
          console.log("Updated data:", updatedData)
        }
        onSave={(formData: unknown) => console.log("Form submitted:", formData)}
        onErrors={(errors: FormError) =>
          console.log("Validation errors:", errors)
        }
      />
    
  );
}

export default App;`

---

`TypeScript Configuration`

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';``

Thinkitive Form Builder

About

$3

---

Getting Started

$3

``bash npm install`

`$3`

`bash npm run dev`

`$3`

`bash npm run build`

---

`Usage Example: Importing in Another React Project`

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 data = { firstName: "Rohit", lastName: "Sharma", age: 45, email: "hitman.rohit@example.com", isEmployed: true, };

return ( <> onSchemaChange={handleSchema} onUiSchemaChange={handleUiSchema} onDataChange={handleData} />

`Sample Form Preview (View mode):`


              schema={schema}
        uischema={uischema}
        data={data}
        onChange={(updatedData: unknown) =>
          console.log("Updated data:", updatedData)
        }
        onSave={(formData: unknown) => console.log("Form submitted:", formData)}
        onErrors={(errors: FormError) =>
          console.log("Validation errors:", errors)
        }
      />
    
  );
}

export default App;`

---

`TypeScript Configuration`

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';``