From bdf5a26e3b01c9829efe5814fb779d3f5a4f3652 Mon Sep 17 00:00:00 2001
From: Kamal Qureshi <kamal.qureshi@nmxglobalsoftware.com>
Date: Fri, 30 May 2025 01:49:03 +0500
Subject: [PATCH 1/5] Added suport for JSONForms through ANTd renderer

---
 client/package.json                           |  12 +
 .../comps/calendarComp/calendarConstants.tsx  |  25 +-
 .../src/components/Dropdown.tsx               |   9 +-
 .../lowcoder-design/src/components/form.tsx   |   6 +-
 .../lowcoder/src/components/JSLibraryTree.tsx |   6 +-
 .../jsonSchemaFormComp/JsonFormsRenderer.tsx  | 655 ++++++++++++++++++
 .../ObjectFieldTemplate.tsx                   | 136 ++--
 .../jsonSchemaFormComp/jsonSchemaFormComp.tsx | 277 +++++---
 .../comps/selectInputComp/checkboxComp.tsx    |  11 +-
 .../comps/comps/selectInputComp/radioComp.tsx |   8 +-
 .../columnTypeComps/columnMarkdownComp.tsx    |   2 +-
 .../lowcoder/src/comps/comps/textComp.tsx     |   4 +-
 .../src/comps/controls/multiSelectControl.tsx |   7 +-
 .../lowcoder/src/comps/queries/esQuery.tsx    |   7 +-
 .../src/comps/queries/resourceDropdown.tsx    |   6 +-
 .../src/layout/compSelectionWrapper.tsx       |   5 +-
 .../components/CreateApiKeyModal.tsx          |   2 +-
 .../src/pages/common/previewHeader.tsx        |   6 +-
 .../src/pages/queryLibrary/LeftNav.tsx        |   5 +-
 .../setting/idSource/styledComponents.tsx     |  11 +-
 client/yarn.lock                              | 413 ++++++++++-
 package-lock.json                             | 108 +++
 package.json                                  |   2 +
 translations/locales/en.js                    |   4 +-
 yarn.lock                                     |  76 +-
 25 files changed, 1576 insertions(+), 227 deletions(-)
 create mode 100644 client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/JsonFormsRenderer.tsx

diff --git a/client/package.json b/client/package.json
index 38e4182542..fe18db2b32 100644
--- a/client/package.json
+++ b/client/package.json
@@ -72,14 +72,25 @@
     "eslint-plugin-only-ascii@^0.0.0": "patch:eslint-plugin-only-ascii@npm%3A0.0.0#./.yarn/patches/eslint-plugin-only-ascii-npm-0.0.0-29e3417685.patch"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@jsonforms/core": "3.5.1",
+    "@jsonforms/material-renderers": "^3.5.1",
+    "@jsonforms/react": "3.5.1",
     "@lottiefiles/react-lottie-player": "^3.5.3",
     "@remixicon/react": "^4.1.1",
+    "@rjsf/antd": "^6.0.0-beta.10",
+    "@rjsf/core": "^6.0.0-beta.10",
+    "@rjsf/utils": "^6.0.0-beta.10",
+    "@rjsf/validator-ajv8": "^6.0.0-beta.10",
     "@supabase/supabase-js": "^2.45.4",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
     "@types/styled-components": "^5.1.34",
+    "antd": "^5.25.3",
     "antd-mobile": "^5.34.0",
     "chalk": "4",
+    "dayjs": "^1.11.13",
     "flag-icons": "^7.2.1",
     "number-precision": "^1.6.0",
     "react-countup": "^6.5.3",
@@ -88,6 +99,7 @@
     "resize-observer-polyfill": "^1.5.1",
     "rollup": "^4.22.5",
     "simplebar": "^6.2.5",
+    "styled-components": "^6.1.18",
     "tui-image-editor": "^3.15.3"
   }
 }
diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx
index 306f90a79d..c680763be4 100644
--- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx
@@ -28,7 +28,7 @@ import {
   SlotLabelContentArg,
   ViewContentArg,
 } from "@fullcalendar/core";
-import { default as Form } from "antd/es/form";
+import { default as Form, FormProps } from "antd/es/form";
 
 type Theme = typeof Theme;
 type EventModalStyleType = typeof EventModalStyleType;
@@ -727,7 +727,7 @@ export const Event = styled.div<{
     margin-left: 15px;
     white-space: pre-wrap;
     word-break: break-word;
-    margin-top: 2px; 
+    margin-top: 2px;
   }
 
   &.small {
@@ -761,10 +761,10 @@ export const Event = styled.div<{
   }
   &.past {
     background-color: ${(props) =>
-    `rgba(${props?.$extendedProps?.color}, 0.3)`};
+      `rgba(${props?.$extendedProps?.color}, 0.3)`};
     &::before {
-    background-color: ${(props) => props?.$extendedProps?.color};
-    opacity: 0.3;
+      background-color: ${(props) => props?.$extendedProps?.color};
+      opacity: 0.3;
     }
     &::before,
     .event-title,
@@ -776,9 +776,11 @@ export const Event = styled.div<{
   }
 `;
 
-export const FormWrapper = styled(Form)<{
-  $modalStyle?: EventModalStyleType
-}>`
+export const FormWrapper = styled(Form)<
+  FormProps & {
+    $modalStyle?: EventModalStyleType;
+  }
+>`
   .ant-form-item-label {
     width: 125px;
     text-align: left;
@@ -787,12 +789,11 @@ export const FormWrapper = styled(Form)<{
     label:not(.ant-form-item-required) {
       margin-left: 2px;
     }
-      label.ant-form-item-required{
+    label.ant-form-item-required {
       margin-left: 2px;
     }
     label span {
       ${UnderlineCss}
-      
     }
   }
 
@@ -1117,12 +1118,12 @@ export const slotLabelFormat = [
   {
     hour: "2-digit",
     minute: "2-digit",
-  }, 
+  },
 ] as FormatterInput[];
 
 export const slotLabelFormatWeek = [
   { week: "short" },
-  { hour: "2-digit" }, 
+  { hour: "2-digit" },
 ] as FormatterInput[];
 
 export const slotLabelFormatMonth = [
diff --git a/client/packages/lowcoder-design/src/components/Dropdown.tsx b/client/packages/lowcoder-design/src/components/Dropdown.tsx
index 5adb4e1869..e02508e8c0 100644
--- a/client/packages/lowcoder-design/src/components/Dropdown.tsx
+++ b/client/packages/lowcoder-design/src/components/Dropdown.tsx
@@ -18,9 +18,9 @@ export const DropdownContainer = styled.div<{ $placement: ControlPlacement }>`
   width: ${(props) =>
     props.$placement === "right"
       ? "calc(100% - 96px)"
-      : "bottom"
-      ? "calc(100% - 112px)"
-      : "calc(100% - 136px"};
+      : props.$placement === "bottom"
+        ? "calc(100% - 112px)"
+        : "calc(100% - 136px)"};
   flex-grow: 1;
 
   .ant-select:not(.ant-select-customize-input) .ant-select-selector {
@@ -124,7 +124,8 @@ const FlexDiv = styled.div`
 
 const LabelWrapper = styled.div<{ $placement: ControlPlacement }>`
   flex-shrink: 0;
-  width: ${(props) => (props.$placement === "right" ? "96px" : "bottom" ? "112px" : "136px")};
+  width: ${(props) =>
+    props.$placement === "right" ? "96px" : props.$placement === "bottom" ? "112px" : "136px"};
 `;
 
 export type OptionType = {
diff --git a/client/packages/lowcoder-design/src/components/form.tsx b/client/packages/lowcoder-design/src/components/form.tsx
index ca469d5072..52b65415a4 100644
--- a/client/packages/lowcoder-design/src/components/form.tsx
+++ b/client/packages/lowcoder-design/src/components/form.tsx
@@ -1,5 +1,5 @@
-import { default as Form } from "antd/es/form";
-import { default as AntdFormItem, FormItemProps as AntdFormItemProps } from "antd/es/form/FormItem";
+import { default as Form, FormProps } from "antd/es/form";
+import { default as AntdFormItem, FormItemProps as AntdFormItemProps} from "antd/es/form/FormItem";
 import { default as Input, InputProps } from "antd/es/input";
 import { default as TextArea, TextAreaProps } from "antd/es/input/TextArea";
 import { default as InputNumber, InputNumberProps } from "antd/es/input-number";
@@ -429,7 +429,7 @@ export const FormKeyValueItem = (props: FormItemProps) => (
   </FormItemContain>
 );
 
-export const DatasourceForm = styled(Form)`
+export const DatasourceForm = styled(Form)<FormProps>`
   display: flex;
   flex-direction: column;
   gap: 8px;
diff --git a/client/packages/lowcoder/src/components/JSLibraryTree.tsx b/client/packages/lowcoder/src/components/JSLibraryTree.tsx
index e7c464c605..19a4c971f2 100644
--- a/client/packages/lowcoder/src/components/JSLibraryTree.tsx
+++ b/client/packages/lowcoder/src/components/JSLibraryTree.tsx
@@ -134,7 +134,11 @@ const JSLibraryCollapse = styled(Collapse)<{ $mode: "row" | "column" }>`
   }
 
   .lib-label-name {
-    ${EllipsisTextCss};
+    ${css`
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    `}
   }
 `;
 
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/JsonFormsRenderer.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/JsonFormsRenderer.tsx
new file mode 100644
index 0000000000..0d9d4f8657
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/JsonFormsRenderer.tsx
@@ -0,0 +1,655 @@
+import React, { useState, useCallback, useEffect } from "react";
+import {
+  Form,
+  Input,
+  InputNumber,
+  Switch,
+  DatePicker,
+  Select,
+  Space,
+  Button,
+  Slider,
+  Tabs,
+  Row,
+  Col,
+  Steps,
+} from "antd";
+import styled from "styled-components";
+import type { JsonSchema } from "@jsonforms/core";
+import type { JSONSchema7 } from "json-schema";
+import debounce from "lodash/debounce";
+import dayjs from "dayjs";
+import { trans } from "i18n";
+
+const { TextArea } = Input;
+
+const Container = styled.div`
+  .ant-form-item {
+    margin-bottom: 16px;
+  }
+
+  .ant-form-item-label {
+    padding: 0;
+    font-weight: 600;
+  }
+
+  .ant-form-item-extra {
+    min-height: 0px;
+  }
+
+  .ant-form-item-explain {
+    line-height: 24px;
+  }
+
+  .ant-steps {
+    margin-bottom: 24px;
+  }
+
+  .stepper-navigation {
+    margin-top: 24px;
+    display: flex;
+    justify-content: space-between;
+  }
+`;
+
+interface Category {
+  type: "Category";
+  label?: string;
+  i18n?: string;
+  elements: Array<Control | Layout>;
+  rule?: {
+    effect: "SHOW" | "HIDE";
+    condition: {
+      scope: string;
+      schema: {
+        const: any;
+      };
+    };
+  };
+}
+
+interface Control {
+  type: "Control";
+  scope: string;
+  options?: {
+    multi?: boolean;
+    slider?: boolean;
+    restrict?: boolean;
+  };
+  rule?: {
+    effect: "SHOW" | "HIDE";
+    condition: {
+      scope: string;
+      schema: {
+        const: any;
+      };
+    };
+  };
+}
+
+interface HorizontalLayout {
+  type: "HorizontalLayout";
+  elements: Control[];
+}
+
+type Layout = HorizontalLayout;
+
+interface Categorization {
+  type: "Categorization";
+  elements: Category[];
+  options?: {
+    variant?: "tabs" | "stepper";
+    showNavButtons?: boolean;
+  };
+}
+
+interface FieldUiSchema {
+  type?: string;
+  scope?: string;
+  options?: {
+    multi?: boolean;
+    slider?: boolean;
+    restrict?: boolean;
+  };
+  [key: string]: any;
+}
+
+export interface JsonFormsUiSchema {
+  type?: string;
+  elements?: Array<Category | Control | Layout>;
+  options?: {
+    variant?: "tabs" | "stepper";
+    showNavButtons?: boolean;
+  };
+  [key: string]: FieldUiSchema | JsonFormsUiSchema | any;
+}
+
+export interface JsonFormsRendererProps {
+  schema: JsonSchema;
+  data: any;
+  onChange: (data: any) => void;
+  style?: any;
+  showVerticalScrollbar?: boolean;
+  autoHeight?: boolean;
+  resetAfterSubmit?: boolean;
+  uiSchema?: JsonFormsUiSchema;
+  onSubmit?: () => void;
+}
+
+const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
+  schema,
+  data,
+  onChange,
+  style,
+  uiSchema,
+  onSubmit,
+  resetAfterSubmit,
+}) => {
+  // Local state to handle immediate updates
+  const [localData, setLocalData] = useState(data);
+  // Track focused field
+  const [focusedField, setFocusedField] = useState<string | null>(null);
+  const [currentStep, setCurrentStep] = useState(0);
+
+  // Update local data when prop data changes
+  useEffect(() => {
+    setLocalData(data);
+  }, [data]);
+
+  // Debounced onChange handler
+  const debouncedOnChange = useCallback(
+    debounce((newData: any) => {
+      onChange(newData);
+    }, 300),
+    [onChange]
+  );
+
+  const getFieldUiSchema = (path: string): FieldUiSchema | undefined => {
+    if (!uiSchema) return undefined;
+    
+    // For JSONForms UI schema, we need to find the Control element that matches the path
+    if (uiSchema.type === "HorizontalLayout" && Array.isArray(uiSchema.elements)) {
+      const control = uiSchema.elements.find((element: any) => {
+        if (element.type === "Control") {
+          // Convert the scope path to match our field path
+          // e.g., "#/properties/multilineString" -> "multilineString"
+          const scopePath = element.scope?.replace("#/properties/", "");
+          return scopePath === path;
+        }
+        return false;
+      });
+      return control;
+    }
+    
+    // Fallback to the old path-based lookup for backward compatibility
+    const pathParts = path.split('.');
+    let current: any = uiSchema;
+    for (const part of pathParts) {
+      if (current && typeof current === 'object') {
+        current = current[part];
+      } else {
+        return undefined;
+      }
+    }
+    return current as FieldUiSchema;
+  };
+
+  const evaluateRule = (rule: any, data: any): boolean => {
+    if (!rule) return true;
+    
+    const { scope, schema: ruleSchema } = rule.condition;
+    const path = scope.replace("#/properties/", "").split("/");
+    let value = data;
+    
+    for (const part of path) {
+      value = value?.[part];
+    }
+    
+    return value === ruleSchema.const;
+  };
+
+  const shouldShowElement = (element: any): boolean => {
+    if (!element.rule) return true;
+    return evaluateRule(element.rule, data);
+  };
+
+  const renderLayout = (layout: Layout) => {
+    if (layout.type === "HorizontalLayout") {
+      return (
+        <Row gutter={16}>
+          {layout.elements
+            .filter(shouldShowElement)
+            .map((element, index) => (
+              <Col key={index} span={24 / layout.elements.length}>
+                {renderControl(element)}
+              </Col>
+            ))}
+        </Row>
+      );
+    }
+    return null;
+  };
+
+  const renderControl = (control: Control) => {
+    // Convert scope path to actual data path
+    // e.g., "#/properties/address/properties/street" -> "address.street"
+    const scopePath = control.scope.replace("#/properties/", "").replace("/properties/", ".");
+    const path = scopePath.split(".");
+    let fieldSchema: JSONSchema7 | undefined = schema as JSONSchema7;
+    let value = data;
+    
+    // Navigate through the schema to find the correct field schema
+    for (const part of path) {
+      if (fieldSchema?.properties) {
+        fieldSchema = fieldSchema.properties[part] as JSONSchema7 | undefined;
+      }
+      if (value && typeof value === 'object') {
+        value = value[part];
+      }
+    }
+
+    if (!fieldSchema) return null;
+
+    // Use the last part of the path as the field key
+    const fieldKey = path[path.length - 1];
+    // Use the parent path for nested objects
+    const parentPath = path.slice(0, -1).join(".");
+
+    return renderField(
+      fieldKey,
+      fieldSchema,
+      value,
+      parentPath
+    );
+  };
+
+  const renderCategory = (category: Category) => {
+    if (!shouldShowElement(category)) return null;
+
+    return (
+      <div key={category.label}>
+        {category.elements
+          .filter(shouldShowElement)
+          .map((element, index) => {
+            if (element.type === "Control") {
+              return <div key={index}>{renderControl(element)}</div>;
+            } else if (element.type === "HorizontalLayout") {
+              return <div key={index}>{renderLayout(element)}</div>;
+            }
+            return null;
+          })}
+      </div>
+    );
+  };
+
+  const renderField = (
+    key: string,
+    fieldSchema: any,
+    value: any,
+    path: string = ""
+  ) => {
+    const fullPath = path ? `${path}.${key}` : key;
+    const label = fieldSchema.title || key;
+    const required = schema.required?.includes(key);
+    const uiSchemaForField = getFieldUiSchema(fullPath);
+    const isMultiline = uiSchemaForField?.options?.multi === true;
+    const isSlider = uiSchemaForField?.options?.slider === true;
+    const isRestrict = uiSchemaForField?.options?.restrict === true;
+    const isFocused = focusedField === fullPath;
+
+    const handleFocus = () => setFocusedField(fullPath);
+    const handleBlur = () => setFocusedField(null);
+
+    const handleChange = (newValue: any) => {
+      const newData = { ...localData };
+      if (path) {
+        const pathParts = path.split(".");
+        let current = newData;
+        for (let i = 0; i < pathParts.length; i++) {
+          if (i === pathParts.length - 1) {
+            current[pathParts[i]] = {
+              ...current[pathParts[i]],
+              [key]: newValue,
+            };
+          } else {
+            current = current[pathParts[i]];
+          }
+        }
+      } else {
+        newData[key] = newValue;
+      }
+
+      // Update local state immediately
+      setLocalData(newData);
+      // Debounce the parent update
+      debouncedOnChange(newData);
+    };
+
+    // Handle nested objects
+    if (fieldSchema.type === "object" && fieldSchema.properties) {
+      return (
+        <Form.Item key={fullPath} label={label} required={required}>
+          <Space direction="vertical" style={{ width: "100%" }}>
+            {Object.entries(fieldSchema.properties).map(
+              ([subKey, subSchema]: [string, any]) =>
+                renderField(subKey, subSchema, value?.[subKey], fullPath)
+            )}
+          </Space>
+        </Form.Item>
+      );
+    }
+
+    // Handle arrays
+    if (fieldSchema.type === "array") {
+      const items = value || [];
+      return (
+        <Form.Item key={fullPath} label={label} required={required}>
+          <Space direction="vertical" style={{ width: "100%" }}>
+            {items.map((item: any, index: number) => (
+              <Space key={index}>
+                {renderField(`${index}`, fieldSchema.items, item, fullPath)}
+                <Button
+                  type="text"
+                  danger
+                  onClick={() => {
+                    const newItems = [...items];
+                    newItems.splice(index, 1);
+                    handleChange(newItems);
+                  }}
+                >
+                  Remove
+                </Button>
+              </Space>
+            ))}
+            <Button type="dashed" onClick={() => handleChange([...items, ""])}>
+              Add Item
+            </Button>
+          </Space>
+        </Form.Item>
+      );
+    }
+
+    // Handle different field types
+    switch (fieldSchema.type) {
+      case "string":
+        if (fieldSchema.format === "date") {
+          return (
+            <Form.Item 
+              key={fullPath} 
+              label={label} 
+              required={required}
+              extra={isFocused ? fieldSchema.description : undefined}
+            >
+              <DatePicker
+                style={{ width: "100%" }}
+                value={value ? dayjs(value).isValid() ? dayjs(value) : null : null}
+                onChange={(date) => {
+                  if (date && date.isValid()) {
+                    handleChange(date.format('YYYY-MM-DD'));
+                  } else {
+                    handleChange(null);
+                  }
+                }}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+                format="YYYY-MM-DD"
+                allowClear={true}
+                inputReadOnly={true}
+                disabledDate={(current) => {
+                  // Disable future dates
+                  return current && current.isAfter(dayjs().endOf('day'));
+                }}
+                picker="date"
+              />
+            </Form.Item>
+          );
+        }
+        if (fieldSchema.enum) {
+          return (
+            <Form.Item 
+              key={fullPath} 
+              label={label} 
+              required={required}
+              extra={isFocused ? fieldSchema.description : undefined}
+            >
+              <Select
+                style={{ width: "100%" }}
+                value={value}
+                onChange={handleChange}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+                options={fieldSchema.enum.map((option: string) => ({
+                  label: option,
+                  value: option,
+                }))}
+              />
+            </Form.Item>
+          );
+        }
+        // Check if this field should be multiline
+        if (isMultiline) {
+          return (
+            <Form.Item 
+              key={fullPath} 
+              label={label} 
+              required={required}
+              extra={isFocused ? fieldSchema.description : undefined}
+            >
+              <TextArea
+                value={value || ""}
+                onChange={(e) => handleChange(e.target.value)}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+                autoComplete="off"
+                spellCheck={false}
+                autoSize={{ minRows: 3, maxRows: 6 }}
+                maxLength={isRestrict ? fieldSchema.maxLength : undefined}
+              />
+            </Form.Item>
+          );
+        }
+        return (
+          <Form.Item 
+            key={fullPath} 
+            label={label} 
+            required={required}
+            extra={isFocused ? fieldSchema.description : undefined}
+          >
+            <Input
+              value={value || ""}
+              onChange={(e) => handleChange(e.target.value)}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+              autoComplete="off"
+              spellCheck={false}
+              maxLength={isRestrict ? fieldSchema.maxLength : undefined}
+            />
+          </Form.Item>
+        );
+
+      case "number":
+      case "integer":
+        return (
+          <Form.Item 
+            key={fullPath} 
+            label={label} 
+            required={required}
+            extra={isFocused ? fieldSchema.description : undefined}
+          >
+            {isSlider ? (
+              <Slider
+                style={{ width: "100%" }}
+                min={fieldSchema.minimum}
+                max={fieldSchema.maximum}
+                value={value}
+                onChange={handleChange}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+              />
+            ) : (
+              <InputNumber
+                style={{ width: "100%" }}
+                value={value}
+                onChange={handleChange}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
+                min={fieldSchema.minimum}
+                max={fieldSchema.maximum}
+                controls={false}
+                formatter={(value) =>
+                  `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
+                }
+                parser={(value) => value!.replace(/\$\s?|(,*)/g, "")}
+              />
+            )}
+          </Form.Item>
+        );
+
+      case "boolean":
+        return (
+          <Form.Item
+            key={fullPath}
+            label={label}
+            required={required}
+            valuePropName="checked"
+            extra={isFocused ? fieldSchema.description : undefined}
+          >
+            <div onFocus={handleFocus} onBlur={handleBlur}>
+              <Switch 
+                checked={value} 
+                onChange={handleChange}
+              />
+            </div>
+          </Form.Item>
+        );
+
+      default:
+        return (
+          <Form.Item 
+            key={fullPath} 
+            label={label} 
+            required={required}
+            extra={isFocused ? fieldSchema.description : undefined}
+          >
+            <Input
+              value={value || ""}
+              onChange={(e) => handleChange(e.target.value)}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+              autoComplete="off"
+              spellCheck={false}
+            />
+          </Form.Item>
+        );
+    }
+  };
+
+  const handleSubmit = () => {
+    if (onSubmit) {
+      onSubmit();
+      if (resetAfterSubmit) {
+        setCurrentStep(0);
+      }
+    }
+  };
+
+  if (uiSchema?.type === "Categorization") {
+    const categorization = uiSchema as Categorization;
+    const variant = categorization.options?.variant || "tabs";
+    const visibleCategories = categorization.elements.filter(shouldShowElement);
+    const isLastStep = currentStep === visibleCategories.length - 1;
+
+    const handleNext = () => {
+      if (currentStep < visibleCategories.length - 1) {
+        setCurrentStep(currentStep + 1);
+      }
+    };
+
+    const handlePrev = () => {
+      if (currentStep > 0) {
+        setCurrentStep(currentStep - 1);
+      }
+    };
+
+    if (variant === "stepper") {
+      return (
+        <Container style={style}>
+          <Steps
+            current={currentStep}
+            items={visibleCategories.map((category) => ({
+              title: category.i18n ? trans(category.i18n) : (category.label || ''),
+              description: category.elements.length > 0 ? 
+                `${category.elements.length} field${category.elements.length > 1 ? 's' : ''}` : 
+                undefined
+            }))}
+          />
+          <div>
+            {renderCategory(visibleCategories[currentStep])}
+          </div>
+          <div className="stepper-navigation">
+            <Button 
+              onClick={handlePrev}
+              disabled={currentStep === 0}
+            >
+              {trans("previous")}
+            </Button>
+            {isLastStep ? (
+              <Button 
+                type="primary"
+                onClick={handleSubmit}
+              >
+                {trans("submit")}
+              </Button>
+            ) : (
+              <Button 
+                type="primary"
+                onClick={handleNext}
+              >
+                {trans("next")}
+              </Button>
+            )}
+          </div>
+        </Container>
+      );
+    }
+
+    if (variant === "tabs") {
+      return (
+        <Container style={style}>
+          <Tabs
+            activeKey={String(currentStep)}
+            onChange={(key) => setCurrentStep(parseInt(key))}
+            items={visibleCategories.map((category, index) => ({
+              key: String(index),
+              label: category.i18n ? trans(category.i18n) : (category.label || ''),
+              children: renderCategory(category),
+            }))}
+          />
+        </Container>
+      );
+    }
+  }
+
+  // Fallback to default rendering if not a categorization
+  return (
+    <Container style={style}>
+      <Form layout="vertical">
+        {Object.entries(schema.properties || {}).map(
+          ([key, fieldSchema]: [string, any]) =>
+            renderField(key, fieldSchema, localData?.[key])
+        )}
+        <Form.Item>
+          <Button
+            type="primary"
+            onClick={handleSubmit}
+            style={{ float: "right" }}
+          >
+            {trans("event.submit")}
+          </Button>
+        </Form.Item>
+      </Form>
+    </Container>
+  );
+};
+
+export default React.memo(JsonFormsRenderer);
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/ObjectFieldTemplate.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/ObjectFieldTemplate.tsx
index c03a436c90..846b0d5aff 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/ObjectFieldTemplate.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/ObjectFieldTemplate.tsx
@@ -1,7 +1,13 @@
 import React, { useEffect, useRef, useState } from "react";
