Introducing DripForm: An Open‑Source React Dynamic Form Solution

DripForm is an open‑source React form component released by JD Retail iPaaS. It provides a flexible, configuration‑driven solution for rendering, validation, and visual editing of complex forms, aiming to improve development efficiency and reduce maintenance costs in B‑end business scenarios.

The background highlights that forms are a frequent and complex part of CMS and other B‑end applications, often requiring asynchronous logic, nested dependencies, and consistent front‑end/back‑end validation. Poor initial planning can lead to tangled if/else or switch statements, increasing long‑term maintenance overhead.

Key highlights and differentiators of DripForm include a semantic JSON protocol, integrated validation powered by AJV for unified front‑end/back‑end checks, a visual schema builder, extensibility for custom components and validators, and automation that can generate initial form data from the schema.

How to use : DripForm can be installed as an npm module and used directly or together with a visual generator. Example installation command:

npm install @jdfed/drip-form @jdfed/drip-form-theme-xxx

Basic usage in a React component:

import React, { memo } from 'react'
import DripForm from '@jdfed/drip-form'
import dripTheme from '@jdfed/drip-form-theme-xxx'
import '@jdfed/drip-form-theme/dist/index.css'
import unitedSchema from './unitedSchema.json'

const Form = memo(() => {
  return
})

The architecture is designed to lower the maintenance cost of team form development by offering easy‑to‑use, extensible mechanisms for linkage, validation, asynchronous data fetching, and custom form elements.

Core functional modules include UI rendering, validation (using JSON Schema and AJV), linkage (event broadcasting), extensibility (custom component and validator sets), and a visual generator for low‑code form creation.

The protocol is split into an external unitedSchema and internal dataSchema (JSON Schema) and uiSchema . A simple data example:

{
  name: '张三',
  age: 18
}

Corresponding dataSchema :

{
  "type": "object",
  "properties": {
    "name": { "title": "姓名", "type": "string" },
    "age": { "title": "年龄", "type": "number" }
  }
}

Adding validation rules (required, length, custom error messages) yields:

{
  "type": "object",
  "required": ["name"],
  "errorMessage": { "required": { "name": "必填" } },
  "properties": {
    "name": {
      "title": "姓名",
      "type": "string",
      "minLength": 2,
      "maxLength": 4,
      "errorMessage": { "minLength": "最小输入2", "maxLength": "最大输入4" }
    },
    "age": { "title": "年龄", "type": "number" }
  }
}

After adding UI descriptors, the schema becomes:

{
  "type": "object",
  "schema": [
    {
      "title": "姓名",
      "type": "string",
      "minLength": 2,
      "maxLength": 4,
      "requiredMsg": "必填",
      "errorMessage": { "minLength": "最小输入2", "maxLength": "最大输入4" },
      "ui": { "type": "text" },
      "fieldKey": "name"
    },
    {
      "title": "年龄",
      "type": "number",
      "ui": { "type": "number" },
      "fieldKey": "age"
    }
  ]
}

Optimizations replace the unordered properties keyword with an ordered schema array and introduce a fieldKey for identification, as well as a global ui object for component props.

The final unified schema example:

{
  "validateTime": "change",
  "type": "object",
  "theme": "drip-design",
  "schema": [
    {
      "title": "名字",
      "type": "string",
      "minLength": 2,
      "maxLength": 4,
      "errMsg": { "minLength": "最小输入2位", "maxLength": "最大输入4位", "_": "错误兜底文案" },
      "ui": {
        "type": "text",
        "placeholder": "请输入姓名",
        "description": { "type": "icon", "title": "hover触发提示", "trigger": "hover" }
      },
      "requiredMsg": "必填",
      "fieldKey": "name"
    }
  ]
}

The core module loads theme packages, validation plugins, manages global state with hooks, Immer, and memo, and parses the protocol. Global state is handled without an external library; a top‑level component exposes methods via useImperativeHandle for external access to form data, validation status, and UI logic.

The theme system allows switching between different UI libraries (e.g., Ant Design, custom JD themes) by configuring theme and uiComponents . A visual example demonstrates dynamic theme switching.

Validation relies on JSON Schema and AJV, with built‑in plugins for errors, formats, and keywords, while also supporting custom validator extensions.

The visual generator, provided as an npm package, offers a drag‑and‑drop canvas, component palette, and property panel, enabling low‑code form creation that itself is built on DripForm.

Use‑case screenshots illustrate DripFormGenerator in action, showing how developers can rapidly assemble forms without writing extensive code.

In conclusion, DripForm aims to streamline form development, reduce duplication between front‑end and back‑end validation, and foster an open‑source community for continuous improvement.

References :

Form documentation: https://jdfed.github.io/drip-form/docs/

GitHub repository: https://github.com/JDFED/drip-form

Drip Table: http://drip-table.jd.com/

Micro‑frontend resources: https://micro-zoe.github.io/micro-app/