@syncfusion/ej2-react-form-builder 0.1.0-beta

package/README.md

@@ -0,0 +1,53 @@
+# Syncfusion® EJ2 React Form Builder
+
+A powerful visual drag-and-drop form builder component for creating JSON form schemas.
+
+## Key features
+
+- **Visual drag-and-drop designer** — Create forms through an intuitive drag-and-drop interface that allows users to add, arrange, resize, and organize form elements visually without writing code.
+
+- **20+ field types** — Supports a rich collection of form controls including TextBox, TextArea, Number, DatePicker, TimePicker, DateTimePicker, CheckBox, RadioButton, DropDown, MultiSelect, Grid, File Upload, Rich Text Editor, Signature, Rating, and more.
+
+- **Nested layouts** — Supports advanced form composition with panels, tabs, tables, cards, and multi-column layouts, enabling the creation of structured and complex form designs.
+
+- **Property editor** — Provides a dedicated configuration panel for customizing field properties such as labels, placeholders, default values, validation rules, visibility settings, styling, and data sources.
+
+- **Import/export JSON schemas** — Allows form definitions to be imported from and exported to JSON schemas, enabling form portability, versioning, persistence, and integration with external applications.
+
+- **Theme support** — Supports light and dark themes with customizable styling options, allowing forms to align with application branding and user preferences.
+
+- **Validation rules** — Supports field-level and form-level validation, including required fields, length constraints, numeric ranges, pattern matching, custom validation rules, and cross-field validations.
+
+- **Conditional logic** — Supports dynamic visibility, required state, read-only state, default values, and data filtering based on conditions evaluated from other form fields, enabling adaptive form experiences.
+ 
+- **Expression engine** — Enables calculated fields and business logic using expressions that support arithmetic operations, string manipulation, date calculations, conditional formulas, and automatic value updates.
+ 
+- **Preview form & JSON export** — Provides real-time form preview for validating layouts, rules, and interactions before publishing, along with JSON export for deployment, storage, or runtime rendering.
+
+
+## Installation
+
+```bash
+npm install @syncfusion/ej2-react-form-builder
+```
+
+## Usage
+
+```tsx
+import { FormBuilder } from '@syncfusion/ej2-react-form-builder';
+import '@syncfusion/ej2-react-form-builder/styles/tailwind3.css';
+
+function App() {
+  return <FormBuilder />;
+}
+```
+
+## License and copyright
+
+> This is a commercial product and requires a paid license for possession or use. Syncfusion<sup>®</sup> licensed software, including this component, is subject to the terms and conditions of Syncfusion<sup>®</sup> [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 140+ Syncfusion UI components, you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials).
+
+> A free community [license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
+
+See [LICENSE FILE](license) for more info.
+
+&copy; Copyright 2026 Syncfusion<sup>®</sup> Inc. All Rights Reserved. The Syncfusion<sup>®</sup> Essential Studio<sup>®</sup> license and copyright applies to this distribution.

package/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @syncfusion/ej2-react-form-builder
+ * Form Builder Component - Visual drag-and-drop form editor
+ */
+
+export * from './src/index.js';

package/index.js

@@ -0,0 +1,6 @@
+/**
+ * @syncfusion/ej2-react-form-builder
+ * Form Builder Component - Visual drag-and-drop form editor
+ */
+
+export * from './src/index.js';

package/license

@@ -0,0 +1,13 @@
+Syncfusion® License
+
+Copyright (c) Syncfusion®, Inc. All rights reserved.
+
+Essential® JS 2 Form Builder library is available through the Syncfusion® Essential Studio® program and can be licensed under either the Syncfusion® Community License Program or the Syncfusion® Commercial License.
+
+To qualify for the Syncfusion® Community License Program, your organization must have annual gross revenue of less than one (1) million U.S. dollars ($1,000,000.00 USD) per year and fewer than five (5) developers. Additionally, you must agree to Syncfusion®'s terms and conditions.
+
+If you do not meet the requirements for the community license, please reach out to sales@syncfusion.com for commercial licensing options.
+
+You are required to obtain either a Community License or a Commercial License before using this product and must agree to comply with Syncfusion®'s terms and conditions.
+
+The full Syncfusion® license, including terms and conditions, can be found at: https://www.syncfusion.com/content/downloads/syncfusion_license.pdf

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@syncfusion/ej2-react-form-builder",
+  "version": "0.1.0-beta",
+  "description": "Syncfusion Form Builder component is a visual drag-and-drop interface for creating JSON form schemas.",
+  "author": "Syncfusion Inc.",
+  "license": "SEE LICENSE IN license",
+  "keywords": [
+    "syncfusion",
+    "ej2",
+    "react",
+    "form",
+    "form-builder",
+    "form-renderer",
+    "dynamic-forms",
+    "json-forms",
+    "schema-forms",
+    "ui-components",
+    "react-components",
+    "drag-and-drop"
+  ],
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "typings": "./index.d.ts",
+  "readme": "README.md",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "types": "./index.d.ts"
+    },
+    "./styles/*": "./styles/*"
+  },
+  "sideEffects": false,
+  "dependencies": {
+    "@syncfusion/ej2-react-buttons": "*",
+    "@syncfusion/ej2-react-calendars": "*",
+    "@syncfusion/ej2-react-dropdowns": "*",
+    "@syncfusion/ej2-react-grids": "*",
+    "@syncfusion/ej2-react-image-editor": "*",
+    "@syncfusion/ej2-react-inplace-editor": "*",
+    "@syncfusion/ej2-react-inputs": "*",
+    "@syncfusion/ej2-react-layouts": "*",
+    "@syncfusion/ej2-react-lists": "*",
+    "@syncfusion/ej2-react-navigations": "*",
+    "@syncfusion/ej2-react-notifications": "*",
+    "@syncfusion/ej2-react-popups": "*",
+    "@syncfusion/ej2-react-querybuilder": "*",
+    "@syncfusion/ej2-react-richtexteditor": "*",
+    "@syncfusion/ej2-react-splitbuttons": "*",
+    "@syncfusion/ej2-react-form-renderer": "*",
+    "@syncfusion/react-base": "*"
+  },
+  "devDependencies": {}
+}

