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

package/README.md

@@ -1,53 +1,98 @@
-# 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.
+# React Form Builder
+
+> **Using this package with an AI coding agent**
+>
+> Before generating Syncfusion code, ask your AI coding agent to run the Syncfusion setup using the following prompt:
+>
+> ```text
+> Set up this project for Syncfusion before generating code. Fetch
+> and follow the official instructions at https://ai.syncfusion.com,
+> then report the detected platform, installed skill pack, MCP
+> status, and any required licensing action.
+> ```
+> The setup detects your project’s platform and loads the appropriate Syncfusion skill pack. No Syncfusion account or MCP key is required to install or read Syncfusion agent skills.
+>
+> **Platform reference:** [https://ai.syncfusion.com/react/llms.txt](https://ai.syncfusion.com/react/llms.txt)
+
+## What's Included in the React Form Builder Package
+
+The React Form Builder package provides a drag-and-drop form design experience for creating dynamic forms with Syncfusion® controls.
+
+### Form Builder
+
+The [React Form Builder](https://www.syncfusion.com/react-components/?utm_source=npm&utm_medium=listing&utm_campaign=react-form-builder-npm) component allows you to design and generate dynamic forms with a simple drag-and-drop interface.
+
+<p align="center">
+    <a href="https://ej2.syncfusion.com/react/documentation/form-builder/getting-started">Getting Started</a> .
+    <a href="https://ej2.syncfusion.com/react/demos/#/tailwind3/form-builder/default">Online demos</a> .
+    <a href="https://www.syncfusion.com/react-components/?utm_source=npm&utm_medium=listing&utm_campaign=react-form-builder-npm">Learn more</a>
+</p>
+
+#### Key features
+
+* **Drag-and-drop form design** - Build forms quickly by dragging and dropping form fields onto the design area and rearranging them as needed.
+* **Wide range of built-in form components** - Use 20+ built-in fields, including text box, dropdown list, combo box, multi-select, date picker, time picker, checkbox, radio button, slider, rating, signature, and file upload.
+* **Custom components** - Extend the Form Builder by registering custom components for specialized fields and business-specific inputs.
+* **Form field configuration** - Define field names, labels, placeholders, validation rules, and other properties from the properties panel.
+* **Conditional logic** - Show or hide form fields dynamically based on values from other fields.
+* **Dependent dropdowns** - Configure cascading dropdowns where the options in one dropdown depend on the selected value of another.
+* **Expressions** - Bind calculated values to form fields using expressions so values update automatically when related fields change.
+* **Form preview** - Preview the designed form at any time before saving or publishing it.
+* **JSON schema viewing** - View the generated JSON schema to understand, validate, and reuse the form definition.
+* **Save and load form data** - Export the designed form as JSON schema and load it back to restore the exact form layout at runtime.
+* **Responsive rendering** - Create forms that adapt seamlessly to desktops, tablets, and mobile devices.
+
+<p align="center">
+Trusted by the world's leading companies
+  <a href="https://www.syncfusion.com/">
+    <img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Syncfusion logo">
+  </a>
+</p>
+
+## Setup
+
+To install `form-builder` and its dependent packages, use the following command.
+
+```sh
+npm install @syncfusion/ej2-react-form-builder
+```
 
-- **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.
+## Supported frameworks
 
-- **Theme support** — Supports light and dark themes with customizable styling options, allowing forms to align with application branding and user preferences.
+Form Builder components are offered in following list of frameworks.
 
-- **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.
+| [<img src="https://ej2.syncfusion.com/github/images/js.svg" height="50" />](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/angular-new.svg"  height="50" />](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Angular](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/vue.svg" height="50" />](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netcore.svg" height="50" />](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netmvc.svg" height="50" />](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | 
+| :-----: | :-----: | :-----: | :-----: | :-----: |
 
-- **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.
+## Resources
 
+* [Documentation](https://www.syncfusion.com/react-components/)
+* [Theme Studio](https://ej2.syncfusion.com/themestudio/)
+* [What's New](https://www.syncfusion.com/products/whatsnew/react?utm_medium=listing&utm_source=github)
+* [Road Map](https://www.syncfusion.com/products/roadmap/react)
+* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=react&type=all)
+* [AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview)
 
-## Installation
+## Support
 
-```bash
-npm install @syncfusion/ej2-react-form-builder
-```
+Product support is available through following mediums.
 
-## Usage
+* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
+* [Community forum](https://www.syncfusion.com/forums/react-js2?utm_source=npm&utm_medium=listing&utm_campaign=react-form-builder-npm)
+* [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new)
+* [Request feature or report bug](https://www.syncfusion.com/feedback/react?utm_source=npm&utm_medium=listing&utm_campaign=react-form-builder-npm)
+* Live chat
 
-```tsx
-import { FormBuilder } from '@syncfusion/ej2-react-form-builder';
-import '@syncfusion/ej2-react-form-builder/styles/tailwind3.css';
+## Changelog
 
-function App() {
-  return <FormBuilder />;
-}
-```
+Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/base/CHANGELOG.md). Get minor improvements and bug fixes every week to stay up to date with frequent updates.
 
 ## 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).
+> 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+ [React UI components](https://www.syncfusion.com/react-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.
+See [LICENSE FILE](https://github.com/syncfusion/ej2-react-ui-components/blob/master/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.
+© 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/diConfig.json

@@ -0,0 +1,148 @@
+{
+  "name": "Form-Builder",
+  "description": "Form Builder Component",
+  "keywords": {
+    "common": [
+      "ej2",
+      "syncfusion",
+      "ej2-form-builder",
+      "form builder",
+      "form-builder",
+      "ej2 form builder",
+      "react form builder",
+      "typescript form builder",
+      "form control",
+      "form controls",
+      "input",
+      "json form",
+      "schema form"
+    ],
+    "angular": [
+      "angular",
+      "ng",
+      "ej2-ng-form-builder",
+      "ng-form-builder",
+      "angular-form-builder"
+    ],
+    "react": [
+      "react",
+      "reactjs",
+      "ej2-react-form-builder",
+      "react-form-builder",
+      "form-builder"
+    ],
+    "vue": [
+      "vue",
+      "vuejs",
+      "ej2-vue-form-builder",
+      "vue-form-builder"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/syncfusion/ej2-form-builder"
+  },
+  "eventInterfaces": [
+    "FieldDragStartedEventArgs",
+    "FieldDraggingOverEventArgs",
+    "FieldDroppedEventArgs"
+  ],
+  "components": [
+    {
+      "baseClass": "FormBuilder",
+      "directoryName": "form-builder",
+      "type": "container",
+      "defaultTag": "<div id='FormBuilder'></div>",
+      "selector": "[ejs-form-builder], ejs-form-builder",
+      "preferredTag": "div",
+      "blazorType": "native",
+      "comment": [
+        "/**",
+        " * Represents the Angular Form Builder Component.",
+        " * ```html",
+        " * <ejs-form-builder></ejs-form-builder>",
+        " * ```",
+        " */"
+      ],
+      "reactComment": [
+        "/**",
+        " * `FormBuilder` represents the React Form Builder Component.",
+        " * ```ts",
+        " * <FormBuilder />",
+        " * ```",
+        " */"
+      ],
+      "vueComment": [
+        "/**",
+        " * Represents the Essential JS 2 VueJS Form Builder Component",
+        " * ```html",
+        " * <ejs-form-builder></ejs-form-builder>",
+        " * ```",
+        " */"
+      ],
+      "tagDirective": [
+        {
+          "baseClass": "ToolboxItemSetting",
+          "propertyName": "toolboxItems",
+          "directiveClassName": "toolboxItemSetting",
+          "arrayDirectiveClassName": "toolboxItemSettings",
+          "aspArrayClassName": "ToolboxItemSetting",
+          "isPartialClass": true,
+          "aspCollectionClassName": "ToolboxItemSettings",
+          "comment": [
+            "/**",
+            " * `e-toolboxItemSettings` directive represents a custom widget",
+            " * configuration item of the Angular FormBuilder component.",
+            " * It must be contained within the `e-toolboxItemSettings`",
+            " * collection of an `ejs-form-builder` component.",
+            " * ```html",
+            " * <ejs-form-builder>",
+            " * <e-toolboxItemSettings>",
+            " * <e-toolboxItemSetting></e-toolboxItemSetting>",
+            " * </e-toolboxItemSettings>",
+            " * </ejs-form-builder>",
+            " * ```",
+            " */"
+          ],
+          "reactComment": [
+            "/**",
+            " * `ToolboxItemSettingDirective` represents a custom widget",
+            " * configuration item of the React FormBuilder component.",
+            " * It must be contained within a",
+            " * `ToolboxItemSettingsDirective` collection of a",
+            " * `FormBuilderComponent`.",
+            " * ```tsx",
+            " * <FormBuilderComponent>",
+            " * <ToolboxItemSettingsDirective>",
+            " * <ToolboxItemSettingDirective />",
+            " * </ToolboxItemSettingsDirective>",
+            " * </FormBuilderComponent>",
+            " * ```",
+            " */"
+          ],
+          "vueComment": [
+            "/**",
+            " * `e-toolboxItemSettings` directive represents a custom widget",
+            " * configuration item of the Vue FormBuilder component.",
+            " * It must be contained within the `e-custom-widget-settings`",
+            " * collection of an `ejs-form-builder` component.",
+            " * ```html",
+            " * <ejs-form-builder>",
+            " * <e-toolboxItemSettings>",
+            " * <e-toolboxItemSetting></e-toolboxItemSetting>",
+            " * </e-toolboxItemSettings>",
+            " * </ejs-form-builder>",
+            " * ```",
+            " */"
+          ],
+          "templateProperties": [
+            "template"
+          ],
+          "blazorContainerTemplates": [
+            "template:template"
+          ]
+        }
+      ]
+    }
+  ]
+}