# @wibetter/json-schema-editor

> JSON数据可视化/JSONSchema，以表单的形式编辑 json schema，可用于在线设计组件的配置面板

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

## Install

```sh
npm install @wibetter/json-schema-editor
pnpm add @wibetter/json-schema-editor
yarn add @wibetter/json-schema-editor
bun add @wibetter/json-schema-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 | 11 |
| Unpacked size | 67 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 49 |
| Author | wibetter |
| Maintainers | wibetter |
| Keywords | schema, schema可视化, schema设计器, schemaEditor |

## Links

- npm: https://www.npmjs.com/package/@wibetter/json-schema-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-schema-editor

## Dependencies (11)

- [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
- [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
- [@babel/polyfill](https://npm.io/package/@babel/polyfill.md) ^7.12.1
- [@ant-design/icons](https://npm.io/package/@ant-design/icons.md) ^5.4.0
- [@wibetter/json-utils](https://npm.io/package/@wibetter/json-utils.md) ^6.0.1

## Alternatives

- [@regle/core](https://npm.io/package/@regle/core.md) — 47.0K weekly downloads
- [typeof-arguments](https://npm.io/package/typeof-arguments.md) — 12.5K weekly downloads
- [@lokalise/projects-engine-contracts](https://npm.io/package/@lokalise/projects-engine-contracts.md) — 978 weekly downloads
- [@osjwnpm/nam-laboriosam-quibusdam](https://npm.io/package/@osjwnpm/nam-laboriosam-quibusdam.md) — 70 weekly downloads
- [@oridune/validator](https://npm.io/package/@oridune/validator.md) — 16 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.5 — 2025-03-09
- … 70 more at https://npm.io/package/@wibetter/json-schema-editor/versions

## README

# json-schema-editor

> JSON数据可视化/SchemaEditor，以表单的形式编辑 schema 数据，可用于在线设计页面/组件的配置面板。

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

### 特点
1. 支持16种基础类型组件（input、boolean、 date、date-time、 time、 url、
 textarea、number、color、radio、 checkboxes、select、cascader、input-image、button-group-select、input-rate）
2. 支持8种特殊类型组件（object、array、json、codearea、htmlarea、text-editor([使用说明](https://github.com/wibetter/json-editor/blob/master/docs/TextEditor.md))、quantity、padding-margin）
3. 支持拖拽排序、删除、复制、高级配置等功能
4. 支持无限嵌套
5. 支持通过表达式进行配置联动
6. 支持源码模式切换（开启源码模式后可以开启编辑模式）
7. 支持添加自定义类型

### 特别说明
SchemaEditor仅用于生成结构化的json数据，还需要配合JSONEditor（[git地址](https://github.com/wibetter/json-editor)）渲染其内容。


## 安装

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

## 使用示例

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

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

    this.state = {
      jsonSchema: {},
    };
  }

  render() {
    const { jsonSchema } = this.state;
    return (
      <>
        <div className="json-action-container">
          <div className="json-schema-box">
             <JSONSchemaEditor
                data={jsonSchema}
                onChange={(newJsonSchema) => {
                  this.setState({
                    jsonSchema: newJsonSchema,
                  });
                }}
             />
          </div>
        </div>
      </>
    );
  }
}
```

## JSONSchema 可配置参数说明

| name         | type     | default | desc                            |
| ------------ | -------- | ------- | ------------------------------- |
| `data`       | object   | {}      | 必填项，json schema（带结构的json数据）    |
| `onChange`   | function | () => {}  | schemaData内容变动时会触发onChange |

## 如何添加自定义类型？

从 v7.0.0 起，支持通过 `SchemaDescriptor` 描述文件注册自定义 Schema 类型。注册后，自定义类型会出现在类型选择下拉列表中，并在编辑区以自定义渲染器或通用渲染器呈现。

### SchemaDescriptor 字段说明