package/src/FormBuilder.d.ts

@@ -0,0 +1,211 @@
+import React, { type HTMLAttributes } from 'react';
+import type { FormComponent, PaletteConfig, Schema } from './types/FormSchema';
+import type { DefaultTemplates } from './types/FormSchema';
+/**
+ * @private
+ */
+export declare let formBuilderMode: string;
+/**
+ * @private
+ */
+export declare const extractTemplateComponents: (template: DefaultTemplates) => FormComponent[];
+/**
+ * The IFormBuilder interface defines the configuration options of the FormBuilder component, which is used to design form schemas.
+ */
+export interface IFormBuilder {
+    /**
+     * This is the FormBuilder component element.
+     *
+     * @private
+     * @default null
+     */
+    element?: HTMLElement | null;
+    /**
+     * Specifies the locale of the Form Builder Component.
+     *
+     * @property
+     * @default 'en-US'
+     */
+    locale?: string;
+    /**
+     * Specifies whether the form schema created with the Form Builder can be exported.
+     *
+     * @property
+     * @default true
+     */
+    allowExport?: boolean;
+    /**
+     * Enables or disables the form preview mode option in the Form Builder.
+     *
+     * @property
+     * @default true
+     */
+    enablePreview?: boolean;
+    /**
+     * Specifies the mode of the Form Builder. There are two modes available:
+     * - Simple - This mode limits the supported components and options in the Form Builder to provide ease for non-technical users.
+     * - Developer - This mode enables the complete features in the Form Builder. This is the default mode.
+     *
+     * @property
+     * @default true
+     */
+    mode?: 'Simple' | 'Developer';
+    /**
+     * Specifies whether the form schema state should be persisted in the Form Builder. The local storage is used to maintain the persistence behavior.
+     *
+     * @property
+     * @default false
+     */
+    enablePersistence?: boolean;
+    /**
+     * Specifies whether the form elements to be displayed in Right to Left.
+     *
+     * @property
+     * @default false
+     */
+    enableRtl?: boolean;
+    /**
+     * This property is used to provide a set of custom components in addition to the existing form field components.
+     *
+     * @property
+     * @default undefined (uses defaultTemplates)
+     */
+    formTemplates?: DefaultTemplates[];
+    /**
+     * This property is used to modify the components for the form fields in basic, advanced, and layout categories in the left panel of the Form Builder.
+     *
+     * @example
+     * paletteConfig={{
+     *   [ComponentCategory.BASIC]: [
+     *     { type: FormComponentType.TEXTBOX, category: 'basic' },
+     *     { type: FormComponentType.CHECKBOX, category: 'basic' }
+     *   ],
+     *   [ComponentCategory.ADVANCED]: [
+     *     { type: FormComponentType.MULTISELECT, category: 'advanced' }
+     *   ]
+     * }}
+     *
+     * @property
+     * @private
+     * @default undefined (uses defaultPalette)
+     */
+    paletteConfig?: PaletteConfig;
+    /**
+     * Event triggered when a component property is changed in the property panel.
+     * Fires on every property value change with details of the changed field.
+     *
+     * @event
+     *
+     * @param args - Event data containing label, property key, value, and component id
+     */
+    onPropertyChanged?: (args: PropertyChangedEventArgs) => void;
+    /**
+     * Event triggered when a field drag operation starts.
+     * Fires for both root-level and nested container drags.
+     *
+     * @event
+     *
+     * @param args - Event data containing component and source container info
+     */
+    onFieldDragStarted?: (args: FieldDragStartedEventArgs) => void;
+    /**
+     * Event triggered when a dragged field is over a valid drop zone.
+     * Fires repeatedly while hovering over drop targets.
+     *
+     * @event
+     *
+     * @param args - Event data containing target container info
+     */
+    onFieldDraggingOver?: (args: FieldDraggingOverEventArgs) => void;
+    /**
+     * Event triggered when a field drop operation completes.
+     * Fires for successful drops in both root and nested containers.
+     *
+     * @event
+     *
+     * @param args - Event data containing source, target, and drop details
+     */
+    onFieldDropped?: (args: FieldDroppedEventArgs) => void;
+    /**
+     * This property facilitates an optional initial form schema to load in the Form Builder.
+     *
+     * @property
+     * @default null
+     */
+    schema?: Schema | any;
+    /**
+     * Gets the current form settings as a JSON string in the required export format.
+     *
+     * @returns Form settings JSON string
+     * @private
+     */
+    getFormSettings(): any;
+}
+/**
+ * FormBuilder component props (used for JSX props, excludes imperative methods)
+ */
+type IFormBuilderProps = Omit<IFormBuilder, 'element' | 'getFormSettings'> & HTMLAttributes<HTMLDivElement>;
+/**
+ * The FormBuilder component provides a visual, drag-and-drop interface for authoring form schemas. It supports palette customization, template insertion, dual modes (Simple/Developer), and emits structural form schemas (FormSchema) that can be consumed by FormRenderer.
+ *
+ * ```typescript
+ * import { FormBuilder } from '@syncfusion/ej2-react-form-builder';
+ *
+ * <FormBuilder />
+ * ```
+ */
+export declare const FormBuilder: React.ForwardRefExoticComponent<IFormBuilderProps & React.RefAttributes<IFormBuilder>>;
+declare const _default: React.NamedExoticComponent<Omit<IFormBuilder, "element" | "getFormSettings"> & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<IFormBuilder>>;
+export default _default;
+/**
+ * This event argument provides details when a form field's drag action starts.
+ */
+export interface FieldDragStartedEventArgs {
+    /** Specifies the name of the component being dragged. */
+    componentName: string | null;
+    /** Specifies the type of the component (e.g., 'textbox', 'dropdown', 'panel'). */
+    componentType: string;
+    /** Specifies the container ID where the drag originated ('root', panel ID, table ID, etc.). */
+    sourceContainerId: string;
+    /** Specifies whether this is a nested container drag. */
+    isNested: boolean;
+}
+/**
+ * This event argument provides details when a form field's drag action is in progress over a drop zone.
+ */
+export interface FieldDraggingOverEventArgs {
+    /** Specifies whether hovering over a nested container. */
+    isNested: boolean;
+}
+/**
+ * This event argument provides details when a form field's drag action is completed by dropping on a drop zone.
+ */
+export interface FieldDroppedEventArgs {
+    /** Specifies the name of the dropped component */
+    componentName: string;
+    /** Specifies whether the component was reordered. */
+    isReordered: boolean;
+    /** Specifies the type of the component. */
+    componentType: string;
+    /** Specifies the source container ID ('root', panel ID, 'palette' for new components) which acts as a drop zone. */
+    sourceContainerId: string;
+    /** Specifies the target container ID where the component was dropped. */
+    targetContainerId: string;
+}
+/**
+ * This event argument provides details when a property value changes in the property panel.
+ */
+export interface PropertyChangedEventArgs {
+    /**
+     * Specifies the display label of the changed property.
+     *
+     * @private
+     */
+    field: string;
+    /** Specifies the property name of the field. */
+    property: string;
+    /** Specifies the new value of the property. */
+    value: any;
+    /** Specifies the name of the component being edited. */
+    name: string;
+}