# form-render

> 通过 JSON Schema 生成标准 Form，常用于自定义搭建配置界面生成

Latest version **2.5.6** (published 2025-09-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install form-render
pnpm add form-render
yarn add form-render
bun add form-render
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 2.5.6 |
| Published | 2025-09-15 |
| First published | 2019-02-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 10 |
| Unpacked size | 762.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7856 |
| Maintainers | karzanonline, tw93, zhusijia, shinne_you, charleyloveslylla, mzl980425, lhbxs |
| Keywords | Form, FormRender, Render, XRender, React, Json Schema, Ant Design |

## Links

- npm: https://www.npmjs.com/package/form-render
- Repository: https://github.com/alibaba/form-render
- Homepage: https://xrender.fun/form-render
- Issues: https://github.com/alibaba/x-render/issues
- npm.io page: https://npm.io/package/form-render

## Dependencies (10)

- [color](https://npm.io/package/color.md) ^3.1.2
- [dayjs](https://npm.io/package/dayjs.md) ^1.11.7
- [ahooks](https://npm.io/package/ahooks.md) ^3.7.5
- [zustand](https://npm.io/package/zustand.md) ^4.1.5
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21
- [classnames](https://npm.io/package/classnames.md) ^2.3.1
- [async-validator](https://npm.io/package/async-validator.md) ^3.5.1
- [rc-color-picker](https://npm.io/package/rc-color-picker.md) ^1.2.6
- [@ant-design/icons](https://npm.io/package/@ant-design/icons.md) ^4.0.2
- [virtualizedtableforantd4](https://npm.io/package/virtualizedtableforantd4.md) ^1.1.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.5.6 (latest) — 2025-09-15
- 2.5.4-beta.1 (beta) — 2025-07-01
- 1.14.17 (previous) — 2023-06-30
- 0.3.0-beta2 (beta2) — 2019-11-22
- 0.3.0-beta1 (beta1) — 2019-11-22
- 2.5.5 — 2025-08-13
- 2.5.4 — 2025-07-07
- 2.5.3 — 2025-05-28
- 2.5.3-beta.1 — 2025-02-19
- 2.5.2 — 2025-01-09
- 2.5.2-beta.1 — 2025-01-07
- 2.5.1 — 2024-10-19
- 2.5.0 — 2024-10-15
- 2.4.9 — 2024-09-11
- 2.4.8 — 2024-08-26
- … 562 more at https://npm.io/package/form-render/versions

## README

<div style="display:flex;align-items:center;margin-bottom:24px">
  <img src="https://img.alicdn.com/tfs/TB17UtINiLaK1RjSZFxXXamPFXa-606-643.png" alt="logo" width="48px"/>
  <h4 style="font-size:30px;font-weight:600;display:inline-block;margin-left:12px">FormRender</h4>
</div>
<p style="display:flex;justify-content:space-between;width:440px">
  <a href="https://www.npmjs.com/package/form-render?_blank">
    <img alt="npm" src="https://img.shields.io/npm/v/form-render.svg?maxAge=3600&style=flat-square">
  </a>
  <a href="https://npmjs.org/package/form-render">
    <img alt="NPM downloads" src="https://img.shields.io/npm/dm/form-render.svg?style=flat-square">
  </a>
  <a href="https://npmjs.org/package/form-render">
    <img alt="NPM all downloads" src="https://img.shields.io/npm/dt/form-render.svg?style=flat-square">
  </a>
  <a>
    <img alt="PRs Welcome" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square">
  </a>
</p>

> 一站式中后台**表单解决方案**

## 官网

<https://xrender.fun/form-render>

FormRender 是中后台开箱即用的表单解决方案，通过 JsonSchema 协议动态渲染表单。为了能切实承接日益复杂的表单场景需求，2.0 我们进行了底层重构。我们的目标是以强大的扩展能力对表单场景 100% 的覆盖支持，同时保持开发者能快速上手，并以表单编辑器、插件、自定义组件等一系列周边产品带来极致的开发体验。在开发 1.0 的道路上，我们做了一系列的取舍，详见[v2 升级方案](https://xrender.fun/form-render/migrate)

## 安装

FormRender 依赖 ant design，单独使用不要忘记同时安装 `antd`

```shell
npm i form-render --save
```

## 使用

**最简使用 demo：**

```jsx
import React from 'react';
import { Button } from 'antd';
import FormRender, { connectForm } from 'form-render';

const schema = {
  type: 'object',
  properties: {
    input1: {
      title: '简单输入框',
      type: 'string',
      required: true,
    },
    select1: {
      title: '单选',
      type: 'string',
      props: {
        options: [
          { label: '早', value: 'a' },
          { label: '中', value: 'b' },
          { label: '晚', value: 'c' }
        ]
      }
    },
  },
};

class Demo extends React.Component {
  render() {
    const { form } = this.props;
    return (
      <div>
        <FormRender form={form} schema={schema} />
        <Button type="primary" onClick={form.submit}>
          提交
        </Button>
      </div>
    );
  }
}

export default connectForm(Demo);
```

**对于函数组件，FormRender 提供了 `useForm` hooks, 书写更为灵活**

```jsx
import React from 'react';
import { Button } from 'antd';
import FormRender, { useForm } from 'form-render';

const schema = {
  type: 'object',
  properties: {
    input1: {
      title: '简单输入框',
      type: 'string',
      required: true,
    },
    select1: {
      title: '单选',
      type: 'string',
      props: {
        options: [
          { label: '早', value: 'a' },
          { label: '中', value: 'b' },
          { label: '晚', value: 'c' }
        ]
      }
    }
  }
};

const Demo = () => {
  const form = useForm();
  return (
    <div>
      <FormRender form={form} schema={schema} />
      <Button type="primary" onClick={form.submit}>
        提交
      </Button>
    </div>
  );
};

export default Demo;
```

---
_Source: https://npm.io/package/form-render · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._