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 React from "react";
import FormBuilder from "@thinkitive/form-builder";

function App() {
  return (
    <div>
      <h1>My Custom Form Builder</h1>
      <FormBuilder />
    </div>
  );
}

export default App;

3. Access the generated JSON Schema and UI Schema

• You can connect to the Redux store or use provided callbacks to get the current schema and uischema for use in your app.

Author & Organization

• Author: Team Purandar
• Organization: Thinkitive Inc

License

MIT