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

Features

• 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

Install dependencies

npm install

Run the development server

npm run dev

Build for production

npm run build

Usage Example: Importing in Another React Project

1. Install the package (after publishing to npm):

npm install @thinkitive/form-builder

2. Use in your React app:

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: "[email protected]",
    isEmployed: true,
  };

  return (
    <>
      <FormBuilder
        onSchemaChange={handleSchema}
        onUiSchemaChange={handleUiSchema}
        onDataChange={handleData}
      />
      <h2>Sample Form Preview (View mode):</h2>
      <FormRenderer
        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:

// types.d.ts or global.d.ts
declare module '@thinkitive/form-builder';