-import { Row, Col, Tabs } from 'antd';
-import { ObjectFieldTemplateProps, getTemplate, getUiOptions, descriptionId, titleId, canExpand } from '@rjsf/utils';
-import { ConfigConsumer } from 'antd/es/config-provider/context';
+import { Row, Col, Tabs } from "antd";
+import {
+  ObjectFieldTemplateProps,
+  getTemplate,
+  getUiOptions,
+  descriptionId,
+  canExpand,
+} from "@rjsf/utils";
+import { ConfigConsumer } from "antd/es/config-provider/context";
 import { useContainerWidth } from "./jsonSchemaFormComp";
 import styled from "styled-components";
 import TabPane from "antd/es/tabs/TabPane";
@@ -47,7 +53,7 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
   const getLegendStyle = (level: number): React.CSSProperties => {
     switch (level) {
       case 0:
-        return { fontSize: "16px", fontWeight: "bold", marginBottom: "8px" }; // Form Title
+        return { fontSize: "16px", fontWeight: "bold", marginBottom: "24px" }; // Form Title
       case 1:
         return { fontSize: "14px", fontWeight: "600", marginBottom: "6px" }; // Section Title
       default:
@@ -63,7 +69,7 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
       lg: 12,
       xl: 8,
     };
-  
+
     if (typeof colSpan === "number") {
       return { span: colSpan };
     } else if (typeof colSpan === "object") {
@@ -81,7 +87,7 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
     }
     return { span: 24 }; // Default span
   };
-  
+
   const getFieldRenderer = (type: string) => {
     const typeMap: Record<string, string> = {
       string: "StringField",        // Handles strings
@@ -95,11 +101,11 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
       oneOf: "OneOfField",          // Handles oneOf schemas
       schema: "SchemaField",
     };
-  
+
     const fieldName = typeMap[type];
     return fieldName ? registry.fields[fieldName] : undefined;
   };
-  
+
   const renderSingleLevel = (level : number) => {
     return (
       <Row gutter={rowGutter}>
@@ -108,14 +114,17 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
           const colSpan = isArray
             ? { span: 24 }
             : calculateResponsiveColSpan(uiSchema?.[prop.name] || {});
-  
+
           return (
             <Col key={prop.name} {...colSpan}>
               {/* Render legend for array fields */}
               {isArray && (
-                <><br /><legend style={getLegendStyle(level)}>
-                  {prop.content.props.schema.title}
-                </legend></>
+                <>
+                  <br />
+                  <legend style={getLegendStyle(level)}>
+                    {prop.content.props.schema.title}
+                  </legend>
+                </>
               )}
               {/* Render field content */}
               {prop.content}
@@ -139,8 +148,13 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
                       const colSpan = calculateResponsiveColSpan(field.uiSchema);
                       return (
                         <Col key={fieldIndex} {...colSpan}>
-                          {properties.find((prop) => prop.name === field.scope.replace("#/properties/", ""))
-                            ?.content}
+                          {
+                            properties.find(
+                              (prop) =>
+                                prop.name ===
+                                field.scope.replace("#/properties/", "")
+                            )?.content
+                          }
                         </Col>
                       );
                     })}
@@ -149,8 +163,10 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
               }
 
               if (element.type === "Control") {
-                return properties.find((prop) => prop.name === element.scope.replace("#/properties/", ""))
-                  ?.content;
+                return properties.find(
+                  (prop) =>
+                    prop.name === element.scope.replace("#/properties/", "")
+                )?.content;
               }
 
               return null;
