React Form Builder

A modern drag-and-drop form builder built with React 19, Material UI, and JSON Forms. Design forms visually, preview them live, and export JSON Schema + UI Schema.

Features

• Drag & Drop builder with nested layouts
• Property editor for field configuration
• Schema editor (JSON Schema & UI Schema)
• Live preview with JSON Forms
• Export/import schemas

Quick Start

Install and import the component:

yarn add @dhristhi/react-form-builder
# or
npm install @dhristhi/react-form-builder

import React from 'react';
import { FormBuilder } from '@dhristhi/react-form-builder';

export default function MyPage() {
  return <FormBuilder />;
}

API & Extensibility

Exports

• FormBuilder — main component
• registerFieldTypes, getFieldTypes, getFieldTypeById — field registry helpers
• configureControls — add/enable/disable JSON Forms renderers

Register Custom Field Types

import { registerFieldTypes } from '@dhristhi/react-form-builder';

registerFieldTypes([
  {
    id: 'my-custom',
    label: 'My Custom',
    isLayout: false,
    schema: { type: 'string' },
    uischema: { type: 'Control', options: { placeholder: 'Custom' } },
    // icon: Optional React component
  },
]);

Configure Controls (Renderers)

Enable/disable built-in custom controls and add your own JSON Forms renderers:

import { configureControls } from '@dhristhi/react-form-builder';

// Call once before rendering <FormBuilder />
configureControls({
  // enable: ['text', 'select', 'verticalLayout'],
  disable: ['currencyText', 'image'],
  add: [{ tester: myCustomTester, renderer: MyCustomRenderer, id: 'myCustom' }],
});

Built-in control IDs usable in enable/disable:

• currencyText, text, label, image, infoAlert, select, downloadFile, fileUpload
• arrayLayout, groupLayout, verticalLayout, horizontalLayout, accordionGroupLayout

Notes:

• By default, all built-in custom controls are enabled alongside Material renderers/cells.
• add items are appended after built-ins. Provide a stable id to toggle them later.

Props

• onExport({ schema, uiSchema }): Override default JSON download to handle export.
• onSave: Receive save requests from the schema editor view.
• theme: Provide a custom MUI theme instance.
• schemas: Sample templates { id, name, description?, schema } for quick loading.

Example:

import { FormBuilder } from '@dhristhi/react-form-builder';

function handleExport({ schema, uiSchema }) {
  // Persist to server or file
}

export default function MyPage() {
  return (
    <FormBuilder
      onExport={handleExport}
      schemas={[
        {
          id: 'simple',
          name: 'Simple Example',
          description: 'Minimal schema with two fields',
          schema: {
            type: 'object',
            properties: {
              firstName: { type: 'string', title: 'First Name' },
              age: { type: 'number', title: 'Age' },
            },
            required: ['firstName'],
          },
        },
      ]}
    />
  );
}

License

Apache 2.0 — see LICENSE.

Acknowledgments

• React — UI Framework
• Material UI — Component Library
• JSON Forms — Schema-based Forms
• @dnd-kit — Drag and Drop Toolkit