| 字段              | 类型                          | 必填 | 说明                                                 |
| ----------------- | ----------------------------- | ---- | ---------------------------------------------------- |
| `type`            | string                        | ✅   | 类型唯一标识，与 JSONSchema 中的 `type` 字段对应      |
| `label`           | string                        | ✅   | 在类型选择下拉中展示的名称                            |
| `isContainer`     | boolean                       | ✅   | 是否为容器类型（支持添加子元素）                      |
| `defaultSchema`   | object                        | ✅   | 新建该类型时的初始 schema 数据                        |
| `propsSchema`     | PropsSchema                   | ✅   | 高级配置面板的 schema，由 `buildPropsSchema` 构建     |
| `renderer`        | (props: any) => ReactNode     | ❌   | 自定义渲染函数，不提供则降级使用通用渲染器             |
| `isFixed`         | boolean                       | ❌   | 元素是否固定（不可复制/拖拽/删除）                    |
| `keyIsFixed`      | boolean                       | ❌   | key 字段是否不可编辑                                  |
| `typeIsFixed`     | boolean                       | ❌   | type 字段是否不可编辑                                 |
| `readOnly`        | boolean                       | ❌   | 是否只读（不可编辑）                                  |
| `hideOperaBtn`    | boolean                       | ❌   | 是否隐藏操作按钮（增删复制拖拽）                      |

### 注册自定义类型 示例

以下示例展示如何注册一个 `color-picker`（颜色选择器）类型的自定义类型：

**第一步：创建描述文件 `colorPickerPlugin.ts`**

```ts
import JSONSchemaEditor, { registerSchema, buildPropsSchema } from '@wibetter/json-schema-editor';

// 定义 ColorPicker 类型描述文件
const colorPickerDescriptor = {
  type: 'color-picker',
  label: '颜色选择器',
  isContainer: false,

  // 新建该类型时的初始 schema
  defaultSchema: {
    type: 'color-picker',
    title: '颜色选择器'
  },

  // 高级配置面板的 schema（由 buildPropsSchema 构建，会自动合并通用配置项）
  propsSchema: buildPropsSchema(),
};

// 注册成 json-schema-editor 可用配置项
registerSchema(colorPickerDescriptor);
```

**第二步：在入口文件中引入插件（确保注册在 `JSONSchemaEditor` 渲染前执行）**

```js
import './colorPickerPlugin'; // 引入即触发注册
import JSONSchemaEditor from '@wibetter/json-schema-editor';
```

## button-group-select 类型说明

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

### schema 结构

`button-group-select` 的 schema 结构与 `radio`（单选）类型完全一致，支持 `options` 选项列表：

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

### 高级配置项

| 配置项                    | 类型      | 默认值  | 说明                                   |
| ------------------------- | --------- | ------- | -------------------------------------- |
| `vertical`                | boolean   | false   | 垂直模式，开启后按钮组垂直方向排列      |
| `readOnly`                | boolean   | false   | 只读模式                               |
| `isRequired`              | boolean   | false   | 是否必填                               |
| `defaultActiveFirstOption`| boolean   | false   | 是否默认高亮第一个选项                  |
| `default`                 | string    | ''      | 默认选中项的 value 值                  |

### 使用示例

```json
{
  "type": "object",
  "properties": {
    "direction": {
      "type": "button-group-select",
      "title": "排列方向",
      "options": [
        { "label": "水平", "value": "horizontal" },
        { "label": "垂直", "value": "vertical" }
      ],
      "default": "horizontal",
      "vertical": false
    },
    "align": {
      "type": "button-group-select",
      "title": "对齐方式（垂直）",
      "options": [
        { "label": "左对齐", "value": "left" },
        { "label": "居中", "value": "center" },
        { "label": "右对齐", "value": "right" }
      ],
      "default": "left",
      "vertical": true
    }
  },
  "propertyOrder": ["direction", "align"]
}
```

***

### 访问 schemaRegistry

可通过 `schemaRegistry` 查询已注册的所有 Schema 类型：

```ts
import JSONSchemaEditor, { schemaRegistry } from '@wibetter/json-schema-editor';

// 获取某个类型的描述文件
const colorPickerDescriptor = schemaRegistry.get('color-picker');

// 获取所有已注册类型
const allTypes = Array.from(schemaRegistry.keys());
```

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