TypeScript icon, indicating that this package has built-in type declarations

    4.4.0 • Public • Published


    NPM version NPM version NPM version NPM version


    Antd-schema-form based Ant Design, quickly generate interactive forms with JSON Schema configuration.

    This [Demo] ( simply shows how to construct a form by configuring schema.json.

    Start using

    1. Before using, you need to configure antd in the babel on-demand loading.
    2. You need to configure the babel-loader as follows:
      test: /node_modules[\\/]antd-schema-form[\\/].*\.jsx?$/,
      use: [
          loader: 'babel-loader',
          options: {
            plugins: [
                  libraryName: 'antd',
                  libraryDirectory: 'es',
                  style: 'css'
    1. React version >=16.7.0.
    2. Use of components:
    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    import SchemaForm, {
      getKeysFromObject,  // Get all the keys under schema.json
      getObjectFromValue, // Object formatted into the value required by the form
      getValueFromObject  // The value of the form obtained from the form, formatted into an object
    } from 'antd-schema-form';
    import 'antd-schema-form/style/antd-schema-form.css'; // Introducing style
    // json schema
    const json = {
      id: '$root',
      type: 'object',
      title: '$root',
      properties: {}
      <SchemaForm json={ json } />,


    Parameter Description Type
    json Json schema, required. object
    value Form value. object
    onOk Form confirmation event. (form: object, value: object, keys: Array<string>) => void
    onCancel Form cancellation event. (form: object, keys: Array<string>) => void
    okText Confirm button text. string
    cancelText Cancel button text. string
    footer Custom bottom content, onOk event reference (form: object) => React.Node
    customComponent Custom rendering component, reference object
    customTableRender Custom table column rendering component, reference object
    languagePack Language configuration, reference object
    formOptions Options of Form, reference object

    Json schema configuration

    Custom rendering component

    Load components as needed

    Development and testing

    • Run the command npm run dev, enter in the browser to view the demo and develop.
    • Run the command npm run build and npm run test, and run in the browser to run the test case.


    npm i antd-schema-form

    DownloadsWeekly Downloads






    Unpacked Size

    205 kB

    Total Files


    Last publish


    • duan602728596