@@ -163,32 +179,45 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
 
   const renderFieldsFromSection = (section: any, level: number = 0) => {
     const { formData, schema, uiSchema } = section.content.props;
-  
+
     if (schema.type === "object" && schema.properties) {
       // Render fields for objects
       const fieldKeys = Object.keys(schema.properties);
-  
+
       return (
-        <Row gutter={rowGutter} style={level === 0 ? { marginBottom: "36px" } : { marginLeft: -8, marginRight: -8, marginBottom: "16px" }}>
+        <Row
+          gutter={rowGutter}
+          style={
+            level === 0
+              ? { marginBottom: "36px" }
+              : { marginLeft: -8, marginRight: -8, marginBottom: "16px" }
+          }
+        >
           {fieldKeys.map((fieldKey) => {
             const fieldSchema = schema.properties[fieldKey];
             const fieldUiSchema = uiSchema?.[fieldKey] || {};
             const fieldFormData = formData ? formData[fieldKey] : undefined;
             const span = calculateResponsiveColSpan(fieldUiSchema);
-  
+
             const FieldRenderer = getFieldRenderer(fieldSchema.type);
-  
+
             if (!FieldRenderer) {
-              console.error(`No renderer found for field type: ${fieldSchema.type}`);
+              console.error(
+                `No renderer found for field type: ${fieldSchema.type}`
+              );
               return (
                 <Col key={fieldKey} span={span.span}>
                   <div>Unsupported field type: {fieldSchema.type}</div>
                 </Col>
               );
             }
-  
+
             return (
-              <Col key={fieldKey} span={span.span} style={{marginTop : "12px"}}>
+              <Col
+                key={fieldKey}
+                span={span.span}
+                style={{ marginTop: "12px" }}
+              >
                 <fieldset>
                   <legend style={getLegendStyle(level)}>{fieldSchema.title || fieldKey}</legend>
                   <FieldRenderer
@@ -219,7 +248,7 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
     } else if (schema.type === "array" && schema.items) {
       // Render fields for arrays
       const FieldRenderer = getFieldRenderer(schema.type);
-  
+
       if (!FieldRenderer) {
         console.error(`No renderer found for field type: ${schema.type}`);
         return (
@@ -228,7 +257,7 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
           </div>
         );
       }
-  
+
       return (
         <fieldset>
           <FieldRenderer
@@ -248,16 +277,17 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
         </fieldset>
       );
     }
-  
+
     // Log error for unsupported or missing schema types
     console.error("Unsupported or missing schema type in section:", section);
     return null;
-  };  
+  };
 
   const renderSections = (properties: any[], level: number) => {
-
     const isMultiLevel = properties.some(
-      (prop) => prop.content.props.schema?.type === "object" && prop.content.props.schema?.properties
+      (prop) =>
+        prop.content.props.schema?.type === "object" &&
+        prop.content.props.schema?.properties
     );
 
     if (!isMultiLevel) {
@@ -265,29 +295,29 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
     }
 
     return properties.map((section) => {
-        const schema = section.content.props.schema;
+      const schema = section.content.props.schema;
         const isArray = typeof section.content.props.index === 'number';
-        const sectionTitle = schema.title || section.name;
+      const sectionTitle = schema.title || section.name;
 
-        return (
-          <Row
-              key={section.name}
-              gutter={rowGutter}
-              style={{ marginBottom: "16px", width: "100%" }}
-          >
-            <Col span={24}>
-              <fieldset>
-                {/* Always render the legend for the section itself */}
-                {level === 0 && !isArray ? (
-                    <legend style={getLegendStyle(level)}>{sectionTitle}</legend>
-                ) : null}
-
-                {/* Render the section content */}
-                {renderFieldsFromSection(section, level + 1)}
-              </fieldset>
-            </Col>
-          </Row>
-        );
+      return (
+        <Row
+          key={section.name}
+          gutter={rowGutter}
+          style={{ marginBottom: "16px", width: "100%" }}
+        >
+          <Col span={24}>
+            <fieldset>
+              {/* Always render the legend for the section itself */}
+              {level === 0 && !isArray ? (
+                <legend style={getLegendStyle(level)}>{sectionTitle}</legend>
+              ) : null}
+
+              {/* Render the section content */}
+              {renderFieldsFromSection(section, level + 1)}
+            </fieldset>
+          </Col>
+        </Row>
+      );
     });
   };
 
@@ -296,7 +326,7 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
       {() => (
         <fieldset id={idSchema.$id} className="form-section">
           {/* Render Title */}
-          {schema.type === "object" && title && (
+          {/* {schema.type === "object" && title && (
             <legend>
               <TitleFieldTemplate
                 id={titleId(idSchema)}
@@ -307,7 +337,7 @@ const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
                 registry={registry}
               />
             </legend>
-          )}
+          )} */}
 
           {/* Render Description */}
           {description && (
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
index cba5826862..d37fc40a4a 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
@@ -1,5 +1,5 @@
 import { withTheme } from '@rjsf/core';
-import type { RJSFValidationError, ErrorListProps, UISchemaSubmitButtonOptions } from "@rjsf/utils";
+import type { RJSFValidationError, ErrorListProps, UISchemaSubmitButtonOptions, ErrorSchema } from "@rjsf/utils";
 import validator from "@rjsf/validator-ajv8";
 import { default as Button } from "antd/es/button";
 import { BoolControl } from "comps/controls/boolControl";
@@ -28,7 +28,10 @@ import ObjectFieldTemplate from './ObjectFieldTemplate';
 import ArrayFieldTemplate from './ArrayFieldTemplate';
 import { Select } from 'antd';
 import Title from 'antd/es/typography/Title';
-
+import { dropdownControl } from 'comps/controls/dropdownControl';
+import JsonFormsRenderer from "./JsonFormsRenderer";
+import { UISchemaElement } from "@jsonforms/core";
+import type { JsonFormsUiSchema } from "./JsonFormsRenderer";
 
 Theme.widgets.DateWidget = DateWidget(false);
 Theme.widgets.DateTimeWidget = DateWidget(true);
@@ -118,7 +121,10 @@ function convertData(schema?: JSONSchema7, data?: any) {
       let newData: Record<string, unknown> = {};
       Object.entries(properties).forEach(([key, definition]) => {
         const value = data ? data[key] : undefined;
-        newData[key] = typeof definition === "object" ? convertData(definition, value) : value;
+        newData[key] =
+          typeof definition === "object"
+            ? convertData(definition, value)
+            : value;
       });
       return newData;
     }
@@ -204,9 +210,14 @@ function onSubmit(props: {
   });
 }
 
+const formTypeOptions = [
+  { label: "RJSF", value: "rjsf" },
+  { label: "JSONForms", value: "jsonforms" },
+] as const;
 
 let FormBasicComp = (function () {
   const childrenMap = {
+    formType: dropdownControl(formTypeOptions, "rjsf"),
     resetAfterSubmit: BoolControl,
     schema: jsonObjectControl(i18nObjs.jsonForm.defaultSchema),
     showVerticalScrollbar: withDefault(BoolControl, false),
@@ -214,15 +225,19 @@ let FormBasicComp = (function () {
     autoHeight: AutoHeightControl,
     data: jsonObjectExposingStateControl("data", i18nObjs.jsonForm.defaultFormData),
     onEvent: eventHandlerControl(EventOptions),
-    style: styleControl(JsonSchemaFormStyle , 'style'),
-    animationStyle: styleControl(AnimationStyle , 'animationStyle'),
+    style: styleControl(JsonSchemaFormStyle, "style"),
+    animationStyle: styleControl(AnimationStyle, "animationStyle"),
+    errorSchema: jsonObjectControl({
+      __errors: ["Custom error message for the entire form"],
+      fieldName: {
+        __errors: ["Custom error for specific field"]
+      }
+    }),
   };
 
   return new UICompBuilder(childrenMap, (props) => {
     // rjsf 4.20 supports ui:submitButtonOptions, but if the button is customized, it will not take effect. Here we implement it ourselves
-    const buttonOptions = props?.uiSchema?.[
-      "ui:submitButtonOptions"
-    ] as UISchemaSubmitButtonOptions;
+    const buttonOptions = props?.uiSchema?.["ui:submitButtonOptions"] as UISchemaSubmitButtonOptions;
 
     const schema = props.schema;
 
@@ -236,100 +251,160 @@ let FormBasicComp = (function () {
           setContainerWidth(containerRef.current.offsetWidth);
         }
       };
-  
+
       const resizeObserver = new ResizeObserver(() => {
         updateWidth();
       });
-  
+
       if (containerRef.current) {
         resizeObserver.observe(containerRef.current);
       }
-  
+
       // Initial update
       updateWidth();
-  
+
       // Cleanup observer on unmount
       return () => {
         resizeObserver.disconnect();
       };
     }, []);
 
+    // Convert the error schema to the format RJSF expects
+    const getExtraErrors = () => {
+      if (!props.errorSchema || Object.keys(props.errorSchema).length === 0) {
+        return undefined;
+      }
+
+      const extraErrors: ErrorSchema = {};
+      
+      // Handle root level errors
+      if (props.errorSchema.__errors) {
+        extraErrors.__errors = Array.isArray(props.errorSchema.__errors) 
+          ? props.errorSchema.__errors.map(String)
+          : [String(props.errorSchema.__errors)];
+      }
+
+      // Handle field level errors
+      Object.entries(props.errorSchema).forEach(([key, value]) => {
+        if (key !== '__errors' && typeof value === 'object' && value !== null) {
+          extraErrors[key] = {
+            __errors: (value as any).__errors || []
+          };
+        }
+      });
+
+      return extraErrors;
+    };
+
     return (
       <ContainerWidthContext.Provider value={containerWidth}>
         <Container $style={props.style} $animationStyle={props.animationStyle} ref={containerRef}>
           <ScrollBar
-              style={{
-                height: props.autoHeight ? "auto" : "100%",
-                margin: "0px",
-                padding: "0px",
-              }}
-              overflow={"hidden"}
-              hideScrollbar={!props.showVerticalScrollbar}
-            >
-          <ErrorBoundary>
-            <Title level={2} style={{ marginBottom: '24px' }}>
-              {schema.title as string | number}
-            </Title>
-            <Form
-              validator={validator}
-              schema={props.schema}
-              uiSchema={props.uiSchema}
-              formData={convertData(props.schema, props.data.value)}
-              onSubmit={() => onSubmit(props)}
-              onChange={(e) => props.data.onChange(e.formData)}
-              transformErrors={(errors) => transformErrors(errors)}
-              templates={{
-                ObjectFieldTemplate: ObjectFieldTemplate,
-                ArrayFieldTemplate: ArrayFieldTemplate,
-              }}
-              liveValidate={true}
-              widgets={{ searchableSelect: SearchableSelectWidget }}
-              children={
-                <Button
-                  hidden={buttonOptions?.norender}
-                  disabled={buttonOptions?.props?.disabled}
-                  className={buttonOptions?.props?.className}
-                  type="primary"
-                  htmlType="submit"
-                  style={{ float: "right" }}
-                >
-                  {buttonOptions?.submitText ?? trans("event.submit")}
-                </Button>
-              }
-            />
-          </ErrorBoundary>
+            style={{
+              height: props.autoHeight ? "auto" : "100%",
+              margin: "0px",
+              padding: "0px",
+            }}
+            overflow={"hidden"}
+            hideScrollbar={!props.showVerticalScrollbar}
+          >
+            <ErrorBoundary>
+              {props.formType === "rjsf" ? (
+                <>
+                  <Title level={2} style={{ marginBottom: "24px", display: "flex", justifyContent: "center" }}>
+                    {schema.title as string | number}
+                  </Title>
+                  <Form
+                    validator={validator}
+                    schema={props.schema}
+                    uiSchema={props.uiSchema}
+                    formData={convertData(props.schema, props.data.value)}
+                    onSubmit={() => onSubmit(props)}
+                    onChange={(e) => props.data.onChange(e.formData)}
+                    transformErrors={(errors) => transformErrors(errors)}
+                    extraErrors={getExtraErrors()}
+                    liveValidate={false}
+                    showErrorList={false}
+                    templates={{
+                      ObjectFieldTemplate: ObjectFieldTemplate,
+                      ArrayFieldTemplate: ArrayFieldTemplate,
+                    }}
+                    widgets={{ searchableSelect: SearchableSelectWidget }}
+                    children={
+                      <Button
+                        hidden={buttonOptions?.norender}
+                        disabled={buttonOptions?.props?.disabled}
+                        className={buttonOptions?.props?.className}
+                        type="primary"
+                        htmlType="submit"
+                        style={{ float: "right" }}
+                      >
+                        {buttonOptions?.submitText ?? trans("event.submit")}
+                      </Button>
+                    }
+                  />
+                </>
+              ) : (
+                <JsonFormsRenderer
+                  schema={props.schema}
+                  data={props.data.value}
+                  onChange={(newData: any) => props.data.onChange(newData)}
+                  style={props.style}
+                  showVerticalScrollbar={props.showVerticalScrollbar}
+                  autoHeight={props.autoHeight}
+                  resetAfterSubmit={props.resetAfterSubmit}
+                  uiSchema={props.uiSchema as JsonFormsUiSchema}
+                  onSubmit={() => onSubmit(props)}
+                />
+              )}
+            </ErrorBoundary>
           </ScrollBar>
         </Container>
       </ContainerWidthContext.Provider>
-
     );
   })
     .setPropertyViewFn((children) => {
+      const formType = children.formType.getView();
       return (
         <>
-          {(useContext(EditorContext).editorModeStatus === "logic" || useContext(EditorContext).editorModeStatus === "both") && (
+          {(useContext(EditorContext).editorModeStatus === "logic" ||
+            useContext(EditorContext).editorModeStatus === "both") && (
             <Section name={sectionNames.basic}>
-              
+              {children.formType.propertyView({
+                radioButton: true,
+              })}
               {children.schema.propertyView({
                 key: trans("jsonSchemaForm.jsonSchema"),
                 label: (
                   <>
                     {trans("jsonSchemaForm.jsonSchema") + " ("}
-                    <a
-                      href={"http://json-schema.org/learn/getting-started-step-by-step"}
-                      target={"_blank"}
-                      rel="noreferrer"
-                    >
-                      Docs 1
-                    </a>
-                    {", "}
-                    <a
-                      href={"https://jsonforms.io/examples/basic"}
-                      target={"_blank"}
-                      rel="noreferrer"
-                    >
-                      Docs 2
-                    </a>
+                    {formType === "rjsf" ? (
+                      <>
+                        <a
+                          href={"https://rjsf-team.github.io/react-jsonschema-form/"}
+                          target={"_blank"}
+                          rel="noreferrer"
+                        >
+                          Doc 1
+                        </a>
+                        {", "}
+                        <a
+                          href={"https://rjsf-team.github.io/react-jsonschema-form/docs/"}
+                          target={"_blank"}
+                          rel="noreferrer"
+                        >
+                          Doc 2
+                        </a>
+                      </>
+                    ) : (
+                      <a
+                        href={"https://jsonforms.io/"}
+                        target={"_blank"}
+                        rel="noreferrer"
+                      >
+                        Documentation
+                      </a>
+                    )}
                     {")"}
                   </>
                 ),
@@ -337,11 +412,13 @@ let FormBasicComp = (function () {
                   <>
                     {trans("jsonSchemaForm.schemaTooltip") + " "}
                     <a
-                      href={"http://json-schema.org/learn/getting-started-step-by-step"}
+                      href={formType === "rjsf" 
+                        ? "http://json-schema.org/learn/getting-started-step-by-step"
+                        : "https://jsonforms.io/"}
                       target={"_blank"}
                       rel="noreferrer"
                     >
-                      JSON Schema
+                      {formType === "rjsf" ? "JSON Schema" : "JSONForms"}
                     </a>
                   </>
                 ),
@@ -351,21 +428,23 @@ let FormBasicComp = (function () {
                 label: (
                   <>
                     {trans("jsonSchemaForm.uiSchema") + " ("}
-                    <a
-                      href={"https://jsonforms.io/docs/uischema"}
-                      target={"_blank"}
-                      rel="noreferrer"
-                    >
-                      Docs 1
-                    </a>
-                    {", "}
-                    <a
-                      href={"https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/uiSchema"}
-                      target={"_blank"}
-                      rel="noreferrer"
-                    >
-                      Docs 2
-                    </a>
+                    {formType === "rjsf" ? (
+                      <a
+                        href={"https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/uiSchema/"}
+                        target={"_blank"}
+                        rel="noreferrer"
+                      >
+                        Documentation
+                      </a>
+                    ) : (
+                      <a
+                        href={"https://jsonforms.io/docs/uischema/"}
+                        target={"_blank"}
+                        rel="noreferrer"
+                      >
+                        Documentation
+                      </a>
+                    )}
                     {")"}
                   </> 
                 ),
@@ -373,13 +452,13 @@ let FormBasicComp = (function () {
                   <>
                     {trans("jsonSchemaForm.schemaTooltip") + " "}
                     <a
-                      href={
-                        "https://jsonforms.io/docs/uischema"
-                      }
+                      href={formType === "rjsf"
+                        ? "https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/uiSchema/"
+                        : "https://jsonforms.io/"}
                       target={"_blank"}
                       rel="noreferrer"
                     >
-                      UI Schema
+                      {formType === "rjsf" ? "UI Schema" : "JSONForms"}
                     </a>
                   </>
                 ),
@@ -388,6 +467,11 @@ let FormBasicComp = (function () {
                 key: trans("jsonSchemaForm.defaultData"),
                 label: trans("jsonSchemaForm.defaultData"),
               })}
+              {children.formType.getView() === "rjsf" && children.errorSchema.propertyView({
+                key: "errorSchema",
+                label: trans("jsonSchemaForm.errorSchema"),
+                tooltip: "Define custom error messages for form fields. Use __errors array for field-specific errors.",
+              })}
             </Section>
           )}
 
@@ -403,13 +487,12 @@ let FormBasicComp = (function () {
           )}
           {(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
             <>
-             <Section name={sectionNames.layout}>
-              {children.autoHeight.getPropertyView()}
-              {!children.autoHeight.getView() && (
+              <Section name={sectionNames.layout}>
+                {children.autoHeight.getPropertyView()}
+                {!children.autoHeight.getView() &&
                   children.showVerticalScrollbar.propertyView({
                     label: trans("prop.showVerticalScrollbar"),
-                  })
-                )}
+                  })}
               </Section>
               <Section name={sectionNames.style}>
                 {children.style.getPropertyView()}
@@ -419,7 +502,6 @@ let FormBasicComp = (function () {
               </Section>
             </>
           )}
-
         </>
       );
     })
@@ -432,7 +514,6 @@ FormBasicComp = class extends FormBasicComp {
   }
 };
 
-
 let FormTmpComp = withExposingConfigs(FormBasicComp, [
   depsConfig({
     name: "data",
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
index 9a7abb8bd1..d94f1741f9 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
@@ -19,12 +19,10 @@ import { AnimationStyle, CheckboxStyle, CheckboxStyleType, InputFieldStyle, Labe
 import { RadioLayoutOptions, RadioPropertyView } from "./radioCompConstants";
 import { dropdownControl } from "../../controls/dropdownControl";
 import { ValueFromOption, lightenColor } from "lowcoder-design";
-import { EllipsisTextCss } from "lowcoder-design";
 import { trans } from "i18n";
 import { RefControl } from "comps/controls/refControl";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
-import Tooltip from "antd/es/tooltip";
 import { useCallback, useRef, useEffect, memo } from "react";
 
 export const getStyle = (style: CheckboxStyleType) => {
@@ -34,7 +32,10 @@ export const getStyle = (style: CheckboxStyleType) => {
       max-width: calc(100% - 8px);
 
       span:not(.ant-checkbox) {
-        ${EllipsisTextCss};
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+      }
       }
 
       .ant-checkbox .ant-checkbox-checked > .ant-checkbox-inner {
@@ -79,8 +80,6 @@ export const getStyle = (style: CheckboxStyleType) => {
         ${style.hoverBackground && `border-color: ${style.hoverBackground}`};
       }
 
-      
-
       &:hover .ant-checkbox-inner,
       .ant-checkbox:hover .ant-checkbox-inner,
       .ant-checkbox-input:focus + .ant-checkbox-inner {
@@ -94,8 +93,6 @@ export const getStyle = (style: CheckboxStyleType) => {
       }
     }
 
-    
-
     .ant-checkbox-group-item {
       font-family:${style.fontFamily};
       font-size:${style.textSize};
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
index 28d5d6f3db..ca662a06bd 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
@@ -9,22 +9,22 @@ import {
   SelectInputInvalidConfig,
   useSelectInputValidate,
 } from "./selectInputConstants";
-import { EllipsisTextCss, ValueFromOption } from "lowcoder-design";
+import { ValueFromOption } from "lowcoder-design";
 import { trans } from "i18n";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 import { migrateOldData } from "comps/generators/simpleGenerators";
-import Tooltip from "antd/es/tooltip";
 import { useCallback, useRef, useEffect, memo } from "react";
 
 const getStyle = (style: RadioStyleType, inputFieldStyle?:RadioStyleType ) => {
   return css`
     .ant-radio-wrapper:not(.ant-radio-wrapper-disabled) {
       color: ${inputFieldStyle?.staticText};
-      // height: 22px;
       max-width: calc(100% - 8px);
       padding: ${inputFieldStyle?.padding};
       span:not(.ant-radio) {
-        ${EllipsisTextCss};
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
         font-family:${inputFieldStyle?.fontFamily};
         font-size:${inputFieldStyle?.textSize};
         font-weight:${inputFieldStyle?.textWeight};
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx
index e8fcd9a4b2..03269ae37a 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx
@@ -11,7 +11,7 @@ import { markdownCompCss, TacoMarkDown } from "lowcoder-design";
 import styled from "styled-components";
 
 const Wrapper = styled.div`
-  ${markdownCompCss};
+  ${markdownCompCss as any};
   max-height: 32px;
 
   > .markdown-body {
diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
index 93b3d79ae0..1c7fcf8f3c 100644
--- a/client/packages/lowcoder/src/comps/comps/textComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -14,10 +14,8 @@ import { AnimationStyle, AnimationStyleType, TextStyle, TextStyleType, heightCal
 import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { alignWithJustifyControl } from "comps/controls/alignControl";
-
 import { MarginControl } from "../controls/marginControl";
 import { PaddingControl } from "../controls/paddingControl";
-
 import React, { useContext, useEffect, useRef, useMemo } from "react";
 import { EditorContext } from "comps/editorState";
 import { clickEvent, eventHandlerControl } from "../controls/eventHandlerControl";
@@ -102,7 +100,7 @@ const TextContainer = React.memo(styled.div<{
   `};
   ${(props) => props.$styleConfig && getStyle(props.$styleConfig)}
   display: flex;
-  ${markdownCompCss};
+  ${markdownCompCss as any};
   overflow-wrap: anywhere;
   .markdown-body {
     overflow-wrap: anywhere;
diff --git a/client/packages/lowcoder/src/comps/controls/multiSelectControl.tsx b/client/packages/lowcoder/src/comps/controls/multiSelectControl.tsx
index 64ca4cf9f9..85226f57ed 100644
--- a/client/packages/lowcoder/src/comps/controls/multiSelectControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/multiSelectControl.tsx
@@ -10,11 +10,14 @@ import _ from "lodash";
 
 const LabelWrapper = styled.div<{ $placement: ControlPlacement }>`
   flex-shrink: 0;
-  width: ${(props) => (props.$placement === "right" ? "96px" : "bottom" ? "112px" : "136px")};
+  width: ${(props) =>
+    props.$placement === "right" ? "96px" : props.$placement === "bottom" ? "112px" : "136px"};
 `;
 
 const DropDownItemLabel = styled.div`
-  ${EllipsisTextCss};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   width: 100%;
   font-size: 13px;
   line-height: 15px;
diff --git a/client/packages/lowcoder/src/comps/queries/esQuery.tsx b/client/packages/lowcoder/src/comps/queries/esQuery.tsx
index 902332bbdb..50494b7eb1 100644
--- a/client/packages/lowcoder/src/comps/queries/esQuery.tsx
+++ b/client/packages/lowcoder/src/comps/queries/esQuery.tsx
@@ -10,7 +10,6 @@ import {
 } from "lowcoder-core";
 import {
   Dropdown,
-  EllipsisTextCss,
   QueryConfigItemWrapper,
   QueryConfigLabel,
   QueryConfigWrapper,
@@ -115,7 +114,9 @@ const ReadOnlyField = styled.div`
   height: 32px;
   line-height: 32px;
   width: 100%;
-  ${EllipsisTextCss};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 const InputField = styled.div`
   flex-grow: 1;
@@ -256,7 +257,7 @@ const EsQueryPropertyView = (props: {
               children.path.propertyView({})
             ) : (
               <ReadOnlyField>
-                <>{children.path.toJsonValue()}</>
+                {JSON.stringify(children.path.toJsonValue())}
               </ReadOnlyField>
             )}
           </InputField>
diff --git a/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx b/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx
index 7386db7e87..c2cea6fcd4 100644
--- a/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx
+++ b/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx
@@ -4,7 +4,7 @@ import { useSelector } from "react-redux";
 import React, { useContext, useMemo, useState } from "react";
 import { DataSourceTypeInfo } from "api/datasourceApi";
 import styled from "styled-components";
-import { CustomSelect, EllipsisTextCss } from "lowcoder-design";
+import { CustomSelect  } from "lowcoder-design";
 import { DatasourceModal } from "pages/datasource/datasourceModal";
 import { InputStatus } from "antd/es/_util/statusUtils";
 import { getDataSource, getDataSourceTypes } from "redux/selectors/datasourceSelectors";
@@ -30,7 +30,9 @@ const SelectOptionLabel = styled.div`
   font-size: 13px;
   display: inline-block;
   flex-grow: 1;
-  ${EllipsisTextCss};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 const SelectOptionContains = styled.div`
   display: flex;
diff --git a/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx b/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx
index 0e6a228d39..29af297422 100644
--- a/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx
+++ b/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx
@@ -18,7 +18,6 @@ import React, {
 } from "react";
 import { ResizePayload, useResizeDetector } from "react-resize-detector";
 import styled, { css } from "styled-components";
-import { EllipsisTextCss } from "lowcoder-design";
 import { draggingUtils } from "./draggingUtils";
 import type { ResizeHandleAxis } from "./gridLayoutPropTypes";
 import { isEqual } from "lodash";
@@ -57,7 +56,9 @@ const NameDiv = styled.div<{
 `;
 const NameLabel = styled.span`
   max-width: 208px;
-  ${EllipsisTextCss};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
 export const GRID_ITEM_BORDER_WIDTH = 1.5;
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/components/CreateApiKeyModal.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/components/CreateApiKeyModal.tsx
index ebe83b3cca..4e0b23f61a 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/components/CreateApiKeyModal.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/components/CreateApiKeyModal.tsx
@@ -38,7 +38,7 @@ const FormStyled = styled(Form)`
     font-size: 13px;
     line-height: 19px;
     .has-tip {
-      ${UnderlineCss};
+      ${UnderlineCss as any};
     }
   }
 
diff --git a/client/packages/lowcoder/src/pages/common/previewHeader.tsx b/client/packages/lowcoder/src/pages/common/previewHeader.tsx
index bf73cd9803..523817da8f 100644
--- a/client/packages/lowcoder/src/pages/common/previewHeader.tsx
+++ b/client/packages/lowcoder/src/pages/common/previewHeader.tsx
@@ -3,7 +3,7 @@ import Header from "components/layout/Header";
 import { SHARE_TITLE } from "constants/apiConstants";
 import { ALL_APPLICATIONS_URL, APPLICATION_VIEW_URL, AUTH_LOGIN_URL } from "constants/routesURL";
 import { User } from "constants/userConstants";
-import { EllipsisTextCss, isDarkColor, TacoButton, TextEditIcon } from "lowcoder-design";
+import { isDarkColor, TacoButton, TextEditIcon } from "lowcoder-design";
 import { useSelector } from "react-redux";
 import { currentApplication, getTemplateId, isPublicApplication } from "redux/selectors/applicationSelector";
 import { getUser, isFetchingUser } from "redux/selectors/usersSelectors";
@@ -38,7 +38,9 @@ const HeaderFont = styled.div<{ $bgColor: string }>`
   margin-right: 8px;
   margin-left: 20px;
   max-width: 264px;
-  ${EllipsisTextCss};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
 const StyledLink = styled.a`
diff --git a/client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx b/client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx
index 84bdade673..132184ac57 100644
--- a/client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx
+++ b/client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx
@@ -4,7 +4,6 @@ import {
   BluePlusIcon,
   CustomModal,
   EditPopover,
-  EllipsisTextCss,
   PointIcon,
   ScrollBar,
   Search,
@@ -124,7 +123,9 @@ const QueryType = styled.div`
   font-size: 13px;
 `;
 const QueryName = styled.div`
-  ${EllipsisTextCss};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-weight: 500;
   font-size: 13px;
 `;
diff --git a/client/packages/lowcoder/src/pages/setting/idSource/styledComponents.tsx b/client/packages/lowcoder/src/pages/setting/idSource/styledComponents.tsx
index 6562be83f7..bf9e3f3381 100644
--- a/client/packages/lowcoder/src/pages/setting/idSource/styledComponents.tsx
+++ b/client/packages/lowcoder/src/pages/setting/idSource/styledComponents.tsx
@@ -1,8 +1,8 @@
 import styled, { css } from "styled-components";
 import { Table } from "components/Table";
 import { default as Button } from "antd/es/button";
-import { default as Checkbox} from "antd/es/checkbox";
-import { default as Form, FormInstance } from "antd/es/form";
+import { default as Checkbox } from "antd/es/checkbox";
+import { default as Form, FormProps } from "antd/es/form";
 import { UnderlineCss } from "lowcoder-design";
 import Steps from "antd/es/steps";
 
@@ -153,7 +153,7 @@ export const SaveButton = styled(Button)`
   }
 `;
 
-export const FormStyled = styled(Form)`
+export const FormStyled = styled(Form)<FormProps>`
   .ant-form-item-control-input-content > input,
   .ant-input-password {
     &:hover {
@@ -170,7 +170,10 @@ export const FormStyled = styled(Form)`
     font-size: 13px;
     line-height: 19px;
     .has-tip {
-      ${UnderlineCss};
+      text-decoration: underline;
+      text-decoration-style: dotted;
+      text-underline-offset: 4px;
+      cursor: help;
     }
   }
 
diff --git a/client/yarn.lock b/client/yarn.lock
index 96e83f99cb..4aea0fc1f3 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -55,7 +55,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ant-design/colors@npm:^7.0.0, @ant-design/colors@npm:^7.2.0":
+"@ant-design/colors@npm:^7.0.0, @ant-design/colors@npm:^7.2.0, @ant-design/colors@npm:^7.2.1":
   version: 7.2.1
   resolution: "@ant-design/colors@npm:7.2.1"
   dependencies:
@@ -288,7 +288,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.22.5, @babel/helper-module-imports@npm:^7.27.1":
+"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.22.5, @babel/helper-module-imports@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/helper-module-imports@npm:7.27.1"
   dependencies:
@@ -1861,6 +1861,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@date-io/core@npm:^3.2.0":
+  version: 3.2.0
+  resolution: "@date-io/core@npm:3.2.0"
+  checksum: 711e43b449bc29f5f1aaf49e34e722a9fe42238b1ee20e81e3a11692118002872d915c2a289f1ed24e53f88bd220ce3888d7ec0a1705c131e305478f534a3450
+  languageName: node
+  linkType: hard
+
+"@date-io/dayjs@npm:^3.0.0":
+  version: 3.2.0
+  resolution: "@date-io/dayjs@npm:3.2.0"
+  dependencies:
+    "@date-io/core": ^3.2.0
+  peerDependencies:
+    dayjs: ^1.8.17
+  peerDependenciesMeta:
+    dayjs:
+      optional: true
+  checksum: e0ad20dce42cfb600c907e4deb2861439377b1b490501362b76e20928ff98ee7ed29c4470d2425b399886ffedca556ea4669838c546fa05270a807fa4f74ba30
+  languageName: node
+  linkType: hard
+
 "@discoveryjs/json-ext@npm:0.5.7, @discoveryjs/json-ext@npm:^0.5.0":
   version: 0.5.7
   resolution: "@discoveryjs/json-ext@npm:0.5.7"
@@ -1930,6 +1951,38 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/babel-plugin@npm:^11.13.5":
+  version: 11.13.5
+  resolution: "@emotion/babel-plugin@npm:11.13.5"
+  dependencies:
+    "@babel/helper-module-imports": ^7.16.7
+    "@babel/runtime": ^7.18.3
+    "@emotion/hash": ^0.9.2
+    "@emotion/memoize": ^0.9.0
+    "@emotion/serialize": ^1.3.3
+    babel-plugin-macros: ^3.1.0
+    convert-source-map: ^1.5.0
+    escape-string-regexp: ^4.0.0
+    find-root: ^1.1.0
+    source-map: ^0.5.7
+    stylis: 4.2.0
+  checksum: c41df7e6c19520e76d1939f884be878bf88b5ba00bd3de9d05c5b6c5baa5051686ab124d7317a0645de1b017b574d8139ae1d6390ec267fbe8e85a5252afb542
+  languageName: node
+  linkType: hard
+
+"@emotion/cache@npm:^11.14.0":
+  version: 11.14.0
+  resolution: "@emotion/cache@npm:11.14.0"
+  dependencies:
+    "@emotion/memoize": ^0.9.0
+    "@emotion/sheet": ^1.4.0
+    "@emotion/utils": ^1.4.2
+    "@emotion/weak-memoize": ^0.4.0
+    stylis: 4.2.0
+  checksum: 0a81591541ea43bc7851742e6444b7800d72e98006f94e775ae6ea0806662d14e0a86ff940f5f19d33b4bb2c427c882aa65d417e7322a6e0d5f20fe65ed920c9
+  languageName: node
+  linkType: hard
+
 "@emotion/hash@npm:^0.8.0":
   version: 0.8.0
   resolution: "@emotion/hash@npm:0.8.0"
@@ -1937,6 +1990,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/hash@npm:^0.9.2":
+  version: 0.9.2
+  resolution: "@emotion/hash@npm:0.9.2"
+  checksum: 379bde2830ccb0328c2617ec009642321c0e009a46aa383dfbe75b679c6aea977ca698c832d225a893901f29d7b3eef0e38cf341f560f6b2b56f1ff23c172387
+  languageName: node
+  linkType: hard
+
 "@emotion/is-prop-valid@npm:1.2.2":
   version: 1.2.2
   resolution: "@emotion/is-prop-valid@npm:1.2.2"
@@ -1946,6 +2006,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/is-prop-valid@npm:^1.3.0":
+  version: 1.3.1
+  resolution: "@emotion/is-prop-valid@npm:1.3.1"
+  dependencies:
+    "@emotion/memoize": ^0.9.0
+  checksum: fe6549d54f389e1a17cb02d832af7ee85fb6ea126fc18d02ca47216e8ff19332c1983f4a0ba68602cfcd3b325ffd4ebf0b2d0c6270f1e7e6fe3fca4ba7741e1a
+  languageName: node
+  linkType: hard
+
 "@emotion/memoize@npm:^0.8.1":
   version: 0.8.1
   resolution: "@emotion/memoize@npm:0.8.1"
@@ -1953,6 +2022,74 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/memoize@npm:^0.9.0":
+  version: 0.9.0
+  resolution: "@emotion/memoize@npm:0.9.0"
+  checksum: 038132359397348e378c593a773b1148cd0cf0a2285ffd067a0f63447b945f5278860d9de718f906a74c7c940ba1783ac2ca18f1c06a307b01cc0e3944e783b1
+  languageName: node
+  linkType: hard
+
+"@emotion/react@npm:^11.14.0":
+  version: 11.14.0
+  resolution: "@emotion/react@npm:11.14.0"
+  dependencies:
+    "@babel/runtime": ^7.18.3
+    "@emotion/babel-plugin": ^11.13.5
+    "@emotion/cache": ^11.14.0
+    "@emotion/serialize": ^1.3.3
+    "@emotion/use-insertion-effect-with-fallbacks": ^1.2.0
+    "@emotion/utils": ^1.4.2
+    "@emotion/weak-memoize": ^0.4.0
+    hoist-non-react-statics: ^3.3.1
+  peerDependencies:
+    react: ">=16.8.0"
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 3cf023b11d132b56168713764d6fced8e5a1f0687dfe0caa2782dfd428c8f9e30f9826a919965a311d87b523cd196722aaf75919cd0f6bd0fd57f8a6a0281500
+  languageName: node
+  linkType: hard
+
+"@emotion/serialize@npm:^1.3.3":
+  version: 1.3.3
+  resolution: "@emotion/serialize@npm:1.3.3"
+  dependencies:
+    "@emotion/hash": ^0.9.2
+    "@emotion/memoize": ^0.9.0
+    "@emotion/unitless": ^0.10.0
+    "@emotion/utils": ^1.4.2
+    csstype: ^3.0.2
+  checksum: 510331233767ae4e09e925287ca2c7269b320fa1d737ea86db5b3c861a734483ea832394c0c1fe5b21468fe335624a75e72818831d303ba38125f54f44ba02e7
+  languageName: node
+  linkType: hard
+
+"@emotion/sheet@npm:^1.4.0":
+  version: 1.4.0
+  resolution: "@emotion/sheet@npm:1.4.0"
+  checksum: eeb1212e3289db8e083e72e7e401cd6d1a84deece87e9ce184f7b96b9b5dbd6f070a89057255a6ff14d9865c3ce31f27c39248a053e4cdd875540359042586b4
+  languageName: node
+  linkType: hard
+
+"@emotion/styled@npm:^11.14.0":
+  version: 11.14.0
+  resolution: "@emotion/styled@npm:11.14.0"
+  dependencies:
+    "@babel/runtime": ^7.18.3
+    "@emotion/babel-plugin": ^11.13.5
+    "@emotion/is-prop-valid": ^1.3.0
+    "@emotion/serialize": ^1.3.3
+    "@emotion/use-insertion-effect-with-fallbacks": ^1.2.0
+    "@emotion/utils": ^1.4.2
+  peerDependencies:
+    "@emotion/react": ^11.0.0-rc.0
+    react: ">=16.8.0"
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+  checksum: 9c1b842e942e69fb6037d1ab161046d2bcfeff95fd2ccfdab30acaaf6b89dc07b14bb00f8cc8ec14df11e6746c8e4e1d781bc54d10bd739aab44966ded64d4fb
+  languageName: node
+  linkType: hard
+
 "@emotion/unitless@npm:0.8.1":
   version: 0.8.1
   resolution: "@emotion/unitless@npm:0.8.1"
@@ -1960,6 +2097,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/unitless@npm:^0.10.0":
+  version: 0.10.0
+  resolution: "@emotion/unitless@npm:0.10.0"
+  checksum: d79346df31a933e6d33518e92636afeb603ce043f3857d0a39a2ac78a09ef0be8bedff40130930cb25df1beeee12d96ee38613963886fa377c681a89970b787c
+  languageName: node
+  linkType: hard
+
 "@emotion/unitless@npm:^0.7.5":
   version: 0.7.5
   resolution: "@emotion/unitless@npm:0.7.5"
@@ -1967,6 +2111,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/use-insertion-effect-with-fallbacks@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.2.0"
+  peerDependencies:
+    react: ">=16.8.0"
+  checksum: 8ff6aec7f2924526ff8c8f8f93d4b8236376e2e12c435314a18c9a373016e24dfdf984e82bbc83712b8e90ff4783cd765eb39fc7050d1a43245e5728740ddd71
+  languageName: node
+  linkType: hard
+
+"@emotion/utils@npm:^1.4.2":
+  version: 1.4.2
+  resolution: "@emotion/utils@npm:1.4.2"
+  checksum: 04cf76849c6401205c058b82689fd0ec5bf501aed6974880fe9681a1d61543efb97e848f4c38664ac4a9068c7ad2d1cb84f73bde6cf95f1208aa3c28e0190321
+  languageName: node
+  linkType: hard
+
+"@emotion/weak-memoize@npm:^0.4.0":
+  version: 0.4.0
+  resolution: "@emotion/weak-memoize@npm:0.4.0"
+  checksum: db5da0e89bd752c78b6bd65a1e56231f0abebe2f71c0bd8fc47dff96408f7065b02e214080f99924f6a3bfe7ee15afc48dad999d76df86b39b16e513f7a94f52
+  languageName: node
+  linkType: hard
+
 "@esbuild/android-arm64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/android-arm64@npm:0.18.20"
@@ -2856,6 +3023,50 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jsonforms/core@npm:3.5.1":
+  version: 3.5.1
+  resolution: "@jsonforms/core@npm:3.5.1"
+  dependencies:
+    "@types/json-schema": ^7.0.3
+    ajv: ^8.6.1
+    ajv-formats: ^2.1.0
+    lodash: ^4.17.21
+  checksum: d1fcc52ec34cc1f60bb8b53ea029f72b0951f9587f3f790f5f3f53f657cc3c5c52b136506c960b344dcced6ee0f7620c8ce444581385a5232fdd0926afaaaa77
+  languageName: node
+  linkType: hard
+
+"@jsonforms/material-renderers@npm:^3.5.1":
+  version: 3.5.1
+  resolution: "@jsonforms/material-renderers@npm:3.5.1"
+  dependencies:
+    "@date-io/dayjs": ^3.0.0
+    dayjs: 1.10.7
+    lodash: ^4.17.21
+  peerDependencies:
+    "@emotion/react": ^11.4.1
+    "@emotion/styled": ^11.3.0
+    "@jsonforms/core": 3.5.1
+    "@jsonforms/react": 3.5.1
+    "@mui/icons-material": ^5.11.16 || ^6.0.0
+    "@mui/material": ^5.13.0 || ^6.0.0
+    "@mui/x-date-pickers": ^6.0.0 || ^7.0.0
+    react: ^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: 93b15185bc0fa602f0123a523354ab694e7888910410944dcc087b1ba23b9b0d47ad620797f927c575ab266017917e2795db77d61af5fa3d2102bbeb3662db34
+  languageName: node
+  linkType: hard
+
+"@jsonforms/react@npm:3.5.1":
+  version: 3.5.1
+  resolution: "@jsonforms/react@npm:3.5.1"
+  dependencies:
+    lodash: ^4.17.21
+  peerDependencies:
+    "@jsonforms/core": 3.5.1
+    react: ^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+  checksum: f38e35e53363c3f2c2fc13e846cc104c6df05fe1105e8553e461fdc2550bb2bd9d2710af24b102c2b6b025d7fccb8d62d6fdf1876ea8efc1cece0a5fa97b5346
+  languageName: node
+  linkType: hard
+
 "@jsonjoy.com/base64@npm:^1.1.1":
   version: 1.1.2
   resolution: "@jsonjoy.com/base64@npm:1.1.2"
@@ -3408,6 +3619,25 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rjsf/antd@npm:^6.0.0-beta.10":
+  version: 6.0.0-beta.10
+  resolution: "@rjsf/antd@npm:6.0.0-beta.10"
+  dependencies:
+    classnames: ^2.5.1
+    lodash: ^4.17.21
+    lodash-es: ^4.17.21
+    rc-picker: 2.7.6
+  peerDependencies:
+    "@ant-design/icons": ^5.0.0
+    "@rjsf/core": ^6.0.0-beta
+    "@rjsf/utils": ^6.0.0-beta
+    antd: ^5.8.5
+    dayjs: ^1.8.0
+    react: ">=18"
+  checksum: f49f8260575b132091ba90093a2405e07bd2cc9036e5b8d6f8d40d153de2d60f8c36689d4b055964fd59e64cb97cc5fc5016e6cb4304169687b2c9d3953aedda
+  languageName: node
+  linkType: hard
+
 "@rjsf/core@npm:^5.24.9":
   version: 5.24.10
   resolution: "@rjsf/core@npm:5.24.10"
@@ -3424,6 +3654,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rjsf/core@npm:^6.0.0-beta.10":
+  version: 6.0.0-beta.10
+  resolution: "@rjsf/core@npm:6.0.0-beta.10"
+  dependencies:
+    lodash: ^4.17.21
+    lodash-es: ^4.17.21
+    markdown-to-jsx: ^7.7.6
+    nanoid: ^5.1.5
+    prop-types: ^15.8.1
+  peerDependencies:
+    "@rjsf/utils": ^6.0.0-beta
+    react: ">=18"
+  checksum: 67e02a371c08a53f208d6d8edc91bf5649e86a45d3032992a32d855c710ec17d1b6c65aae543c6831c4a08d87506d8fa85c057a19ce73b9c35361803276e7476
+  languageName: node
+  linkType: hard
+
 "@rjsf/utils@npm:^5.24.9":
   version: 5.24.10
   resolution: "@rjsf/utils@npm:5.24.10"
@@ -3439,6 +3685,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rjsf/utils@npm:^6.0.0-beta.10":
+  version: 6.0.0-beta.10
+  resolution: "@rjsf/utils@npm:6.0.0-beta.10"
+  dependencies:
+    fast-uri: ^3.0.6
+    json-schema-merge-allof: ^0.8.1
+    jsonpointer: ^5.0.1
+    lodash: ^4.17.21
+    lodash-es: ^4.17.21
+    nanoid: ^5.1.5
+    react-is: ^18.2.0
+  peerDependencies:
+    react: ">=18"
+  checksum: 3a23b3e4a2909bdaec239de12ac02edf2acd3d4c8906f634774bc0560d5021d42c479e613f89d6a4d0d315beb1a2623c1e21101433051b8b362ae2f2ae419c1e
+  languageName: node
+  linkType: hard
+
 "@rjsf/validator-ajv8@npm:^5.24.9":
   version: 5.24.10
   resolution: "@rjsf/validator-ajv8@npm:5.24.10"
@@ -3453,6 +3716,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@rjsf/validator-ajv8@npm:^6.0.0-beta.10":
+  version: 6.0.0-beta.10
+  resolution: "@rjsf/validator-ajv8@npm:6.0.0-beta.10"
+  dependencies:
+    ajv: ^8.12.0
+    ajv-formats: ^2.1.1
+    lodash: ^4.17.21
+    lodash-es: ^4.17.21
+  peerDependencies:
+    "@rjsf/utils": ^6.0.0-beta
+  checksum: c61be5e9a055729326f230d758da44a6754aa8e8e4d294e13c252139bd241ad4a07d7c276a33d43e11321049a1d14d0f424bc61434345d0473f5c206b3658f95
+  languageName: node
+  linkType: hard
+
 "@rollup/plugin-commonjs@npm:^22.0.2":
   version: 22.0.2
   resolution: "@rollup/plugin-commonjs@npm:22.0.2"
@@ -4729,7 +5006,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/json-schema@npm:*, @types/json-schema@npm:^7.0.15, @types/json-schema@npm:^7.0.8, @types/json-schema@npm:^7.0.9":
+"@types/json-schema@npm:*, @types/json-schema@npm:^7.0.15, @types/json-schema@npm:^7.0.3, @types/json-schema@npm:^7.0.8, @types/json-schema@npm:^7.0.9":
   version: 7.0.15
   resolution: "@types/json-schema@npm:7.0.15"
   checksum: 97ed0cb44d4070aecea772b7b2e2ed971e10c81ec87dd4ecc160322ffa55ff330dace1793489540e3e318d90942064bb697cc0f8989391797792d919737b3b98
@@ -5823,7 +6100,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv-formats@npm:^2.1.1":
+"ajv-formats@npm:^2.1.0, ajv-formats@npm:^2.1.1":
   version: 2.1.1
   resolution: "ajv-formats@npm:2.1.1"
   dependencies:
@@ -5869,7 +6146,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv@npm:^8.0.0, ajv@npm:^8.12.0, ajv@npm:^8.9.0":
+"ajv@npm:^8.0.0, ajv@npm:^8.12.0, ajv@npm:^8.6.1, ajv@npm:^8.9.0":
   version: 8.17.1
   resolution: "ajv@npm:8.17.1"
   dependencies:
@@ -6069,6 +6346,66 @@ __metadata:
   languageName: node
   linkType: hard
 
+"antd@npm:^5.25.3":
+  version: 5.25.3
+  resolution: "antd@npm:5.25.3"
+  dependencies:
+    "@ant-design/colors": ^7.2.1
+    "@ant-design/cssinjs": ^1.23.0
+    "@ant-design/cssinjs-utils": ^1.1.3
+    "@ant-design/fast-color": ^2.0.6
+    "@ant-design/icons": ^5.6.1
+    "@ant-design/react-slick": ~1.1.2
+    "@babel/runtime": ^7.26.0
+    "@rc-component/color-picker": ~2.0.1
+    "@rc-component/mutate-observer": ^1.1.0
+    "@rc-component/qrcode": ~1.0.0
+    "@rc-component/tour": ~1.15.1
+    "@rc-component/trigger": ^2.2.6
+    classnames: ^2.5.1
+    copy-to-clipboard: ^3.3.3
+    dayjs: ^1.11.11
+    rc-cascader: ~3.34.0
+    rc-checkbox: ~3.5.0
+    rc-collapse: ~3.9.0
+    rc-dialog: ~9.6.0
+    rc-drawer: ~7.2.0
+    rc-dropdown: ~4.2.1
+    rc-field-form: ~2.7.0
+    rc-image: ~7.12.0
+    rc-input: ~1.8.0
+    rc-input-number: ~9.5.0
+    rc-mentions: ~2.20.0
+    rc-menu: ~9.16.1
+    rc-motion: ^2.9.5
+    rc-notification: ~5.6.4
+    rc-pagination: ~5.1.0
+    rc-picker: ~4.11.3
+    rc-progress: ~4.0.0
+    rc-rate: ~2.13.1
+    rc-resize-observer: ^1.4.3
+    rc-segmented: ~2.7.0
+    rc-select: ~14.16.8
+    rc-slider: ~11.1.8
+    rc-steps: ~6.0.1
+    rc-switch: ~4.1.0
+    rc-table: ~7.50.5
+    rc-tabs: ~15.6.1
+    rc-textarea: ~1.10.0
+    rc-tooltip: ~6.4.0
+    rc-tree: ~5.13.1
+    rc-tree-select: ~5.27.0
+    rc-upload: ~4.9.0
+    rc-util: ^5.44.4
+    scroll-into-view-if-needed: ^3.1.0
+    throttle-debounce: ^5.0.2
+  peerDependencies:
+    react: ">=16.9.0"
+    react-dom: ">=16.9.0"
+  checksum: 78a3ea9d76b877fd59ed27ba8b162dc965e86218b5fbd44b402efd9921567e546e34c004477ed5629b02166fe8c96bfb69d8aa86e256cfa97e08d853541608e7
+  languageName: node
+  linkType: hard
+
 "any-promise@npm:^1.0.0":
   version: 1.3.0
   resolution: "any-promise@npm:1.3.0"
@@ -7610,6 +7947,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"convert-source-map@npm:^1.5.0":
+  version: 1.9.0
+  resolution: "convert-source-map@npm:1.9.0"
+  checksum: dc55a1f28ddd0e9485ef13565f8f756b342f9a46c4ae18b843fe3c30c675d058d6a4823eff86d472f187b176f0adf51ea7b69ea38be34be4a63cbbf91b0593c8
+  languageName: node
+  linkType: hard
+
 "convert-source-map@npm:^2.0.0":
   version: 2.0.0
   resolution: "convert-source-map@npm:2.0.0"
@@ -8567,7 +8911,14 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"dayjs@npm:1.x, dayjs@npm:^1.11.11, dayjs@npm:^1.11.7, dayjs@npm:^1.9.1":
+"dayjs@npm:1.10.7":
+  version: 1.10.7
+  resolution: "dayjs@npm:1.10.7"
+  checksum: a0a4ca95abaa03d0702161dc2c35d16121188e342f5052b9c61cdf784dab68af766f477c04f87f71c6af666fd4d13db9b9853b87265850d6093b7b04e1bb1cd7
+  languageName: node
+  linkType: hard
+
+"dayjs@npm:1.x, dayjs@npm:^1.11.11, dayjs@npm:^1.11.13, dayjs@npm:^1.11.7, dayjs@npm:^1.9.1":
   version: 1.11.13
   resolution: "dayjs@npm:1.11.13"
   checksum: f388db88a6aa93956c1f6121644e783391c7b738b73dbc54485578736565c8931bdfba4bb94e9b1535c6e509c97d5deb918bbe1ae6b34358d994de735055cca9
@@ -10272,7 +10623,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"fast-uri@npm:^3.0.1":
+"fast-uri@npm:^3.0.1, fast-uri@npm:^3.0.6":
   version: 3.0.6
   resolution: "fast-uri@npm:3.0.6"
   checksum: 7161ba2a7944778d679ba8e5f00d6a2bb479a2142df0982f541d67be6c979b17808f7edbb0ce78161c85035974bde3fa52b5137df31da46c0828cb629ba67c4e
@@ -10444,6 +10795,13 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
+"find-root@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "find-root@npm:1.1.0"
+  checksum: b2a59fe4b6c932eef36c45a048ae8f93c85640212ebe8363164814990ee20f154197505965f3f4f102efc33bfb1cbc26fd17c4a2fc739ebc51b886b137cbefaf
+  languageName: node
+  linkType: hard
+
 "find-up@npm:^4.0.0, find-up@npm:^4.1.0":
   version: 4.1.0
   resolution: "find-up@npm:4.1.0"
@@ -11308,7 +11666,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2":
+"hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1, hoist-non-react-statics@npm:^3.3.2":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
   dependencies:
@@ -13949,8 +14307,17 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   dependencies:
     "@babel/preset-env": ^7.20.2
     "@babel/preset-typescript": ^7.18.6
+    "@emotion/react": ^11.14.0
+    "@emotion/styled": ^11.14.0
+    "@jsonforms/core": 3.5.1
+    "@jsonforms/material-renderers": ^3.5.1
+    "@jsonforms/react": 3.5.1
     "@lottiefiles/react-lottie-player": ^3.5.3
     "@remixicon/react": ^4.1.1
+    "@rjsf/antd": ^6.0.0-beta.10
+    "@rjsf/core": ^6.0.0-beta.10
+    "@rjsf/utils": ^6.0.0-beta.10
+    "@rjsf/validator-ajv8": ^6.0.0-beta.10
     "@rollup/plugin-typescript": ^12.1.0
     "@supabase/supabase-js": ^2.45.4
     "@testing-library/jest-dom": ^5.16.5
@@ -13972,11 +14339,13 @@ coolshapes-react@lowcoder-org/coolshapes-react:
     "@types/ua-parser-js": ^0.7.36
     "@welldone-software/why-did-you-render": ^6.2.3
     add: ^2.0.6
+    antd: ^5.25.3
     antd-mobile: ^5.34.0
     babel-jest: ^29.3.0
     babel-preset-react-app: ^10.0.1
     babel-preset-vite: ^1.1.3
     chalk: 4
+    dayjs: ^1.11.13
     flag-icons: ^7.2.1
     husky: ^8.0.1
     jest: ^29.5.0
@@ -13995,6 +14364,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
     rollup: ^4.22.5
     shelljs: ^0.8.5
     simplebar: ^6.2.5
+    styled-components: ^6.1.18
     svgo: ^3.0.0
     ts-node: ^10.4.0
     tui-image-editor: ^3.15.3
@@ -14374,7 +14744,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"markdown-to-jsx@npm:^7.4.1":
+"markdown-to-jsx@npm:^7.4.1, markdown-to-jsx@npm:^7.7.6":
   version: 7.7.6
   resolution: "markdown-to-jsx@npm:7.7.6"
   peerDependencies:
@@ -15670,6 +16040,15 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
+"nanoid@npm:^5.1.5":
+  version: 5.1.5
+  resolution: "nanoid@npm:5.1.5"
+  bin:
+    nanoid: bin/nanoid.js
+  checksum: 6de2d006b51c983be385ef7ee285f7f2a57bd96f8c0ca881c4111461644bd81fafc2544f8e07cb834ca0f3e0f3f676c1fe78052183f008b0809efe6e273119f5
+  languageName: node
+  linkType: hard
+
 "natural-compare-lite@npm:^1.4.0":
   version: 1.4.0
   resolution: "natural-compare-lite@npm:1.4.0"
@@ -19746,6 +20125,13 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
+"source-map@npm:^0.5.7":
+  version: 0.5.7
+  resolution: "source-map@npm:0.5.7"
+  checksum: 5dc2043b93d2f194142c7f38f74a24670cd7a0063acdaf4bf01d2964b402257ae843c2a8fa822ad5b71013b5fcafa55af7421383da919752f22ff488bc553f4d
+  languageName: node
+  linkType: hard
+
 "source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.0, source-map@npm:~0.6.1":
   version: 0.6.1
   resolution: "source-map@npm:0.6.1"
@@ -20251,7 +20637,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"styled-components@npm:^6.1.8":
+"styled-components@npm:^6.1.18, styled-components@npm:^6.1.8":
   version: 6.1.18
   resolution: "styled-components@npm:6.1.18"
   dependencies:
@@ -20271,6 +20657,13 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
+"stylis@npm:4.2.0":
+  version: 4.2.0
+  resolution: "stylis@npm:4.2.0"
+  checksum: 0eb6cc1b866dc17a6037d0a82ac7fa877eba6a757443e79e7c4f35bacedbf6421fadcab4363b39667b43355cbaaa570a3cde850f776498e5450f32ed2f9b7584
+  languageName: node
+  linkType: hard
+
 "stylis@npm:4.3.2":
   version: 4.3.2
   resolution: "stylis@npm:4.3.2"
diff --git a/package-lock.json b/package-lock.json
index 4869c22d99..c64b5520bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,8 @@
   "packages": {
     "": {
       "dependencies": {
+        "@jsonforms/core": "^3.5.1",
+        "@jsonforms/react": "^3.5.1",
         "axios": "^1.7.7",
         "fs": "^0.0.1-security",
         "path": "^0.12.7"
@@ -52,6 +54,29 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "node_modules/@jsonforms/core": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@jsonforms/core/-/core-3.5.1.tgz",
+      "integrity": "sha512-Jrq/UcfvKsAprLJ+9TMFa8pKsfdyv3dAw85XstSNRcjDT19LreBlhVqIvTvtgZidg8Iet3yqy5xlNnB+XyrvrQ==",
+      "dependencies": {
+        "@types/json-schema": "^7.0.3",
+        "ajv": "^8.6.1",
+        "ajv-formats": "^2.1.0",
+        "lodash": "^4.17.21"
+      }
+    },
+    "node_modules/@jsonforms/react": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/@jsonforms/react/-/react-3.5.1.tgz",
+      "integrity": "sha512-fQwCpzyNcf0FruYhc46dK6GfCcX09HkRX2PGYir7dllQPRI1axHd6t98To/h+48/L2PkFdRMGMCcIsoTXNC1qg==",
+      "dependencies": {
+        "lodash": "^4.17.21"
+      },
+      "peerDependencies": {
+        "@jsonforms/core": "3.5.1",
+        "react": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@tsconfig/node10": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
@@ -76,6 +101,11 @@
       "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
       "dev": true
     },
+    "node_modules/@types/json-schema": {
+      "version": "7.0.15",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
+      "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA=="
+    },
     "node_modules/@types/node": {
       "version": "22.5.5",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.5.tgz",
@@ -110,6 +140,37 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/ajv": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
+      "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-formats": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/arg": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
@@ -174,6 +235,26 @@
         "node": ">=6"
       }
     },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+    },
+    "node_modules/fast-uri": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz",
+      "integrity": "sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ]
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.9",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz",
@@ -216,6 +297,16 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
       "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
     },
+    "node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
+    },
     "node_modules/make-error": {
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
@@ -263,6 +354,23 @@
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
     },
+    "node_modules/react": {
+      "version": "19.1.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
+      "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
+      "peer": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/ts-node": {
       "version": "10.9.2",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
diff --git a/package.json b/package.json
index f96318c1f6..3fccf0c143 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,8 @@
     "typescript": "^5.6.2"
   },
   "dependencies": {
+    "@jsonforms/core": "^3.5.1",
+    "@jsonforms/react": "^3.5.1",
     "axios": "^1.7.7",
     "fs": "^0.0.1-security",
     "path": "^0.12.7"
diff --git a/translations/locales/en.js b/translations/locales/en.js
index aafb078ed8..d2ad74b1cc 100644
--- a/translations/locales/en.js
+++ b/translations/locales/en.js
@@ -1200,7 +1200,9 @@ export const en = {
         "minLength": "At Least {value} Characters",
         "maxLength": "At Most {value} Characters",
         "pattern": "Should Match the Pattern {value}",
-        "format": "Should Match the Format {value}"
+        "format": "Should Match the Format {value}",
+        "errorSchema": "Error Schema",
+        "formType": "Form Type",
     },
     "select": {
         "inputValueDesc": "Input Search Value"
diff --git a/yarn.lock b/yarn.lock
index 187f1ebada..c655e3a33d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -27,6 +27,23 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
+"@jsonforms/core@^3.5.1":
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/@jsonforms/core/-/core-3.5.1.tgz#1c8aa9323bb80677bbd538022f4d8e039516fef0"
+  integrity sha512-Jrq/UcfvKsAprLJ+9TMFa8pKsfdyv3dAw85XstSNRcjDT19LreBlhVqIvTvtgZidg8Iet3yqy5xlNnB+XyrvrQ==
+  dependencies:
+    "@types/json-schema" "^7.0.3"
+    ajv "^8.6.1"
+    ajv-formats "^2.1.0"
+    lodash "^4.17.21"
+
+"@jsonforms/react@^3.5.1":
+  version "3.5.1"
+  resolved "https://registry.yarnpkg.com/@jsonforms/react/-/react-3.5.1.tgz#30e3b75afaf678848ca7f7fb0d39c8499a719e96"
+  integrity sha512-fQwCpzyNcf0FruYhc46dK6GfCcX09HkRX2PGYir7dllQPRI1axHd6t98To/h+48/L2PkFdRMGMCcIsoTXNC1qg==
+  dependencies:
+    lodash "^4.17.21"
+
 "@tsconfig/node10@^1.0.7":
   version "1.0.11"
   resolved "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz"
@@ -47,12 +64,10 @@
   resolved "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz"
   integrity sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==
 
-"@types/node@*":
-  version "22.5.5"
-  resolved "https://registry.npmjs.org/@types/node/-/node-22.5.5.tgz"
-  integrity sha512-Xjs4y5UPO/CLdzpgR6GirZJx36yScjh73+2NlLlkFRSoQN8B0DpfXPdZGnvVmLRLOsqDpOfTNv7D9trgGhmOIA==
-  dependencies:
-    undici-types "~6.19.2"
+"@types/json-schema@^7.0.3":
+  version "7.0.15"
+  resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz"
+  integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
 
 acorn-walk@^8.1.1:
   version "8.3.4"
@@ -66,6 +81,23 @@ acorn@^8.11.0, acorn@^8.4.1:
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz"
   integrity sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==
 
+ajv-formats@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz"
+  integrity sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==
+  dependencies:
+    ajv "^8.0.0"
+
+ajv@^8.0.0, ajv@^8.6.1:
+  version "8.17.1"
+  resolved "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz"
+  integrity sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+    fast-uri "^3.0.1"
+    json-schema-traverse "^1.0.0"
+    require-from-string "^2.0.2"
+
 arg@^4.1.0:
   version "4.1.3"
   resolved "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz"
@@ -112,6 +144,16 @@ esm@^3.2.25:
   resolved "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz"
   integrity sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==
 
+fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-uri@^3.0.1:
+  version "3.0.6"
+  resolved "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz"
+  integrity sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==
+
 follow-redirects@^1.15.6:
   version "1.15.9"
   resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz"
@@ -136,6 +178,16 @@ inherits@2.0.3:
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz"
   integrity sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==
 
+json-schema-traverse@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz"
+  integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
+
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
 make-error@^1.1.1:
   version "1.3.6"
   resolved "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz"
@@ -171,6 +223,11 @@ proxy-from-env@^1.1.0:
   resolved "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz"
   integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
 
+require-from-string@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz"
+  integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
+
 ts-node@^10.9.2:
   version "10.9.2"
   resolved "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz"
@@ -190,16 +247,11 @@ ts-node@^10.9.2:
     v8-compile-cache-lib "^3.0.1"
     yn "3.1.1"
 
-typescript@^5.6.2, typescript@>=2.7:
+typescript@^5.6.2:
   version "5.6.2"
   resolved "https://registry.npmjs.org/typescript/-/typescript-5.6.2.tgz"
   integrity sha512-NW8ByodCSNCwZeghjN3o+JX5OFH0Ojg6sadjEKY4huZ52TqbJTJnDo5+Tw98lSy63NZvi4n+ez5m2u5d4PkZyw==
 
-undici-types@~6.19.2:
-  version "6.19.8"
-  resolved "https://registry.npmjs.org/undici-types/-/undici-types-6.19.8.tgz"
-  integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==
-
 util@^0.10.3:
   version "0.10.4"
   resolved "https://registry.npmjs.org/util/-/util-0.10.4.tgz"

From a40765a83f517d0d326e0cba20e716e99fa39fdf Mon Sep 17 00:00:00 2001
From: Kamal Qureshi <kamal.qureshi@nmxglobalsoftware.com>
Date: Fri, 30 May 2025 13:03:04 +0500
Subject: [PATCH 2/5] Clear prettify

---
 .../src/comps/calendarComp/calendarConstants.tsx  | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx
index c680763be4..8d7d9ac7ee 100644
--- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx
@@ -727,7 +727,7 @@ export const Event = styled.div<{
     margin-left: 15px;
     white-space: pre-wrap;
     word-break: break-word;
-    margin-top: 2px;
+    margin-top: 2px; 
   }
 
   &.small {
@@ -761,10 +761,10 @@ export const Event = styled.div<{
   }
   &.past {
     background-color: ${(props) =>
-      `rgba(${props?.$extendedProps?.color}, 0.3)`};
+    `rgba(${props?.$extendedProps?.color}, 0.3)`};
     &::before {
-      background-color: ${(props) => props?.$extendedProps?.color};
-      opacity: 0.3;
+    background-color: ${(props) => props?.$extendedProps?.color};
+    opacity: 0.3;
     }
     &::before,
     .event-title,
@@ -789,11 +789,12 @@ export const FormWrapper = styled(Form)<
     label:not(.ant-form-item-required) {
       margin-left: 2px;
     }
-    label.ant-form-item-required {
+     label.ant-form-item-required{
       margin-left: 2px;
     }
     label span {
       ${UnderlineCss}
+
     }
   }
 
@@ -1118,12 +1119,12 @@ export const slotLabelFormat = [
   {
     hour: "2-digit",
     minute: "2-digit",
-  },
+  }, 
 ] as FormatterInput[];
 
 export const slotLabelFormatWeek = [
   { week: "short" },
-  { hour: "2-digit" },
+  { hour: "2-digit" }, 
 ] as FormatterInput[];
 
 export const slotLabelFormatMonth = [

From 775b7a13e3ec298a4e9463642a638436f7c81622 Mon Sep 17 00:00:00 2001
From: Kamal Qureshi <kamal.qureshi@nmxglobalsoftware.com>
Date: Fri, 30 May 2025 13:05:30 +0500
Subject: [PATCH 3/5] CLear prettify changes

---
 client/packages/lowcoder-design/src/components/Dropdown.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/client/packages/lowcoder-design/src/components/Dropdown.tsx b/client/packages/lowcoder-design/src/components/Dropdown.tsx
index e02508e8c0..b2a9d27663 100644
--- a/client/packages/lowcoder-design/src/components/Dropdown.tsx
+++ b/client/packages/lowcoder-design/src/components/Dropdown.tsx
@@ -124,9 +124,8 @@ const FlexDiv = styled.div`
 
 const LabelWrapper = styled.div<{ $placement: ControlPlacement }>`
   flex-shrink: 0;
-  width: ${(props) =>
-    props.$placement === "right" ? "96px" : props.$placement === "bottom" ? "112px" : "136px"};
-`;
+  width: ${(props) => props.$placement === "right" ? "96px" : props.$placement === "bottom" ? "112px" : "136px"};
+  `;
 
 export type OptionType = {
   readonly label: ReactNode;

From ac418a7089de9426e464a01c56fa53624ee7b3ae Mon Sep 17 00:00:00 2001
From: Kamal Qureshi <kamal.qureshi@nmxglobalsoftware.com>
Date: Fri, 30 May 2025 18:31:23 +0500
Subject: [PATCH 4/5] Reviewed Changes

---
 client/package.json                           |  12 -
 .../comps/calendarComp/calendarConstants.tsx  |  14 +-
 .../lowcoder-design/src/components/form.tsx   |   4 +-
 client/packages/lowcoder/package.json         |   2 +
 .../lowcoder/src/components/JSLibraryTree.tsx |   6 +-
 .../comps/selectInputComp/checkboxComp.tsx    |  11 +-
 .../comps/comps/selectInputComp/radioComp.tsx |   8 +-
 .../columnTypeComps/columnMarkdownComp.tsx    |   2 +-
 .../lowcoder/src/comps/comps/textComp.tsx     |   4 +-
 .../src/comps/controls/multiSelectControl.tsx |   4 +-
 .../lowcoder/src/comps/queries/esQuery.tsx    |   7 +-
 .../src/comps/queries/resourceDropdown.tsx    |   6 +-
 .../src/layout/compSelectionWrapper.tsx       |   5 +-
 .../components/CreateApiKeyModal.tsx          |   2 +-
 .../src/pages/common/previewHeader.tsx        |   6 +-
 .../src/pages/queryLibrary/LeftNav.tsx        |   5 +-
 .../setting/idSource/styledComponents.tsx     |  11 +-
 client/yarn.lock                              | 397 +-----------------
 package.json                                  |   2 -
 yarn.lock                                     |  64 ---
 20 files changed, 52 insertions(+), 520 deletions(-)

diff --git a/client/package.json b/client/package.json
index fe18db2b32..38e4182542 100644
--- a/client/package.json
+++ b/client/package.json
@@ -72,25 +72,14 @@
     "eslint-plugin-only-ascii@^0.0.0": "patch:eslint-plugin-only-ascii@npm%3A0.0.0#./.yarn/patches/eslint-plugin-only-ascii-npm-0.0.0-29e3417685.patch"
   },
   "dependencies": {
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
-    "@jsonforms/core": "3.5.1",
-    "@jsonforms/material-renderers": "^3.5.1",
-    "@jsonforms/react": "3.5.1",
     "@lottiefiles/react-lottie-player": "^3.5.3",
     "@remixicon/react": "^4.1.1",
-    "@rjsf/antd": "^6.0.0-beta.10",
-    "@rjsf/core": "^6.0.0-beta.10",
-    "@rjsf/utils": "^6.0.0-beta.10",
-    "@rjsf/validator-ajv8": "^6.0.0-beta.10",
     "@supabase/supabase-js": "^2.45.4",
     "@testing-library/react": "^14.1.2",
     "@testing-library/user-event": "^14.5.1",
     "@types/styled-components": "^5.1.34",
-    "antd": "^5.25.3",
     "antd-mobile": "^5.34.0",
     "chalk": "4",
-    "dayjs": "^1.11.13",
     "flag-icons": "^7.2.1",
     "number-precision": "^1.6.0",
     "react-countup": "^6.5.3",
@@ -99,7 +88,6 @@
     "resize-observer-polyfill": "^1.5.1",
     "rollup": "^4.22.5",
     "simplebar": "^6.2.5",
-    "styled-components": "^6.1.18",
     "tui-image-editor": "^3.15.3"
   }
 }
diff --git a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx
index 8d7d9ac7ee..306f90a79d 100644
--- a/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx
+++ b/client/packages/lowcoder-comps/src/comps/calendarComp/calendarConstants.tsx
@@ -28,7 +28,7 @@ import {
   SlotLabelContentArg,
   ViewContentArg,
 } from "@fullcalendar/core";
-import { default as Form, FormProps } from "antd/es/form";
+import { default as Form } from "antd/es/form";
 
 type Theme = typeof Theme;
 type EventModalStyleType = typeof EventModalStyleType;
@@ -776,11 +776,9 @@ export const Event = styled.div<{
   }
 `;
 
-export const FormWrapper = styled(Form)<
-  FormProps & {
-    $modalStyle?: EventModalStyleType;
-  }
->`
+export const FormWrapper = styled(Form)<{
+  $modalStyle?: EventModalStyleType
+}>`
   .ant-form-item-label {
     width: 125px;
     text-align: left;
@@ -789,12 +787,12 @@ export const FormWrapper = styled(Form)<
     label:not(.ant-form-item-required) {
       margin-left: 2px;
     }
-     label.ant-form-item-required{
+      label.ant-form-item-required{
       margin-left: 2px;
     }
     label span {
       ${UnderlineCss}
-
+      
     }
   }
 
diff --git a/client/packages/lowcoder-design/src/components/form.tsx b/client/packages/lowcoder-design/src/components/form.tsx
index 52b65415a4..347f2e729b 100644
--- a/client/packages/lowcoder-design/src/components/form.tsx
+++ b/client/packages/lowcoder-design/src/components/form.tsx
@@ -1,4 +1,4 @@
-import { default as Form, FormProps } from "antd/es/form";
+import { default as Form } from "antd/es/form";
 import { default as AntdFormItem, FormItemProps as AntdFormItemProps} from "antd/es/form/FormItem";
 import { default as Input, InputProps } from "antd/es/input";
 import { default as TextArea, TextAreaProps } from "antd/es/input/TextArea";
@@ -429,7 +429,7 @@ export const FormKeyValueItem = (props: FormItemProps) => (
   </FormItemContain>
 );
 
-export const DatasourceForm = styled(Form)<FormProps>`
+export const DatasourceForm = styled(Form)`
   display: flex;
   flex-direction: column;
   gap: 8px;
diff --git a/client/packages/lowcoder/package.json b/client/packages/lowcoder/package.json
index 86576c3eba..2b5ecdca73 100644
--- a/client/packages/lowcoder/package.json
+++ b/client/packages/lowcoder/package.json
@@ -24,6 +24,7 @@
     "@fortawesome/free-regular-svg-icons": "^6.5.1",
     "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "latest",
+    "@jsonforms/core": "^3.5.1",
     "@lottiefiles/dotlottie-react": "^0.13.0",
     "@manaflair/redux-batch": "^1.0.0",
     "@rjsf/antd": "^5.24.9",
@@ -45,6 +46,7 @@
     "coolshapes-react": "lowcoder-org/coolshapes-react",
     "copy-to-clipboard": "^3.3.3",
     "core-js": "^3.25.2",
+    "dayjs": "^1.11.13",
     "echarts": "^5.4.3",
     "echarts-for-react": "^3.0.2",
     "echarts-wordcloud": "^2.1.0",
diff --git a/client/packages/lowcoder/src/components/JSLibraryTree.tsx b/client/packages/lowcoder/src/components/JSLibraryTree.tsx
index 19a4c971f2..e7c464c605 100644
--- a/client/packages/lowcoder/src/components/JSLibraryTree.tsx
+++ b/client/packages/lowcoder/src/components/JSLibraryTree.tsx
@@ -134,11 +134,7 @@ const JSLibraryCollapse = styled(Collapse)<{ $mode: "row" | "column" }>`
   }
 
   .lib-label-name {
-    ${css`
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    `}
+    ${EllipsisTextCss};
   }
 `;
 
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
index d94f1741f9..9a7abb8bd1 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/checkboxComp.tsx
@@ -19,10 +19,12 @@ import { AnimationStyle, CheckboxStyle, CheckboxStyleType, InputFieldStyle, Labe
 import { RadioLayoutOptions, RadioPropertyView } from "./radioCompConstants";
 import { dropdownControl } from "../../controls/dropdownControl";
 import { ValueFromOption, lightenColor } from "lowcoder-design";
+import { EllipsisTextCss } from "lowcoder-design";
 import { trans } from "i18n";
 import { RefControl } from "comps/controls/refControl";
 import { migrateOldData } from "comps/generators/simpleGenerators";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
+import Tooltip from "antd/es/tooltip";
 import { useCallback, useRef, useEffect, memo } from "react";
 
 export const getStyle = (style: CheckboxStyleType) => {
@@ -32,10 +34,7 @@ export const getStyle = (style: CheckboxStyleType) => {
       max-width: calc(100% - 8px);
 
       span:not(.ant-checkbox) {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-      }
+        ${EllipsisTextCss};
       }
 
       .ant-checkbox .ant-checkbox-checked > .ant-checkbox-inner {
@@ -80,6 +79,8 @@ export const getStyle = (style: CheckboxStyleType) => {
         ${style.hoverBackground && `border-color: ${style.hoverBackground}`};
       }
 
+      
+
       &:hover .ant-checkbox-inner,
       .ant-checkbox:hover .ant-checkbox-inner,
       .ant-checkbox-input:focus + .ant-checkbox-inner {
@@ -93,6 +94,8 @@ export const getStyle = (style: CheckboxStyleType) => {
       }
     }
 
+    
+
     .ant-checkbox-group-item {
       font-family:${style.fontFamily};
       font-size:${style.textSize};
diff --git a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
index ca662a06bd..28d5d6f3db 100644
--- a/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/selectInputComp/radioComp.tsx
@@ -9,22 +9,22 @@ import {
   SelectInputInvalidConfig,
   useSelectInputValidate,
 } from "./selectInputConstants";
-import { ValueFromOption } from "lowcoder-design";
+import { EllipsisTextCss, ValueFromOption } from "lowcoder-design";
 import { trans } from "i18n";
 import { fixOldInputCompData } from "../textInputComp/textInputConstants";
 import { migrateOldData } from "comps/generators/simpleGenerators";
+import Tooltip from "antd/es/tooltip";
 import { useCallback, useRef, useEffect, memo } from "react";
 
 const getStyle = (style: RadioStyleType, inputFieldStyle?:RadioStyleType ) => {
   return css`
     .ant-radio-wrapper:not(.ant-radio-wrapper-disabled) {
       color: ${inputFieldStyle?.staticText};
+      // height: 22px;
       max-width: calc(100% - 8px);
       padding: ${inputFieldStyle?.padding};
       span:not(.ant-radio) {
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
+        ${EllipsisTextCss};
         font-family:${inputFieldStyle?.fontFamily};
         font-size:${inputFieldStyle?.textSize};
         font-weight:${inputFieldStyle?.textWeight};
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx
index 03269ae37a..e8fcd9a4b2 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnMarkdownComp.tsx
@@ -11,7 +11,7 @@ import { markdownCompCss, TacoMarkDown } from "lowcoder-design";
 import styled from "styled-components";
 
 const Wrapper = styled.div`
-  ${markdownCompCss as any};
+  ${markdownCompCss};
   max-height: 32px;
 
   > .markdown-body {
diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
index 1c7fcf8f3c..93b3d79ae0 100644
--- a/client/packages/lowcoder/src/comps/comps/textComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -14,8 +14,10 @@ import { AnimationStyle, AnimationStyleType, TextStyle, TextStyleType, heightCal
 import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
 import { trans } from "i18n";
 import { alignWithJustifyControl } from "comps/controls/alignControl";
+
 import { MarginControl } from "../controls/marginControl";
 import { PaddingControl } from "../controls/paddingControl";
+
 import React, { useContext, useEffect, useRef, useMemo } from "react";
 import { EditorContext } from "comps/editorState";
 import { clickEvent, eventHandlerControl } from "../controls/eventHandlerControl";
@@ -100,7 +102,7 @@ const TextContainer = React.memo(styled.div<{
   `};
   ${(props) => props.$styleConfig && getStyle(props.$styleConfig)}
   display: flex;
-  ${markdownCompCss as any};
+  ${markdownCompCss};
   overflow-wrap: anywhere;
   .markdown-body {
     overflow-wrap: anywhere;
diff --git a/client/packages/lowcoder/src/comps/controls/multiSelectControl.tsx b/client/packages/lowcoder/src/comps/controls/multiSelectControl.tsx
index 85226f57ed..f4991282d9 100644
--- a/client/packages/lowcoder/src/comps/controls/multiSelectControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/multiSelectControl.tsx
@@ -15,9 +15,7 @@ const LabelWrapper = styled.div<{ $placement: ControlPlacement }>`
 `;
 
 const DropDownItemLabel = styled.div`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  ${EllipsisTextCss};
   width: 100%;
   font-size: 13px;
   line-height: 15px;
diff --git a/client/packages/lowcoder/src/comps/queries/esQuery.tsx b/client/packages/lowcoder/src/comps/queries/esQuery.tsx
index 50494b7eb1..902332bbdb 100644
--- a/client/packages/lowcoder/src/comps/queries/esQuery.tsx
+++ b/client/packages/lowcoder/src/comps/queries/esQuery.tsx
@@ -10,6 +10,7 @@ import {
 } from "lowcoder-core";
 import {
   Dropdown,
+  EllipsisTextCss,
   QueryConfigItemWrapper,
   QueryConfigLabel,
   QueryConfigWrapper,
@@ -114,9 +115,7 @@ const ReadOnlyField = styled.div`
   height: 32px;
   line-height: 32px;
   width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  ${EllipsisTextCss};
 `;
 const InputField = styled.div`
   flex-grow: 1;
@@ -257,7 +256,7 @@ const EsQueryPropertyView = (props: {
               children.path.propertyView({})
             ) : (
               <ReadOnlyField>
-                {JSON.stringify(children.path.toJsonValue())}
+                <>{children.path.toJsonValue()}</>
               </ReadOnlyField>
             )}
           </InputField>
diff --git a/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx b/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx
index c2cea6fcd4..7386db7e87 100644
--- a/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx
+++ b/client/packages/lowcoder/src/comps/queries/resourceDropdown.tsx
@@ -4,7 +4,7 @@ import { useSelector } from "react-redux";
 import React, { useContext, useMemo, useState } from "react";
 import { DataSourceTypeInfo } from "api/datasourceApi";
 import styled from "styled-components";
-import { CustomSelect  } from "lowcoder-design";
+import { CustomSelect, EllipsisTextCss } from "lowcoder-design";
 import { DatasourceModal } from "pages/datasource/datasourceModal";
 import { InputStatus } from "antd/es/_util/statusUtils";
 import { getDataSource, getDataSourceTypes } from "redux/selectors/datasourceSelectors";
@@ -30,9 +30,7 @@ const SelectOptionLabel = styled.div`
   font-size: 13px;
   display: inline-block;
   flex-grow: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  ${EllipsisTextCss};
 `;
 const SelectOptionContains = styled.div`
   display: flex;
diff --git a/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx b/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx
index 29af297422..0e6a228d39 100644
--- a/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx
+++ b/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx
@@ -18,6 +18,7 @@ import React, {
 } from "react";
 import { ResizePayload, useResizeDetector } from "react-resize-detector";
 import styled, { css } from "styled-components";
+import { EllipsisTextCss } from "lowcoder-design";
 import { draggingUtils } from "./draggingUtils";
 import type { ResizeHandleAxis } from "./gridLayoutPropTypes";
 import { isEqual } from "lodash";
@@ -56,9 +57,7 @@ const NameDiv = styled.div<{
 `;
 const NameLabel = styled.span`
   max-width: 208px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  ${EllipsisTextCss};
 `;
 
 export const GRID_ITEM_BORDER_WIDTH = 1.5;
diff --git a/client/packages/lowcoder/src/pages/ApplicationV2/components/CreateApiKeyModal.tsx b/client/packages/lowcoder/src/pages/ApplicationV2/components/CreateApiKeyModal.tsx
index 4e0b23f61a..ebe83b3cca 100644
--- a/client/packages/lowcoder/src/pages/ApplicationV2/components/CreateApiKeyModal.tsx
+++ b/client/packages/lowcoder/src/pages/ApplicationV2/components/CreateApiKeyModal.tsx
@@ -38,7 +38,7 @@ const FormStyled = styled(Form)`
     font-size: 13px;
     line-height: 19px;
     .has-tip {
-      ${UnderlineCss as any};
+      ${UnderlineCss};
     }
   }
 
diff --git a/client/packages/lowcoder/src/pages/common/previewHeader.tsx b/client/packages/lowcoder/src/pages/common/previewHeader.tsx
index 523817da8f..bf73cd9803 100644
--- a/client/packages/lowcoder/src/pages/common/previewHeader.tsx
+++ b/client/packages/lowcoder/src/pages/common/previewHeader.tsx
@@ -3,7 +3,7 @@ import Header from "components/layout/Header";
 import { SHARE_TITLE } from "constants/apiConstants";
 import { ALL_APPLICATIONS_URL, APPLICATION_VIEW_URL, AUTH_LOGIN_URL } from "constants/routesURL";
 import { User } from "constants/userConstants";
-import { isDarkColor, TacoButton, TextEditIcon } from "lowcoder-design";
+import { EllipsisTextCss, isDarkColor, TacoButton, TextEditIcon } from "lowcoder-design";
 import { useSelector } from "react-redux";
 import { currentApplication, getTemplateId, isPublicApplication } from "redux/selectors/applicationSelector";
 import { getUser, isFetchingUser } from "redux/selectors/usersSelectors";
@@ -38,9 +38,7 @@ const HeaderFont = styled.div<{ $bgColor: string }>`
   margin-right: 8px;
   margin-left: 20px;
   max-width: 264px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  ${EllipsisTextCss};
 `;
 
 const StyledLink = styled.a`
diff --git a/client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx b/client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx
index 132184ac57..84bdade673 100644
--- a/client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx
+++ b/client/packages/lowcoder/src/pages/queryLibrary/LeftNav.tsx
@@ -4,6 +4,7 @@ import {
   BluePlusIcon,
   CustomModal,
   EditPopover,
+  EllipsisTextCss,
   PointIcon,
   ScrollBar,
   Search,
@@ -123,9 +124,7 @@ const QueryType = styled.div`
   font-size: 13px;
 `;
 const QueryName = styled.div`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  ${EllipsisTextCss};
   font-weight: 500;
   font-size: 13px;
 `;
diff --git a/client/packages/lowcoder/src/pages/setting/idSource/styledComponents.tsx b/client/packages/lowcoder/src/pages/setting/idSource/styledComponents.tsx
index bf9e3f3381..6562be83f7 100644
--- a/client/packages/lowcoder/src/pages/setting/idSource/styledComponents.tsx
+++ b/client/packages/lowcoder/src/pages/setting/idSource/styledComponents.tsx
@@ -1,8 +1,8 @@
 import styled, { css } from "styled-components";
 import { Table } from "components/Table";
 import { default as Button } from "antd/es/button";
-import { default as Checkbox } from "antd/es/checkbox";
-import { default as Form, FormProps } from "antd/es/form";
+import { default as Checkbox} from "antd/es/checkbox";
+import { default as Form, FormInstance } from "antd/es/form";
 import { UnderlineCss } from "lowcoder-design";
 import Steps from "antd/es/steps";
 
@@ -153,7 +153,7 @@ export const SaveButton = styled(Button)`
   }
 `;
 
-export const FormStyled = styled(Form)<FormProps>`
+export const FormStyled = styled(Form)`
   .ant-form-item-control-input-content > input,
   .ant-input-password {
     &:hover {
@@ -170,10 +170,7 @@ export const FormStyled = styled(Form)<FormProps>`
     font-size: 13px;
     line-height: 19px;
     .has-tip {
-      text-decoration: underline;
-      text-decoration-style: dotted;
-      text-underline-offset: 4px;
-      cursor: help;
+      ${UnderlineCss};
     }
   }
 
diff --git a/client/yarn.lock b/client/yarn.lock
index 4aea0fc1f3..d15e8a065b 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -55,7 +55,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ant-design/colors@npm:^7.0.0, @ant-design/colors@npm:^7.2.0, @ant-design/colors@npm:^7.2.1":
+"@ant-design/colors@npm:^7.0.0, @ant-design/colors@npm:^7.2.0":
   version: 7.2.1
   resolution: "@ant-design/colors@npm:7.2.1"
   dependencies:
@@ -288,7 +288,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.22.5, @babel/helper-module-imports@npm:^7.27.1":
+"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.22.5, @babel/helper-module-imports@npm:^7.27.1":
   version: 7.27.1
   resolution: "@babel/helper-module-imports@npm:7.27.1"
   dependencies:
@@ -1861,27 +1861,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@date-io/core@npm:^3.2.0":
-  version: 3.2.0
-  resolution: "@date-io/core@npm:3.2.0"
-  checksum: 711e43b449bc29f5f1aaf49e34e722a9fe42238b1ee20e81e3a11692118002872d915c2a289f1ed24e53f88bd220ce3888d7ec0a1705c131e305478f534a3450
-  languageName: node
-  linkType: hard
-
-"@date-io/dayjs@npm:^3.0.0":
-  version: 3.2.0
-  resolution: "@date-io/dayjs@npm:3.2.0"
-  dependencies:
-    "@date-io/core": ^3.2.0
-  peerDependencies:
-    dayjs: ^1.8.17
-  peerDependenciesMeta:
-    dayjs:
-      optional: true
-  checksum: e0ad20dce42cfb600c907e4deb2861439377b1b490501362b76e20928ff98ee7ed29c4470d2425b399886ffedca556ea4669838c546fa05270a807fa4f74ba30
-  languageName: node
-  linkType: hard
-
 "@discoveryjs/json-ext@npm:0.5.7, @discoveryjs/json-ext@npm:^0.5.0":
   version: 0.5.7
   resolution: "@discoveryjs/json-ext@npm:0.5.7"
@@ -1951,38 +1930,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/babel-plugin@npm:^11.13.5":
-  version: 11.13.5
-  resolution: "@emotion/babel-plugin@npm:11.13.5"
-  dependencies:
-    "@babel/helper-module-imports": ^7.16.7
-    "@babel/runtime": ^7.18.3
-    "@emotion/hash": ^0.9.2
-    "@emotion/memoize": ^0.9.0
-    "@emotion/serialize": ^1.3.3
-    babel-plugin-macros: ^3.1.0
-    convert-source-map: ^1.5.0
-    escape-string-regexp: ^4.0.0
-    find-root: ^1.1.0
-    source-map: ^0.5.7
-    stylis: 4.2.0
-  checksum: c41df7e6c19520e76d1939f884be878bf88b5ba00bd3de9d05c5b6c5baa5051686ab124d7317a0645de1b017b574d8139ae1d6390ec267fbe8e85a5252afb542
-  languageName: node
-  linkType: hard
-
-"@emotion/cache@npm:^11.14.0":
-  version: 11.14.0
-  resolution: "@emotion/cache@npm:11.14.0"
-  dependencies:
-    "@emotion/memoize": ^0.9.0
-    "@emotion/sheet": ^1.4.0
-    "@emotion/utils": ^1.4.2
-    "@emotion/weak-memoize": ^0.4.0
-    stylis: 4.2.0
-  checksum: 0a81591541ea43bc7851742e6444b7800d72e98006f94e775ae6ea0806662d14e0a86ff940f5f19d33b4bb2c427c882aa65d417e7322a6e0d5f20fe65ed920c9
-  languageName: node
-  linkType: hard
-
 "@emotion/hash@npm:^0.8.0":
   version: 0.8.0
   resolution: "@emotion/hash@npm:0.8.0"
@@ -1990,13 +1937,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/hash@npm:^0.9.2":
-  version: 0.9.2
-  resolution: "@emotion/hash@npm:0.9.2"
-  checksum: 379bde2830ccb0328c2617ec009642321c0e009a46aa383dfbe75b679c6aea977ca698c832d225a893901f29d7b3eef0e38cf341f560f6b2b56f1ff23c172387
-  languageName: node
-  linkType: hard
-
 "@emotion/is-prop-valid@npm:1.2.2":
   version: 1.2.2
   resolution: "@emotion/is-prop-valid@npm:1.2.2"
@@ -2006,15 +1946,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/is-prop-valid@npm:^1.3.0":
-  version: 1.3.1
-  resolution: "@emotion/is-prop-valid@npm:1.3.1"
-  dependencies:
-    "@emotion/memoize": ^0.9.0
-  checksum: fe6549d54f389e1a17cb02d832af7ee85fb6ea126fc18d02ca47216e8ff19332c1983f4a0ba68602cfcd3b325ffd4ebf0b2d0c6270f1e7e6fe3fca4ba7741e1a
-  languageName: node
-  linkType: hard
-
 "@emotion/memoize@npm:^0.8.1":
   version: 0.8.1
   resolution: "@emotion/memoize@npm:0.8.1"
@@ -2022,74 +1953,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/memoize@npm:^0.9.0":
-  version: 0.9.0
-  resolution: "@emotion/memoize@npm:0.9.0"
-  checksum: 038132359397348e378c593a773b1148cd0cf0a2285ffd067a0f63447b945f5278860d9de718f906a74c7c940ba1783ac2ca18f1c06a307b01cc0e3944e783b1
-  languageName: node
-  linkType: hard
-
-"@emotion/react@npm:^11.14.0":
-  version: 11.14.0
-  resolution: "@emotion/react@npm:11.14.0"
-  dependencies:
-    "@babel/runtime": ^7.18.3
-    "@emotion/babel-plugin": ^11.13.5
-    "@emotion/cache": ^11.14.0
-    "@emotion/serialize": ^1.3.3
-    "@emotion/use-insertion-effect-with-fallbacks": ^1.2.0
-    "@emotion/utils": ^1.4.2
-    "@emotion/weak-memoize": ^0.4.0
-    hoist-non-react-statics: ^3.3.1
-  peerDependencies:
-    react: ">=16.8.0"
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 3cf023b11d132b56168713764d6fced8e5a1f0687dfe0caa2782dfd428c8f9e30f9826a919965a311d87b523cd196722aaf75919cd0f6bd0fd57f8a6a0281500
-  languageName: node
-  linkType: hard
-
-"@emotion/serialize@npm:^1.3.3":
-  version: 1.3.3
-  resolution: "@emotion/serialize@npm:1.3.3"
-  dependencies:
-    "@emotion/hash": ^0.9.2
-    "@emotion/memoize": ^0.9.0
-    "@emotion/unitless": ^0.10.0
-    "@emotion/utils": ^1.4.2
-    csstype: ^3.0.2
-  checksum: 510331233767ae4e09e925287ca2c7269b320fa1d737ea86db5b3c861a734483ea832394c0c1fe5b21468fe335624a75e72818831d303ba38125f54f44ba02e7
-  languageName: node
-  linkType: hard
-
-"@emotion/sheet@npm:^1.4.0":
-  version: 1.4.0
-  resolution: "@emotion/sheet@npm:1.4.0"
-  checksum: eeb1212e3289db8e083e72e7e401cd6d1a84deece87e9ce184f7b96b9b5dbd6f070a89057255a6ff14d9865c3ce31f27c39248a053e4cdd875540359042586b4
-  languageName: node
-  linkType: hard
-
-"@emotion/styled@npm:^11.14.0":
-  version: 11.14.0
-  resolution: "@emotion/styled@npm:11.14.0"
-  dependencies:
-    "@babel/runtime": ^7.18.3
-    "@emotion/babel-plugin": ^11.13.5
-    "@emotion/is-prop-valid": ^1.3.0
-    "@emotion/serialize": ^1.3.3
-    "@emotion/use-insertion-effect-with-fallbacks": ^1.2.0
-    "@emotion/utils": ^1.4.2
-  peerDependencies:
-    "@emotion/react": ^11.0.0-rc.0
-    react: ">=16.8.0"
-  peerDependenciesMeta:
-    "@types/react":
-      optional: true
-  checksum: 9c1b842e942e69fb6037d1ab161046d2bcfeff95fd2ccfdab30acaaf6b89dc07b14bb00f8cc8ec14df11e6746c8e4e1d781bc54d10bd739aab44966ded64d4fb
-  languageName: node
-  linkType: hard
-
 "@emotion/unitless@npm:0.8.1":
   version: 0.8.1
   resolution: "@emotion/unitless@npm:0.8.1"
@@ -2097,13 +1960,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/unitless@npm:^0.10.0":
-  version: 0.10.0
-  resolution: "@emotion/unitless@npm:0.10.0"
-  checksum: d79346df31a933e6d33518e92636afeb603ce043f3857d0a39a2ac78a09ef0be8bedff40130930cb25df1beeee12d96ee38613963886fa377c681a89970b787c
-  languageName: node
-  linkType: hard
-
 "@emotion/unitless@npm:^0.7.5":
   version: 0.7.5
   resolution: "@emotion/unitless@npm:0.7.5"
@@ -2111,29 +1967,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/use-insertion-effect-with-fallbacks@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "@emotion/use-insertion-effect-with-fallbacks@npm:1.2.0"
-  peerDependencies:
-    react: ">=16.8.0"
-  checksum: 8ff6aec7f2924526ff8c8f8f93d4b8236376e2e12c435314a18c9a373016e24dfdf984e82bbc83712b8e90ff4783cd765eb39fc7050d1a43245e5728740ddd71
-  languageName: node
-  linkType: hard
-
-"@emotion/utils@npm:^1.4.2":
-  version: 1.4.2
-  resolution: "@emotion/utils@npm:1.4.2"
-  checksum: 04cf76849c6401205c058b82689fd0ec5bf501aed6974880fe9681a1d61543efb97e848f4c38664ac4a9068c7ad2d1cb84f73bde6cf95f1208aa3c28e0190321
-  languageName: node
-  linkType: hard
-
-"@emotion/weak-memoize@npm:^0.4.0":
-  version: 0.4.0
-  resolution: "@emotion/weak-memoize@npm:0.4.0"
-  checksum: db5da0e89bd752c78b6bd65a1e56231f0abebe2f71c0bd8fc47dff96408f7065b02e214080f99924f6a3bfe7ee15afc48dad999d76df86b39b16e513f7a94f52
-  languageName: node
-  linkType: hard
-
 "@esbuild/android-arm64@npm:0.18.20":
   version: 0.18.20
   resolution: "@esbuild/android-arm64@npm:0.18.20"
@@ -3023,7 +2856,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jsonforms/core@npm:3.5.1":
+"@jsonforms/core@npm:^3.5.1":
   version: 3.5.1
   resolution: "@jsonforms/core@npm:3.5.1"
   dependencies:
@@ -3035,38 +2868,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jsonforms/material-renderers@npm:^3.5.1":
-  version: 3.5.1
-  resolution: "@jsonforms/material-renderers@npm:3.5.1"
-  dependencies:
-    "@date-io/dayjs": ^3.0.0
-    dayjs: 1.10.7
-    lodash: ^4.17.21
-  peerDependencies:
-    "@emotion/react": ^11.4.1
-    "@emotion/styled": ^11.3.0
-    "@jsonforms/core": 3.5.1
-    "@jsonforms/react": 3.5.1
-    "@mui/icons-material": ^5.11.16 || ^6.0.0
-    "@mui/material": ^5.13.0 || ^6.0.0
-    "@mui/x-date-pickers": ^6.0.0 || ^7.0.0
-    react: ^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-  checksum: 93b15185bc0fa602f0123a523354ab694e7888910410944dcc087b1ba23b9b0d47ad620797f927c575ab266017917e2795db77d61af5fa3d2102bbeb3662db34
-  languageName: node
-  linkType: hard
-
-"@jsonforms/react@npm:3.5.1":
-  version: 3.5.1
-  resolution: "@jsonforms/react@npm:3.5.1"
-  dependencies:
-    lodash: ^4.17.21
-  peerDependencies:
-    "@jsonforms/core": 3.5.1
-    react: ^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-  checksum: f38e35e53363c3f2c2fc13e846cc104c6df05fe1105e8553e461fdc2550bb2bd9d2710af24b102c2b6b025d7fccb8d62d6fdf1876ea8efc1cece0a5fa97b5346
-  languageName: node
-  linkType: hard
-
 "@jsonjoy.com/base64@npm:^1.1.1":
   version: 1.1.2
   resolution: "@jsonjoy.com/base64@npm:1.1.2"
@@ -3619,25 +3420,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rjsf/antd@npm:^6.0.0-beta.10":
-  version: 6.0.0-beta.10
-  resolution: "@rjsf/antd@npm:6.0.0-beta.10"
-  dependencies:
-    classnames: ^2.5.1
-    lodash: ^4.17.21
-    lodash-es: ^4.17.21
-    rc-picker: 2.7.6
-  peerDependencies:
-    "@ant-design/icons": ^5.0.0
-    "@rjsf/core": ^6.0.0-beta
-    "@rjsf/utils": ^6.0.0-beta
-    antd: ^5.8.5
-    dayjs: ^1.8.0
-    react: ">=18"
-  checksum: f49f8260575b132091ba90093a2405e07bd2cc9036e5b8d6f8d40d153de2d60f8c36689d4b055964fd59e64cb97cc5fc5016e6cb4304169687b2c9d3953aedda
-  languageName: node
-  linkType: hard
-
 "@rjsf/core@npm:^5.24.9":
   version: 5.24.10
   resolution: "@rjsf/core@npm:5.24.10"
@@ -3654,22 +3436,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rjsf/core@npm:^6.0.0-beta.10":
-  version: 6.0.0-beta.10
-  resolution: "@rjsf/core@npm:6.0.0-beta.10"
-  dependencies:
-    lodash: ^4.17.21
-    lodash-es: ^4.17.21
-    markdown-to-jsx: ^7.7.6
-    nanoid: ^5.1.5
-    prop-types: ^15.8.1
-  peerDependencies:
-    "@rjsf/utils": ^6.0.0-beta
-    react: ">=18"
-  checksum: 67e02a371c08a53f208d6d8edc91bf5649e86a45d3032992a32d855c710ec17d1b6c65aae543c6831c4a08d87506d8fa85c057a19ce73b9c35361803276e7476
-  languageName: node
-  linkType: hard
-
 "@rjsf/utils@npm:^5.24.9":
   version: 5.24.10
   resolution: "@rjsf/utils@npm:5.24.10"
@@ -3685,23 +3451,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rjsf/utils@npm:^6.0.0-beta.10":
-  version: 6.0.0-beta.10
-  resolution: "@rjsf/utils@npm:6.0.0-beta.10"
-  dependencies:
-    fast-uri: ^3.0.6
-    json-schema-merge-allof: ^0.8.1
-    jsonpointer: ^5.0.1
-    lodash: ^4.17.21
-    lodash-es: ^4.17.21
-    nanoid: ^5.1.5
-    react-is: ^18.2.0
-  peerDependencies:
-    react: ">=18"
-  checksum: 3a23b3e4a2909bdaec239de12ac02edf2acd3d4c8906f634774bc0560d5021d42c479e613f89d6a4d0d315beb1a2623c1e21101433051b8b362ae2f2ae419c1e
-  languageName: node
-  linkType: hard
-
 "@rjsf/validator-ajv8@npm:^5.24.9":
   version: 5.24.10
   resolution: "@rjsf/validator-ajv8@npm:5.24.10"
@@ -3716,20 +3465,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rjsf/validator-ajv8@npm:^6.0.0-beta.10":
-  version: 6.0.0-beta.10
-  resolution: "@rjsf/validator-ajv8@npm:6.0.0-beta.10"
-  dependencies:
-    ajv: ^8.12.0
-    ajv-formats: ^2.1.1
-    lodash: ^4.17.21
-    lodash-es: ^4.17.21
-  peerDependencies:
-    "@rjsf/utils": ^6.0.0-beta
-  checksum: c61be5e9a055729326f230d758da44a6754aa8e8e4d294e13c252139bd241ad4a07d7c276a33d43e11321049a1d14d0f424bc61434345d0473f5c206b3658f95
-  languageName: node
-  linkType: hard
-
 "@rollup/plugin-commonjs@npm:^22.0.2":
   version: 22.0.2
   resolution: "@rollup/plugin-commonjs@npm:22.0.2"
@@ -6346,66 +6081,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"antd@npm:^5.25.3":
-  version: 5.25.3
-  resolution: "antd@npm:5.25.3"
-  dependencies:
-    "@ant-design/colors": ^7.2.1
-    "@ant-design/cssinjs": ^1.23.0
-    "@ant-design/cssinjs-utils": ^1.1.3
-    "@ant-design/fast-color": ^2.0.6
-    "@ant-design/icons": ^5.6.1
-    "@ant-design/react-slick": ~1.1.2
-    "@babel/runtime": ^7.26.0
-    "@rc-component/color-picker": ~2.0.1
-    "@rc-component/mutate-observer": ^1.1.0
-    "@rc-component/qrcode": ~1.0.0
-    "@rc-component/tour": ~1.15.1
-    "@rc-component/trigger": ^2.2.6
-    classnames: ^2.5.1
-    copy-to-clipboard: ^3.3.3
-    dayjs: ^1.11.11
-    rc-cascader: ~3.34.0
-    rc-checkbox: ~3.5.0
-    rc-collapse: ~3.9.0
-    rc-dialog: ~9.6.0
-    rc-drawer: ~7.2.0
-    rc-dropdown: ~4.2.1
-    rc-field-form: ~2.7.0
-    rc-image: ~7.12.0
-    rc-input: ~1.8.0
-    rc-input-number: ~9.5.0
-    rc-mentions: ~2.20.0
-    rc-menu: ~9.16.1
-    rc-motion: ^2.9.5
-    rc-notification: ~5.6.4
-    rc-pagination: ~5.1.0
-    rc-picker: ~4.11.3
-    rc-progress: ~4.0.0
-    rc-rate: ~2.13.1
-    rc-resize-observer: ^1.4.3
-    rc-segmented: ~2.7.0
-    rc-select: ~14.16.8
-    rc-slider: ~11.1.8
-    rc-steps: ~6.0.1
-    rc-switch: ~4.1.0
-    rc-table: ~7.50.5
-    rc-tabs: ~15.6.1
-    rc-textarea: ~1.10.0
-    rc-tooltip: ~6.4.0
-    rc-tree: ~5.13.1
-    rc-tree-select: ~5.27.0
-    rc-upload: ~4.9.0
-    rc-util: ^5.44.4
-    scroll-into-view-if-needed: ^3.1.0
-    throttle-debounce: ^5.0.2
-  peerDependencies:
-    react: ">=16.9.0"
-    react-dom: ">=16.9.0"
-  checksum: 78a3ea9d76b877fd59ed27ba8b162dc965e86218b5fbd44b402efd9921567e546e34c004477ed5629b02166fe8c96bfb69d8aa86e256cfa97e08d853541608e7
-  languageName: node
-  linkType: hard
-
 "any-promise@npm:^1.0.0":
   version: 1.3.0
   resolution: "any-promise@npm:1.3.0"
@@ -7947,13 +7622,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"convert-source-map@npm:^1.5.0":
-  version: 1.9.0
-  resolution: "convert-source-map@npm:1.9.0"
-  checksum: dc55a1f28ddd0e9485ef13565f8f756b342f9a46c4ae18b843fe3c30c675d058d6a4823eff86d472f187b176f0adf51ea7b69ea38be34be4a63cbbf91b0593c8
-  languageName: node
-  linkType: hard
-
 "convert-source-map@npm:^2.0.0":
   version: 2.0.0
   resolution: "convert-source-map@npm:2.0.0"
@@ -8911,13 +8579,6 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"dayjs@npm:1.10.7":
-  version: 1.10.7
-  resolution: "dayjs@npm:1.10.7"
-  checksum: a0a4ca95abaa03d0702161dc2c35d16121188e342f5052b9c61cdf784dab68af766f477c04f87f71c6af666fd4d13db9b9853b87265850d6093b7b04e1bb1cd7
-  languageName: node
-  linkType: hard
-
 "dayjs@npm:1.x, dayjs@npm:^1.11.11, dayjs@npm:^1.11.13, dayjs@npm:^1.11.7, dayjs@npm:^1.9.1":
   version: 1.11.13
   resolution: "dayjs@npm:1.11.13"
@@ -10623,7 +10284,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"fast-uri@npm:^3.0.1, fast-uri@npm:^3.0.6":
+"fast-uri@npm:^3.0.1":
   version: 3.0.6
   resolution: "fast-uri@npm:3.0.6"
   checksum: 7161ba2a7944778d679ba8e5f00d6a2bb479a2142df0982f541d67be6c979b17808f7edbb0ce78161c85035974bde3fa52b5137df31da46c0828cb629ba67c4e
@@ -10795,13 +10456,6 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"find-root@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "find-root@npm:1.1.0"
-  checksum: b2a59fe4b6c932eef36c45a048ae8f93c85640212ebe8363164814990ee20f154197505965f3f4f102efc33bfb1cbc26fd17c4a2fc739ebc51b886b137cbefaf
-  languageName: node
-  linkType: hard
-
 "find-up@npm:^4.0.0, find-up@npm:^4.1.0":
   version: 4.1.0
   resolution: "find-up@npm:4.1.0"
@@ -11666,7 +11320,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1, hoist-non-react-statics@npm:^3.3.2":
+"hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.2":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
   dependencies:
@@ -14307,17 +13961,8 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   dependencies:
     "@babel/preset-env": ^7.20.2
     "@babel/preset-typescript": ^7.18.6
-    "@emotion/react": ^11.14.0
-    "@emotion/styled": ^11.14.0
-    "@jsonforms/core": 3.5.1
-    "@jsonforms/material-renderers": ^3.5.1
-    "@jsonforms/react": 3.5.1
     "@lottiefiles/react-lottie-player": ^3.5.3
     "@remixicon/react": ^4.1.1
-    "@rjsf/antd": ^6.0.0-beta.10
-    "@rjsf/core": ^6.0.0-beta.10
-    "@rjsf/utils": ^6.0.0-beta.10
-    "@rjsf/validator-ajv8": ^6.0.0-beta.10
     "@rollup/plugin-typescript": ^12.1.0
     "@supabase/supabase-js": ^2.45.4
     "@testing-library/jest-dom": ^5.16.5
@@ -14339,13 +13984,11 @@ coolshapes-react@lowcoder-org/coolshapes-react:
     "@types/ua-parser-js": ^0.7.36
     "@welldone-software/why-did-you-render": ^6.2.3
     add: ^2.0.6
-    antd: ^5.25.3
     antd-mobile: ^5.34.0
     babel-jest: ^29.3.0
     babel-preset-react-app: ^10.0.1
     babel-preset-vite: ^1.1.3
     chalk: 4
-    dayjs: ^1.11.13
     flag-icons: ^7.2.1
     husky: ^8.0.1
     jest: ^29.5.0
@@ -14364,7 +14007,6 @@ coolshapes-react@lowcoder-org/coolshapes-react:
     rollup: ^4.22.5
     shelljs: ^0.8.5
     simplebar: ^6.2.5
-    styled-components: ^6.1.18
     svgo: ^3.0.0
     ts-node: ^10.4.0
     tui-image-editor: ^3.15.3
@@ -14470,6 +14112,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
     "@fortawesome/free-regular-svg-icons": ^6.5.1
     "@fortawesome/free-solid-svg-icons": ^6.5.1
     "@fortawesome/react-fontawesome": latest
+    "@jsonforms/core": ^3.5.1
     "@lottiefiles/dotlottie-react": ^0.13.0
     "@manaflair/redux-batch": ^1.0.0
     "@rjsf/antd": ^5.24.9
@@ -14500,6 +14143,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
     coolshapes-react: lowcoder-org/coolshapes-react
     copy-to-clipboard: ^3.3.3
     core-js: ^3.25.2
+    dayjs: ^1.11.13
     dotenv: ^16.0.3
     echarts: ^5.4.3
     echarts-for-react: ^3.0.2
@@ -14744,7 +14388,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"markdown-to-jsx@npm:^7.4.1, markdown-to-jsx@npm:^7.7.6":
+"markdown-to-jsx@npm:^7.4.1":
   version: 7.7.6
   resolution: "markdown-to-jsx@npm:7.7.6"
   peerDependencies:
@@ -16040,15 +15684,6 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"nanoid@npm:^5.1.5":
-  version: 5.1.5
-  resolution: "nanoid@npm:5.1.5"
-  bin:
-    nanoid: bin/nanoid.js
-  checksum: 6de2d006b51c983be385ef7ee285f7f2a57bd96f8c0ca881c4111461644bd81fafc2544f8e07cb834ca0f3e0f3f676c1fe78052183f008b0809efe6e273119f5
-  languageName: node
-  linkType: hard
-
 "natural-compare-lite@npm:^1.4.0":
   version: 1.4.0
   resolution: "natural-compare-lite@npm:1.4.0"
@@ -20125,13 +19760,6 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"source-map@npm:^0.5.7":
-  version: 0.5.7
-  resolution: "source-map@npm:0.5.7"
-  checksum: 5dc2043b93d2f194142c7f38f74a24670cd7a0063acdaf4bf01d2964b402257ae843c2a8fa822ad5b71013b5fcafa55af7421383da919752f22ff488bc553f4d
-  languageName: node
-  linkType: hard
-
 "source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.0, source-map@npm:~0.6.1":
   version: 0.6.1
   resolution: "source-map@npm:0.6.1"
@@ -20637,7 +20265,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"styled-components@npm:^6.1.18, styled-components@npm:^6.1.8":
+"styled-components@npm:^6.1.8":
   version: 6.1.18
   resolution: "styled-components@npm:6.1.18"
   dependencies:
@@ -20657,13 +20285,6 @@ coolshapes-react@lowcoder-org/coolshapes-react:
   languageName: node
   linkType: hard
 
-"stylis@npm:4.2.0":
-  version: 4.2.0
-  resolution: "stylis@npm:4.2.0"
-  checksum: 0eb6cc1b866dc17a6037d0a82ac7fa877eba6a757443e79e7c4f35bacedbf6421fadcab4363b39667b43355cbaaa570a3cde850f776498e5450f32ed2f9b7584
-  languageName: node
-  linkType: hard
-
 "stylis@npm:4.3.2":
   version: 4.3.2
   resolution: "stylis@npm:4.3.2"
diff --git a/package.json b/package.json
index 3fccf0c143..f96318c1f6 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,6 @@
     "typescript": "^5.6.2"
   },
   "dependencies": {
-    "@jsonforms/core": "^3.5.1",
-    "@jsonforms/react": "^3.5.1",
     "axios": "^1.7.7",
     "fs": "^0.0.1-security",
     "path": "^0.12.7"
diff --git a/yarn.lock b/yarn.lock
index c655e3a33d..ba9170c70d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -27,23 +27,6 @@
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
 
-"@jsonforms/core@^3.5.1":
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/@jsonforms/core/-/core-3.5.1.tgz#1c8aa9323bb80677bbd538022f4d8e039516fef0"
-  integrity sha512-Jrq/UcfvKsAprLJ+9TMFa8pKsfdyv3dAw85XstSNRcjDT19LreBlhVqIvTvtgZidg8Iet3yqy5xlNnB+XyrvrQ==
-  dependencies:
-    "@types/json-schema" "^7.0.3"
-    ajv "^8.6.1"
-    ajv-formats "^2.1.0"
-    lodash "^4.17.21"
-
-"@jsonforms/react@^3.5.1":
-  version "3.5.1"
-  resolved "https://registry.yarnpkg.com/@jsonforms/react/-/react-3.5.1.tgz#30e3b75afaf678848ca7f7fb0d39c8499a719e96"
-  integrity sha512-fQwCpzyNcf0FruYhc46dK6GfCcX09HkRX2PGYir7dllQPRI1axHd6t98To/h+48/L2PkFdRMGMCcIsoTXNC1qg==
-  dependencies:
-    lodash "^4.17.21"
-
 "@tsconfig/node10@^1.0.7":
   version "1.0.11"
   resolved "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz"
@@ -64,11 +47,6 @@
   resolved "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz"
   integrity sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==
 
-"@types/json-schema@^7.0.3":
-  version "7.0.15"
-  resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz"
-  integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
-
 acorn-walk@^8.1.1:
   version "8.3.4"
   resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz"
@@ -81,23 +59,6 @@ acorn@^8.11.0, acorn@^8.4.1:
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz"
   integrity sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==
 
-ajv-formats@^2.1.0:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz"
-  integrity sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==
-  dependencies:
-    ajv "^8.0.0"
-
-ajv@^8.0.0, ajv@^8.6.1:
-  version "8.17.1"
-  resolved "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz"
-  integrity sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==
-  dependencies:
-    fast-deep-equal "^3.1.3"
-    fast-uri "^3.0.1"
-    json-schema-traverse "^1.0.0"
-    require-from-string "^2.0.2"
-
 arg@^4.1.0:
   version "4.1.3"
   resolved "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz"
@@ -144,16 +105,6 @@ esm@^3.2.25:
   resolved "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz"
   integrity sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==
 
-fast-deep-equal@^3.1.3:
-  version "3.1.3"
-  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
-  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
-
-fast-uri@^3.0.1:
-  version "3.0.6"
-  resolved "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz"
-  integrity sha512-Atfo14OibSv5wAp4VWNsFYE1AchQRTv9cBGWET4pZWHzYshFSS9NQI6I57rdKn9croWVMbYFbLhJ+yJvmZIIHw==
-
 follow-redirects@^1.15.6:
   version "1.15.9"
   resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz"
@@ -178,16 +129,6 @@ inherits@2.0.3:
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz"
   integrity sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==
 
-json-schema-traverse@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz"
-  integrity sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==
-
-lodash@^4.17.21:
-  version "4.17.21"
-  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
-  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
-
 make-error@^1.1.1:
   version "1.3.6"
   resolved "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz"
@@ -223,11 +164,6 @@ proxy-from-env@^1.1.0:
   resolved "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz"
   integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
 
-require-from-string@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz"
-  integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
-
 ts-node@^10.9.2:
   version "10.9.2"
   resolved "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz"

From 9954a49dfed7f378e2cc9306c1d633fe6777d4e4 Mon Sep 17 00:00:00 2001
From: Kamal Qureshi <kamal.qureshi@nmxglobalsoftware.com>
Date: Fri, 30 May 2025 20:45:46 +0500
Subject: [PATCH 5/5] Error handling in JSONForms

---
 .../jsonSchemaFormComp/JsonFormsRenderer.tsx  | 382 ++++++++++--------
 .../jsonSchemaFormComp/jsonSchemaFormComp.tsx |  45 ++-
 .../comps/comps/jsonSchemaFormComp/types.ts   |  95 +++++
 translations/locales/en.js                    |   2 +
 4 files changed, 337 insertions(+), 187 deletions(-)
 create mode 100644 client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/types.ts

diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/JsonFormsRenderer.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/JsonFormsRenderer.tsx
index 0d9d4f8657..cbdab8a0ff 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/JsonFormsRenderer.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/JsonFormsRenderer.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect } from "react";
+import React, { useState, useCallback, useEffect, ReactNode } from "react";
 import {
   Form,
   Input,
@@ -17,10 +17,20 @@ import {
 import styled from "styled-components";
 import type { JsonSchema } from "@jsonforms/core";
 import type { JSONSchema7 } from "json-schema";
-import debounce from "lodash/debounce";
+import { debounce } from "lodash";
 import dayjs from "dayjs";
 import { trans } from "i18n";
-
+import type { 
+  JsonFormsUiSchema, 
+  FieldUiSchema, 
+  Layout, 
+  Categorization,
+  ValidationState,
+  JsonFormsRendererProps,
+  Category,
+  Control
+} from "./types";
+import type { SwitchChangeEventHandler } from "antd/es/switch";
 const { TextArea } = Input;
 
 const Container = styled.div`
@@ -52,90 +62,11 @@ const Container = styled.div`
   }
 `;
 
-interface Category {
-  type: "Category";
-  label?: string;
-  i18n?: string;
-  elements: Array<Control | Layout>;
-  rule?: {
-    effect: "SHOW" | "HIDE";
-    condition: {
-      scope: string;
-      schema: {
-        const: any;
-      };
-    };
-  };
-}
-
-interface Control {
-  type: "Control";
-  scope: string;
-  options?: {
-    multi?: boolean;
-    slider?: boolean;
-    restrict?: boolean;
-  };
-  rule?: {
-    effect: "SHOW" | "HIDE";
-    condition: {
-      scope: string;
-      schema: {
-        const: any;
-      };
-    };
-  };
-}
-
 interface HorizontalLayout {
   type: "HorizontalLayout";
   elements: Control[];
 }
 
-type Layout = HorizontalLayout;
-
-interface Categorization {
-  type: "Categorization";
-  elements: Category[];
-  options?: {
-    variant?: "tabs" | "stepper";
-    showNavButtons?: boolean;
-  };
-}
-
-interface FieldUiSchema {
-  type?: string;
-  scope?: string;
-  options?: {
-    multi?: boolean;
-    slider?: boolean;
-    restrict?: boolean;
-  };
-  [key: string]: any;
-}
-
-export interface JsonFormsUiSchema {
-  type?: string;
-  elements?: Array<Category | Control | Layout>;
-  options?: {
-    variant?: "tabs" | "stepper";
-    showNavButtons?: boolean;
-  };
-  [key: string]: FieldUiSchema | JsonFormsUiSchema | any;
-}
-
-export interface JsonFormsRendererProps {
-  schema: JsonSchema;
-  data: any;
-  onChange: (data: any) => void;
-  style?: any;
-  showVerticalScrollbar?: boolean;
-  autoHeight?: boolean;
-  resetAfterSubmit?: boolean;
-  uiSchema?: JsonFormsUiSchema;
-  onSubmit?: () => void;
-}
-
 const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
   schema,
   data,
@@ -144,12 +75,29 @@ const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
   uiSchema,
   onSubmit,
   resetAfterSubmit,
+  validationState: externalValidationState,
+  onValidationChange,
 }) => {
   // Local state to handle immediate updates
   const [localData, setLocalData] = useState(data);
   // Track focused field
   const [focusedField, setFocusedField] = useState<string | null>(null);
   const [currentStep, setCurrentStep] = useState(0);
+  const [internalValidationState, setInternalValidationState] = useState<ValidationState>({});
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  // Use external validation state if provided, otherwise use internal
+  const validationState = externalValidationState || internalValidationState;
+  const setValidationState = useCallback((newState: ValidationState | ((prev: ValidationState) => ValidationState)) => {
+    if (typeof newState === 'function') {
+      const updatedState = newState(validationState);
+      setInternalValidationState(updatedState);
+      onValidationChange?.(updatedState);
+    } else {
+      setInternalValidationState(newState);
+      onValidationChange?.(newState);
+    }
+  }, [validationState, onValidationChange]);
 
   // Update local data when prop data changes
   useEffect(() => {
@@ -218,8 +166,8 @@ const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
       return (
         <Row gutter={16}>
           {layout.elements
-            .filter(shouldShowElement)
-            .map((element, index) => (
+            .filter((element: Control) => shouldShowElement(element))
+            .map((element: Control, index: number) => (
               <Col key={index} span={24 / layout.elements.length}>
                 {renderControl(element)}
               </Col>
@@ -269,25 +217,137 @@ const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
     return (
       <div key={category.label}>
         {category.elements
-          .filter(shouldShowElement)
-          .map((element, index) => {
+          .filter((element: Control | Layout) => shouldShowElement(element))
+          .map((element: Control | Layout, index: number) => {
             if (element.type === "Control") {
-              return <div key={index}>{renderControl(element)}</div>;
+              return <div key={index}>{renderControl(element as Control)}</div>;
             } else if (element.type === "HorizontalLayout") {
-              return <div key={index}>{renderLayout(element)}</div>;
+              return <div key={index}>{renderLayout(element as Layout)}</div>;
             }
             return null;
           })}
       </div>
     );
   };
+  // Add validation function  
+  const validateField = useCallback((path: string, value: any, fieldSchema: any) => {
+    const errors: string[] = [];
+    
+    // Required field validation - check if field name is in schema.required array
+    const fieldName = path.split('.').pop() || '';
+    if (schema.required?.includes(fieldName) && (value === undefined || value === null || value === '')) {
+      errors.push('This field is required');
+    }
+
+    // Type-specific validation
+    if (value !== undefined && value !== null) {
+      switch (fieldSchema.type) {
+        case 'string':
+          if (fieldSchema.minLength && value.length < fieldSchema.minLength) {
+            errors.push(`Minimum length is ${fieldSchema.minLength}`);
+          }
+          if (fieldSchema.maxLength && value.length > fieldSchema.maxLength) {
+            errors.push(`Maximum length is ${fieldSchema.maxLength}`);
+          }
+          if (fieldSchema.pattern && !new RegExp(fieldSchema.pattern).test(value)) {
+            errors.push('Invalid format');
+          }
+          break;
+        case 'number':
+        case 'integer':
+          if (fieldSchema.minimum !== undefined && value < fieldSchema.minimum) {
+            errors.push(`Minimum value is ${fieldSchema.minimum}`);
+          }
+          if (fieldSchema.maximum !== undefined && value > fieldSchema.maximum) {
+            errors.push(`Maximum value is ${fieldSchema.maximum}`);
+          }
+          break;
+      }
+    }
+
+    return errors;
+  }, [])
+  // Helper to get value at a dot-separated path
+  const getValueAtPath = (obj: any, path: string) => {
+    if (!path) return obj;
+    return path.split('.').reduce((acc, part) => (acc ? acc[part] : undefined), obj);
+  };
+  // Update validation state when data changes
+  useEffect(() => {
+    if (isSubmitted) {
+      const newValidationState: ValidationState = {};
+      const validateObject = (obj: any, schema: any, path: string = '') => {
+        if (schema.properties) {
+          Object.entries(schema.properties).forEach(([key, fieldSchema]: [string, any]) => {
+            const fullPath = path ? `${path}.${key}` : key;
+            const value = getValueAtPath(obj, key);
+            newValidationState[fullPath] = {
+              errors: validateField(fullPath, getValueAtPath(obj, key), fieldSchema),
+              touched: true
+            };
+            if (fieldSchema.type === 'object' && fieldSchema.properties) {
+              validateObject(getValueAtPath(obj, key) || {}, fieldSchema, fullPath);
+            }
+          });
+        }
+      };
+      validateObject(data, schema);
+      setValidationState(newValidationState);
+    }
+  }, [data, schema, validateField, isSubmitted]);
+  const handleValueChange = (newValue: any, fieldKey: string, fieldPath?: string) => {
+    const newData = { ...localData };
+    if (fieldPath) {
+      const pathParts = fieldPath.split(".");
+      let current = newData;
+      for (let i = 0; i < pathParts.length; i++) {
+        if (i === pathParts.length - 1) {
+          current[pathParts[i]] = {
+            ...current[pathParts[i]],
+            [fieldKey]: newValue,
+          };
+        } else {
+          current = current[pathParts[i]];
+        }
+      }
+    } else {
+      newData[fieldKey] = newValue;
+    }
+
+    setLocalData(newData);
+    debouncedOnChange(newData);
+  };
+
+  const createInputHandler = (fieldKey: string, fieldPath?: string) => {
+    return (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      handleValueChange(e.target.value, fieldKey, fieldPath);
+    };
+  };
+
+  const createNumberHandler = (fieldKey: string, fieldPath?: string) => {
+    return (value: number | null) => {
+      handleValueChange(value, fieldKey, fieldPath);
+    };
+  };
+
+  const createSwitchHandler = (fieldKey: string, fieldPath?: string) => {
+    return (checked: boolean) => {
+      handleValueChange(checked, fieldKey, fieldPath);
+    };
+  };
+
+  const createArrayHandler = (fieldKey: string, fieldPath?: string) => {
+    return (newItems: any[]) => {
+      handleValueChange(newItems, fieldKey, fieldPath);
+    };
+  };
 
   const renderField = (
     key: string,
     fieldSchema: any,
     value: any,
     path: string = ""
-  ) => {
+  ): ReactNode => {
     const fullPath = path ? `${path}.${key}` : key;
     const label = fieldSchema.title || key;
     const required = schema.required?.includes(key);
@@ -296,39 +356,39 @@ const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
     const isSlider = uiSchemaForField?.options?.slider === true;
     const isRestrict = uiSchemaForField?.options?.restrict === true;
     const isFocused = focusedField === fullPath;
-
-    const handleFocus = () => setFocusedField(fullPath);
-    const handleBlur = () => setFocusedField(null);
-
-    const handleChange = (newValue: any) => {
-      const newData = { ...localData };
-      if (path) {
-        const pathParts = path.split(".");
-        let current = newData;
-        for (let i = 0; i < pathParts.length; i++) {
-          if (i === pathParts.length - 1) {
-            current[pathParts[i]] = {
-              ...current[pathParts[i]],
-              [key]: newValue,
-            };
-          } else {
-            current = current[pathParts[i]];
+    const fieldValidation = validationState[fullPath];
+    const showErrors = isSubmitted && fieldValidation?.touched;
+
+    const handleFocus = () => setFocusedField(fullPath);    const handleBlur = () => {
+      setFocusedField(null);
+      // Validate field on blur
+      const errors = validateField(fullPath, value, fieldSchema);
+      setValidationState(prev => {
+        const newState = {
+          ...prev,
+          [fullPath]: {
+            errors,
+            touched: true
           }
-        }
-      } else {
-        newData[key] = newValue;
-      }
+        };
+        return newState;
+      });
+    };
 
-      // Update local state immediately
-      setLocalData(newData);
-      // Debounce the parent update
-      debouncedOnChange(newData);
+    // Modify Form.Item to include validation    
+    const formItemProps = {
+      key: fullPath,
+      label: label,
+      required: required,
+      extra: isFocused ? fieldSchema.description : undefined,
+      validateStatus: (fieldValidation?.touched && fieldValidation?.errors.length ? 'error' : undefined) as "" | "error" | "success" | "warning" | "validating" | undefined,
+      help: fieldValidation?.touched ? fieldValidation?.errors.join(', ') : undefined,
     };
 
     // Handle nested objects
     if (fieldSchema.type === "object" && fieldSchema.properties) {
       return (
-        <Form.Item key={fullPath} label={label} required={required}>
+        <Form.Item {...formItemProps}>
           <Space direction="vertical" style={{ width: "100%" }}>
             {Object.entries(fieldSchema.properties).map(
               ([subKey, subSchema]: [string, any]) =>
@@ -343,7 +403,7 @@ const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
     if (fieldSchema.type === "array") {
       const items = value || [];
       return (
-        <Form.Item key={fullPath} label={label} required={required}>
+        <Form.Item {...formItemProps}>
           <Space direction="vertical" style={{ width: "100%" }}>
             {items.map((item: any, index: number) => (
               <Space key={index}>
@@ -354,14 +414,14 @@ const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
                   onClick={() => {
                     const newItems = [...items];
                     newItems.splice(index, 1);
-                    handleChange(newItems);
+                    handleValueChange(newItems, key, fullPath);
                   }}
                 >
                   Remove
                 </Button>
               </Space>
             ))}
-            <Button type="dashed" onClick={() => handleChange([...items, ""])}>
+            <Button type="dashed" onClick={() => handleValueChange([...items, ""], key, fullPath)}>
               Add Item
             </Button>
           </Space>
@@ -374,20 +434,15 @@ const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
       case "string":
         if (fieldSchema.format === "date") {
           return (
-            <Form.Item 
-              key={fullPath} 
-              label={label} 
-              required={required}
-              extra={isFocused ? fieldSchema.description : undefined}
-            >
+            <Form.Item {...formItemProps}>
               <DatePicker
                 style={{ width: "100%" }}
                 value={value ? dayjs(value).isValid() ? dayjs(value) : null : null}
                 onChange={(date) => {
                   if (date && date.isValid()) {
-                    handleChange(date.format('YYYY-MM-DD'));
+                    handleValueChange(date.format('YYYY-MM-DD'), key, path);
                   } else {
-                    handleChange(null);
+                    handleValueChange(null, key, path);
                   }
                 }}
                 onFocus={handleFocus}
@@ -406,16 +461,11 @@ const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
         }
         if (fieldSchema.enum) {
           return (
-            <Form.Item 
-              key={fullPath} 
-              label={label} 
-              required={required}
-              extra={isFocused ? fieldSchema.description : undefined}
-            >
+            <Form.Item {...formItemProps}>
               <Select
                 style={{ width: "100%" }}
                 value={value}
-                onChange={handleChange}
+                onChange={(newValue) => handleValueChange(newValue, key, path)}
                 onFocus={handleFocus}
                 onBlur={handleBlur}
                 options={fieldSchema.enum.map((option: string) => ({
@@ -429,15 +479,10 @@ const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
         // Check if this field should be multiline
         if (isMultiline) {
           return (
-            <Form.Item 
-              key={fullPath} 
-              label={label} 
-              required={required}
-              extra={isFocused ? fieldSchema.description : undefined}
-            >
+            <Form.Item {...formItemProps}>
               <TextArea
                 value={value || ""}
-                onChange={(e) => handleChange(e.target.value)}
+                onChange={createInputHandler(key, path)}
                 onFocus={handleFocus}
                 onBlur={handleBlur}
                 autoComplete="off"
@@ -449,15 +494,10 @@ const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
           );
         }
         return (
-          <Form.Item 
-            key={fullPath} 
-            label={label} 
-            required={required}
-            extra={isFocused ? fieldSchema.description : undefined}
-          >
+          <Form.Item {...formItemProps}>
             <Input
               value={value || ""}
-              onChange={(e) => handleChange(e.target.value)}
+              onChange={createInputHandler(key, path)}
               onFocus={handleFocus}
               onBlur={handleBlur}
               autoComplete="off"
@@ -470,19 +510,14 @@ const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
       case "number":
       case "integer":
         return (
-          <Form.Item 
-            key={fullPath} 
-            label={label} 
-            required={required}
-            extra={isFocused ? fieldSchema.description : undefined}
-          >
+          <Form.Item {...formItemProps}>
             {isSlider ? (
               <Slider
                 style={{ width: "100%" }}
                 min={fieldSchema.minimum}
                 max={fieldSchema.maximum}
                 value={value}
-                onChange={handleChange}
+                onChange={createNumberHandler(key, path)}
                 onFocus={handleFocus}
                 onBlur={handleBlur}
               />
@@ -490,7 +525,7 @@ const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
               <InputNumber
                 style={{ width: "100%" }}
                 value={value}
-                onChange={handleChange}
+                onChange={createNumberHandler(key, path)}
                 onFocus={handleFocus}
                 onBlur={handleBlur}
                 min={fieldSchema.minimum}
@@ -499,7 +534,12 @@ const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
                 formatter={(value) =>
                   `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")
                 }
-                parser={(value) => value!.replace(/\$\s?|(,*)/g, "")}
+                parser={(value: string | undefined) => {
+                  if (!value) return NaN;
+                  const parsed = value.replace(/\$\s?|,*/g, "");
+                  const num = Number(parsed);
+                  return isNaN(num) ? NaN : num;
+                }}
               />
             )}
           </Form.Item>
@@ -507,17 +547,11 @@ const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
 
       case "boolean":
         return (
-          <Form.Item
-            key={fullPath}
-            label={label}
-            required={required}
-            valuePropName="checked"
-            extra={isFocused ? fieldSchema.description : undefined}
-          >
+          <Form.Item {...formItemProps} valuePropName="checked">
             <div onFocus={handleFocus} onBlur={handleBlur}>
               <Switch 
                 checked={value} 
-                onChange={handleChange}
+                onChange={createSwitchHandler(key, path)}
               />
             </div>
           </Form.Item>
@@ -525,15 +559,10 @@ const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
 
       default:
         return (
-          <Form.Item 
-            key={fullPath} 
-            label={label} 
-            required={required}
-            extra={isFocused ? fieldSchema.description : undefined}
-          >
+          <Form.Item {...formItemProps}>
             <Input
               value={value || ""}
-              onChange={(e) => handleChange(e.target.value)}
+              onChange={createInputHandler(key, path)}
               onFocus={handleFocus}
               onBlur={handleBlur}
               autoComplete="off"
@@ -543,12 +572,17 @@ const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
         );
     }
   };
-
   const handleSubmit = () => {
-    if (onSubmit) {
+    setIsSubmitted(true);
+    
+    // Check if there are any validation errors
+    const hasErrors = Object.values(validationState).some((state: ValidationState[string]) => state.errors.length);
+    if (!hasErrors && onSubmit) {
       onSubmit();
       if (resetAfterSubmit) {
         setCurrentStep(0);
+        setIsSubmitted(false);
+        setValidationState({});
       }
     }
   };
@@ -556,7 +590,7 @@ const JsonFormsRenderer: React.FC<JsonFormsRendererProps> = ({
   if (uiSchema?.type === "Categorization") {
     const categorization = uiSchema as Categorization;
     const variant = categorization.options?.variant || "tabs";
-    const visibleCategories = categorization.elements.filter(shouldShowElement);
+    const visibleCategories = categorization.elements.filter((category: Category) => shouldShowElement(category));
     const isLastStep = currentStep === visibleCategories.length - 1;
 
     const handleNext = () => {
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
index d37fc40a4a..f0b83c4f53 100644
--- a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/jsonSchemaFormComp.tsx
@@ -31,7 +31,7 @@ import Title from 'antd/es/typography/Title';
 import { dropdownControl } from 'comps/controls/dropdownControl';
 import JsonFormsRenderer from "./JsonFormsRenderer";
 import { UISchemaElement } from "@jsonforms/core";
-import type { JsonFormsUiSchema } from "./JsonFormsRenderer";
+import type { JsonFormsUiSchema, ValidationState } from "./types";
 
 Theme.widgets.DateWidget = DateWidget(false);
 Theme.widgets.DateTimeWidget = DateWidget(true);
@@ -233,6 +233,7 @@ let FormBasicComp = (function () {
         __errors: ["Custom error for specific field"]
       }
     }),
+    validationState: jsonObjectExposingStateControl("validationState", {}),
   };
 
   return new UICompBuilder(childrenMap, (props) => {
@@ -294,8 +295,8 @@ let FormBasicComp = (function () {
       });
 
       return extraErrors;
-    };
-
+    };   
+    
     return (
       <ContainerWidthContext.Provider value={containerWidth}>
         <Container $style={props.style} $animationStyle={props.animationStyle} ref={containerRef}>
@@ -343,18 +344,26 @@ let FormBasicComp = (function () {
                       </Button>
                     }
                   />
-                </>
-              ) : (
-                <JsonFormsRenderer
+                </>) 
+                :( <JsonFormsRenderer
                   schema={props.schema}
                   data={props.data.value}
-                  onChange={(newData: any) => props.data.onChange(newData)}
+                  onChange={(newData: any) => {
+                    props.data.onChange(newData);
+                  }}
                   style={props.style}
                   showVerticalScrollbar={props.showVerticalScrollbar}
                   autoHeight={props.autoHeight}
                   resetAfterSubmit={props.resetAfterSubmit}
                   uiSchema={props.uiSchema as JsonFormsUiSchema}
-                  onSubmit={() => onSubmit(props)}
+                  onSubmit={() => {
+                    return onSubmit(props);
+                  }}
+                  validationState={props.validationState.value}
+                  showValidation={true}
+                  onValidationChange={(newValidationState: ValidationState) => {
+                    props.validationState.onChange(newValidationState);
+                  }}
                 />
               )}
             </ErrorBoundary>
@@ -467,11 +476,21 @@ let FormBasicComp = (function () {
                 key: trans("jsonSchemaForm.defaultData"),
                 label: trans("jsonSchemaForm.defaultData"),
               })}
-              {children.formType.getView() === "rjsf" && children.errorSchema.propertyView({
-                key: "errorSchema",
-                label: trans("jsonSchemaForm.errorSchema"),
-                tooltip: "Define custom error messages for form fields. Use __errors array for field-specific errors.",
-              })}
+              {children.formType.getView() === "rjsf" && (
+                children.errorSchema.propertyView({
+                  key: "errorSchema",
+                  label: trans("jsonSchemaForm.errorSchema"),
+                  tooltip: "Define custom error messages for form fields. Use __errors array for field-specific errors.",
+                })
+              ) 
+              // : (
+              //   children.validationState.propertyView({
+              //     key: "validationState",
+              //     label: trans("jsonSchemaForm.validationState"),
+              //     tooltip: "Current validation state of the form fields. Shows errors and touched state for each field.",
+              //   })
+              // )
+              }
             </Section>
           )}
 
diff --git a/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/types.ts b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/types.ts
new file mode 100644
index 0000000000..ee6e7d13d9
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/jsonSchemaFormComp/types.ts
@@ -0,0 +1,95 @@
+import type { JsonSchema } from "@jsonforms/core";
+
+export interface FieldUiSchema {
+  type?: string;
+  scope?: string;
+  options?: {
+    multi?: boolean;
+    slider?: boolean;
+    restrict?: boolean;
+  };
+  [key: string]: any;
+}
+
+export interface JsonFormsUiSchema {
+  type?: string;
+  elements?: Array<Category | Control | Layout>;
+  options?: {
+    variant?: "tabs" | "stepper";
+    showNavButtons?: boolean;
+  };
+  [key: string]: FieldUiSchema | JsonFormsUiSchema | any;
+}
+
+export interface Category {
+  type: "Category";
+  label?: string;
+  i18n?: string;
+  elements: Array<Control | Layout>;
+  rule?: {
+    effect: "SHOW" | "HIDE";
+    condition: {
+      scope: string;
+      schema: {
+        const: any;
+      };
+    };
+  };
+}
+
+export interface Control {
+  type: "Control";
+  scope: string;
+  options?: {
+    multi?: boolean;
+    slider?: boolean;
+    restrict?: boolean;
+  };
+  rule?: {
+    effect: "SHOW" | "HIDE";
+    condition: {
+      scope: string;
+      schema: {
+        const: any;
+      };
+    };
+  };
+}
+
+export interface HorizontalLayout {
+  type: "HorizontalLayout";
+  elements: Control[];
+}
+
+export type Layout = HorizontalLayout;
+
+export interface Categorization {
+  type: "Categorization";
+  elements: Category[];
+  options?: {
+    variant?: "tabs" | "stepper";
+    showNavButtons?: boolean;
+  };
+}
+
+export interface ValidationState {
+  [key: string]: {
+    errors: string[];
+    touched: boolean;
+  } | any;
+}
+
+export interface JsonFormsRendererProps {
+  schema: JsonSchema;
+  data: any;
+  onChange: (data: any) => void;
+  style?: any;
+  showVerticalScrollbar?: boolean;
+  showValidation?: boolean;
+  autoHeight?: boolean;
+  resetAfterSubmit?: boolean;
+  uiSchema?: JsonFormsUiSchema;
+  onSubmit?: () => void;
+  validationState?: ValidationState; 
+  onValidationChange?: (validationState: ValidationState) => void;
+} 
\ No newline at end of file
diff --git a/translations/locales/en.js b/translations/locales/en.js
index d2ad74b1cc..07f0ee017b 100644
--- a/translations/locales/en.js
+++ b/translations/locales/en.js
@@ -1203,6 +1203,8 @@ export const en = {
         "format": "Should Match the Format {value}",
         "errorSchema": "Error Schema",
         "formType": "Form Type",
+        "errorSchema": "Error Schema",
+        "validationState": "Validation State",
     },
     "select": {
         "inputValueDesc": "Input Search Value"