三个组成部分

JSON Schema

字段、类型与必填项。需要时再加上传、地图或计算字段等可选能力。

UI Schema

布局、步骤条、分组与标签 — 与数据模型分离，可在编辑器中拖放调整。

表单数据

已填写的 JSON 对象，绑定到你的应用或 API。

已内置

可视化编辑器

在浏览器中调整 Schema 与布局 — 面板、拖放，以及未使用字段的建议。

计算字段

自动填充合计或状态。需要时可设为只读或隐藏。

文件与地图

带预览的上传，或在地图上绘制 — 可在场景中试用。

格式与选择

邮箱、电话、日期、列表 — 以及评分、进度条和多语言标签。

四步开始

安装包

在本 monorepo 中于仓库根目录运行 pnpm install。在你自己的项目中添加所需的 @jsonschema-editor/* 包。

pnpm add @jsonschema-editor/vue @jsonschema-editor/vue-extensions \
  @jsonschema-editor/json-schema @jsonschema-editor/json-schema-extensions \
  @jsonschema-editor/ui-schema

注册扩展

一次调用即可：格式、列表、计算字段、文件上传、地图、评分和进度条。

import { registerDefaultVueExtensions } from "@jsonschema-editor/vue-extensions";

registerDefaultVueExtensions();

加载 Schema 与 UI

documentFromJSONWithExtensions() 会保留扩展属性。加载 UI Schema，或从 Schema 生成。

import { documentFromJSONWithExtensions } from "@jsonschema-editor/json-schema-extensions";
import { UiSchema } from "@jsonschema-editor/ui-schema/bridge";

const schema = documentFromJSONWithExtensions(schemaJson);
const uiSchema = UiSchema.fromJSON(uiSchemaJson);

4
渲染表单
JsonSchemaForm 通过 v-model 绑定数据。JsonSchemaFormEditor 在同一模型中编辑 Schema 与布局。
```
<JsonSchemaForm
  v-model="formData"
  :schema="schema"
  :ui-schema="uiSchema"
  locale="zh"
/>
```

包一览

@jsonschema-editor/json-schemaSchema 模型、校验、路径

@jsonschema-editor/json-schema-extensions格式、列表、x-computed、x-file、x-geometry、…

@jsonschema-editor/ui-schemaUI Schema 类型与 Bridge

@jsonschema-editor/vue表单与可视化编辑器

@jsonschema-editor/vue-extensions扩展用组件

立即试用

场景中提供现成表单 — 从体检与理赔，到物流、建筑项目再到车辆配置。测试表单，编辑 Schema 与布局，实时查看 JSON。

入门