# @wibetter/json-editor

> JSON数据可视化/JSONEditor, 可视化界面编辑json数据

Latest version **7.0.5** (published 2026-03-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @wibetter/json-editor
pnpm add @wibetter/json-editor
yarn add @wibetter/json-editor
bun add @wibetter/json-editor
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 7.0.5 |
| Published | 2026-03-22 |
| First published | 2020-08-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 10.13.0 |
| Dependencies | 14 |
| Unpacked size | 180.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 49 |
| Author | wibetter |
| Maintainers | wibetter |
| Keywords | json, json数据可视化, 配置可视化 |

## Links

- npm: https://www.npmjs.com/package/@wibetter/json-editor
- Repository: http://git@github.com:wibetter/json-editor
- Issues: https://github.com/wibetter/json-editor/issues
- npm.io page: https://npm.io/package/@wibetter/json-editor

## Dependencies (14)

- [antd](https://npm.io/package/antd.md) ^5.20.1
- [mobx](https://npm.io/package/mobx.md) ^6.13.0
- [react](https://npm.io/package/react.md) ^16.8.6
- [lodash](https://npm.io/package/lodash.md) ^4.17.23
- [moment](https://npm.io/package/moment.md) ^2.27.0
- [react-ace](https://npm.io/package/react-ace.md) ^12.0.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.6
- [ace-builds](https://npm.io/package/ace-builds.md) ^1.35.4
- [mobx-react](https://npm.io/package/mobx-react.md) ^7.6.0
- [react-color](https://npm.io/package/react-color.md) ^2.19.3
- [braft-editor](https://npm.io/package/braft-editor.md) ^2.3.9
- [braft-extensions](https://npm.io/package/braft-extensions.md) ^0.1.1
- [@ant-design/icons](https://npm.io/package/@ant-design/icons.md) ^4.2.1
- [@wibetter/json-utils](https://npm.io/package/@wibetter/json-utils.md) ^6.0.1

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 7.0.5 (latest) — 2026-03-22
- 7.0.3 — 2026-03-22
- 7.0.2 — 2026-02-27
- 7.0.1 — 2026-02-27
- 7.0.0 — 2026-02-26
- 6.0.5 — 2026-01-27
- 6.0.3 — 2026-01-27
- 6.0.2 — 2026-01-27
- 6.0.1 — 2025-05-20
- 5.3.1 — 2025-04-18
- 5.2.10 — 2025-04-01
- 5.2.9 — 2025-03-27
- 5.2.8 — 2025-03-26
- 5.2.7 — 2025-03-17
- 5.2.6 — 2025-03-10
- … 131 more at https://npm.io/package/@wibetter/json-editor/versions

## README

# JSONEditor功能组件

> JSON数据可视化/JSONEditor，可视化界面编辑json数据

### 使用场景
以表单的形式编辑 json 数据，可用于支持组件或页面可视化配置。

### 技术栈
React/Mobx/Ant Design

### 特点
1. 弹性布局，提供大屏和小屏两种展示模式
2. 支持字段联动
3. 支持16种基础类型组件（input、boolean、 date、date-time、 time、 url、
 textarea、number、color、radio、 checkboxes、select、cascader、input-image、button-group-select、input-rate）
4. 支持8种特殊类型组件（object、array、json、codearea、htmlarea、text-editor([使用说明](https://github.com/wibetter/json-editor/blob/master/docs/TextEditor.md))、quantity、padding-margin）
5. 支持json转schema能力，当schemaData为空而jsonData不为空时，自动通过json转换一个对应的schemaData
6. 支持通过表达式设置数据联动（支持两种数据域：全局数据域、当前局部数据域）
7. 支持源码模式切换（开启源码模式后可以开启编辑模式）
8. 支持添加自定义类型组件

***

## 安装

```bash
npm install --save @wibetter/json-editor
```


## 使用示例

```js
import * as React from 'react';
import JSONEditor from '@wibetter/json-editor';
import '@wibetter/json-editor/lib/index.css';

class IndexDemo extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      jsonSchema: {},
      jsonData: {},
      options: {
        wideScreen: false,   // 宽屏/小屏模式
        viewStyle: 'fold',   // 展示风格：fold | tabs
        jsonView: false,     // 是否开启源码模式
        jsonViewReadOnly: true, // 源码模式是否只读
      },
    };
  }

  render() {
    const { jsonSchema, jsonData, options } = this.state;
    return (
      <>
        <div className="json-action-container">
          <div className="json-editor-box">
            <JSONEditor
              schemaData={jsonSchema}
              jsonData={jsonData}
              options={options}
              onChange={(newJsonData) => {
                this.setState({
                  jsonData: newJsonData
                });
              }}
            />
          </div>
        </div>
      </>
    );
  }
}
```

## JSONEditor 可配置参数

| name         | type     | default | desc                            |
| ------------ | -------- | ------- | ------------------------------- |
| `schemaData` | object   | {}      | 非必填，json的结构数据，备注：schemaData为空而jsonData不为空时，会自动通过jsonData生产一份对应的schemaData |
| `jsonData`   | object   | {}      | 必填项，json的内容数据                    |
| `options`    | object   | {}      | 非必填，配置项对象，详见下方 options 说明       |
| `onChange`   | function | () => {}    | jsonData内容变动时会触发onChange   |

## options 配置项说明

> 所有展示控制、行为配置均通过 `options` 统一传入。

| options 字段      | type    | default | desc                            |
| ----------------- | ------- | ------- | ------------------------------- |
| `viewStyle`       | string  | 'fold'  | 展示风格，`fold`：可折叠面板，`tabs`：选项卡切换面板 |
| `tabPosition`     | string  | 'center'| 标签栏位置，`viewStyle` 为 `tabs` 时有效，可选：`top`、`bottom`、`left`、`right`、`center` |
| `tabType`         | string  | 'line'  | 标签样式，`viewStyle` 为 `tabs` 时有效，可选：`line`、`card`、`editable-card` |
| `jsonView`        | boolean | false   | 是否开启全局源码模式，开启后展示 JSON 源码视图 |
| `jsonViewReadOnly`| boolean | true    | 源码模式下是否只读，`jsonView` 为 `true` 时有效 |
| `wideScreen`      | boolean | false   | 宽屏模式/小屏模式，默认是小屏模式 |
| `GlobalOptions`   | array   | []      | 全局默认选项，用于 select/radio/checkbox 等字段的默认备选项，格式：`[{ label?: string, value: string }]` |

## button-group-select 类型说明

`button-group-select` 是内置的按钮组单选类型，在表单中以按钮切换形式进行单击选中，交互体验类似 [amis button-group-select](https://aisuda.bce.baidu.com/amis/zh-CN/components/form/button-group-select)。

### schema 结构

schema 结构与 `radio`（单选）类型完全一致：

```json
{
  "type": "button-group-select",
  "title": "布局方向",
  "options": [
    { "label": "水平", "value": "horizontal" },
    { "label": "垂直", "value": "vertical" },
    { "label": "自适应", "value": "auto" }
  ],
  "default": "horizontal",
  "description": "请选择布局方向"
}
```

### 配置项

| 字段        | 类型    | 默认值 | 说明                                      |
| ----------- | ------- | ------ | ----------------------------------------- |
| `options`   | array   | []     | 选项列表，格式：`[{ label, value }]`       |
| `default`   | string  | ''     | 默认选中项的 value 值                      |
| `vertical`  | boolean | false  | 垂直模式，开启后按钮组以垂直方向排列        |
| `readOnly`  | boolean | false  | 只读模式，禁止用户切换                     |

### 使用示例

**平铺模式（默认）：**

```json
{
  "type": "object",
  "properties": {
    "direction": {
      "type": "button-group-select",
      "title": "排列方向",
      "options": [
        { "label": "水平", "value": "horizontal" },
        { "label": "垂直", "value": "vertical" }
      ],
      "default": "horizontal"
    }
  },
  "propertyOrder": ["direction"]
}
```

**垂直模式：**

```json
{
  "type": "object",
  "properties": {
    "align": {
      "type": "button-group-select",
      "title": "对齐方式",
      "options": [
        { "label": "左对齐", "value": "left" },
        { "label": "居中对齐", "value": "center" },
        { "label": "右对齐", "value": "right" }
      ],
      "default": "left",
      "vertical": true
    }
  },
  "propertyOrder": ["align"]
}
```

***

## input-rate 类型说明

`input-rate` 是内置的评分类型，在表单中以星星评分形式进行交互，底层使用 [Ant Design Rate](https://ant.design/components/rate-cn) 组件。

### schema 结构

```json
{
  "type": "input-rate",
  "title": "评分",
  "default": 3,
  "description": "请对该内容进行评分",
  "count": 5,
  "allowHalf": false,
  "allowClear": true,
  "size": "default",
  "tooltips": "差,较差,一般,良好,优秀"
}
```

### 配置项

| 字段          | 类型    | 默认值      | 说明                                                           |
| ----------- | ------- | ----------- | -------------------------------------------------------------- |
| `default`   | number  | 0           | 默认评分值                                                     |
| `count`     | number  | 5           | star 总数                                                      |
| `allowHalf` | boolean | false       | 是否允许选择半星                                               |
| `allowClear`| boolean | true        | 是否允许再次点击后清除评分                                     |
| `size`      | string  | `'default'` | 评分组件尺寸，可选：`'small'`、`'default'`、`'large'`         |
| `tooltips`  | string  | -           | 自定义每项的提示信息，多个值用英文逗号分隔，如：`差,较差,一般,良好,优秀` |
| `readOnly`  | boolean | false       | 只读模式，禁止用户交互                                         |

### 使用示例

**基础用法：**

```json
{
  "type": "object",
  "properties": {
    "score": {
      "type": "input-rate",
      "title": "满意度评分",
      "default": 3,
      "description": "请对本次服务进行评分"
    }
  },
  "propertyOrder": ["score"]
}
```

**半星 + 提示文案：**

```json
{
  "type": "object",
  "properties": {
    "rating": {
      "type": "input-rate",
      "title": "内容质量",
      "default": 2.5,
      "count": 5,
      "allowHalf": true,
      "allowClear": true,
      "size": "large",
      "tooltips": "差,较差,一般,良好,优秀"
    }
  },
  "propertyOrder": ["rating"]
}
```

***

## 自定义类型组件

JSONEditor 支持通过注册自定义渲染器来扩展字段类型，可以针对特定的 `type` 值渲染自定义类型组件。

### 注册方式

```js
import { registerRenderer } from '@wibetter/json-editor';

class MyCustomRenderer extends React.Component {
  render() {
    const { targetJsonSchema, jsonStore, keyRoute } = this.props;
    const currentValue = jsonStore.getJSONDataByKeyRoute(keyRoute);

    return (
      <div className="custom-field">
        <label>{targetJsonSchema.title}</label>
        <input
          value={currentValue ?? ''}
          onChange={(e) => {
            jsonStore.updateFormValueData(keyRoute, e.target.value);
          }}
        />
      </div>
    );
  }
}

// 注册json-editor自定义渲染器
registerRenderer({
  type: 'custom-config',
  component: MyCustomRenderer,
});
```

### 渲染器 Props 说明

自定义渲染器组件会接收以下 props：

| prop              | type   | desc                                      |
| ----------------- | ------ | ----------------------------------------- |
| `keyRoute`        | string | 当前字段在 JSON 数据中的路径，如 `style-color`   |
| `jsonKey`         | string | 当前字段的 key 值                           |
| `targetJsonSchema`| object | 当前字段的 schema 配置对象                  |
| `jsonStore`       | object | JSON 数据 store，提供数据读写方法             |
| `schemaStore`     | object | Schema 数据 store                          |
| `renderChild`     | func   | 渲染子字段的方法，用于嵌套结构场景            |
| `parentType`      | string | 父级字段的 type 值                          |

### 完整自定义类型组件示例

```js
import * as React from 'react';
import JSONEditor, { registerRenderer } from '@wibetter/json-editor';
import '@wibetter/json-editor/lib/index.css';

class ColorPickerRenderer extends React.Component {
  render() {
    const { targetJsonSchema, jsonStore, keyRoute } = this.props;
    const { title, description } = targetJsonSchema;
    const currentValue = jsonStore.getJSONDataByKeyRoute(keyRoute) ?? '#ffffff';

    return (
      <div style={{ display: 'flex', alignItems: 'center', padding: '4px 0' }}>
        <span style={{ marginRight: 8 }}>{title}</span>
        <input
          type="color"
          value={currentValue}
          title={description}
          onChange={(e) => {
            jsonStore.updateFormValueData(keyRoute, e.target.value);
          }}
        />
        <span style={{ marginLeft: 8 }}>{currentValue}</span>
      </div>
    );
  }
}

// 注册成json-editor配置项
registerRenderer({
  type: 'color-picker',
  component: ColorPickerRenderer
});


// 使用示例
class Demo extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      jsonSchema: {
        type: 'object',
        properties: {
          style: {
            type: 'object',
            title: '外观设置',
            properties: {
              bgColor: {
                type: 'color-picker',  // 对应自定义渲染器的 type
                title: '背景颜色',
                default: '#ffffff',
              },
            },
            propertyOrder: ['bgColor'],
          },
        },
        propertyOrder: ['style'],
      },
      jsonData: {},
      options: {
        viewStyle: 'fold',
        wideScreen: true,
      },
    };
  }

  render() {
    const { jsonSchema, jsonData, options } = this.state;
    return (
      <JSONEditor
        schemaData={jsonSchema}
        jsonData={jsonData}
        options={options}
        onChange={(newJsonData) => {
          this.setState({ jsonData: newJsonData });
        }}
      />
    );
  }
}
```

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