visual-json：843⭐的可视化 JSON 编辑器，支持 Schema 和多框架

JSON 是开发者日常接触最多的数据格式之一，但手工编写和校验 JSON 文件往往是一件繁琐的事。特别是面对复杂的嵌套结构或严格的 Schema 约束时，纯文本编辑器的体验显得捉襟见肘。

visual-json 是 Vercel Labs 团队最近开源的一款可视化 JSON 编辑器，提供了树形视图、表单视图和差异对比等功能，并且原生支持 JSON Schema 校验。

项目概览

属性	内容
GitHub	vercel-labs/visual-json
Stars	843
语言	TypeScript
许可证	Apache 2.0
最后更新	1 周前

核心特点

Schema-Aware 编辑

visual-json 最大的卖点是对 JSON Schema 的原生支持。你可以在编辑器中定义 Schema，系统会自动根据 Schema 提供：

属性自动补全
类型检查提示
必填字段标记
枚举值下拉选择

这对于需要处理配置文件的开发者来说非常实用。比如在编辑 package.json 或复杂的 API 请求体时，Schema 可以显著降低出错概率。

多框架组件库

项目采用 monorepo 架构，提供了多个框架的 UI 组件：

包名	说明
`@visual-json/core`	无头核心，包含树模型和 Schema 类型
`@visual-json/react`	React 组件（TreeView、FormView、DiffView）
`@visual-json/svelte`	Svelte 5 组件
`@visual-json/vue`	Vue 组件
`@visual-json/yaml`	YAML 支持

这种设计让开发者可以根据技术栈选择合适的集成方式，而不必被锁定在特定框架。

VS Code 扩展

除了 Web 组件，visual-json 还提供了 VS Code 扩展，支持：

JSON 和 JSONC（带注释的 JSON）文件的可视化编辑
YAML 文件支持
侧边栏树形导航
Schema 关联

安装扩展后，右键点击 JSON 文件选择 “Open with Visual JSON Editor” 即可使用。

快速开始

以 React 项目为例：

npm install @visual-json/react

import { TreeView } from '@visual-json/react';

function App() {
  const schema = {
    type: 'object',
    properties: {
      name: { type: 'string' },
      version: { type: 'string' },
      dependencies: { type: 'object' }
    }
  };

  return (
    <TreeView
      schema={schema}
      value={{
        name: 'my-app',
        version: '1.0.0',
        dependencies: {}
      }}
      onChange={(value) => console.log(value)}
    />
  );
}

适用场景

visual-json 最适合以下情况：

配置管理工具 — 需要让用户可视化编辑 JSON 配置的后台系统
API 调试界面 — 构建请求体编辑器时提供结构化的输入体验
数据预览组件 — 展示复杂 JSON 数据的可折叠树形视图
低代码平台 — 表单生成和数据绑定的可视化编辑器

与同类工具对比

工具	Stars	特点	适用场景
react-json-editor-ajrm	1.2k	纯 React，语法高亮	轻量级编辑
jsoneditor	12.3k	功能完整，支持模态框编辑	独立编辑器
visual-json	843	多框架支持，Schema 优先，可嵌入	集成到应用

相比 jsoneditor 这种全功能编辑器，visual-json 更强调可嵌入性和框架集成。如果你正在构建需要 JSON 编辑功能的内部工具或 SaaS 产品，它会是一个比直接使用大型编辑器更轻量、更灵活的选择。

注意事项

项目仍处于早期阶段（v0.x），API 可能会有变动
文档还在完善中，部分高级用法需要参考源码
Svelte 和 Vue 组件相对 React 组件的测试覆盖较少

总结

visual-json 填补了 JSON 编辑器领域的一个空白：既不像简单的高亮组件那样功能贫乏，也不像大型独立编辑器那样难以集成。它提供的多框架组件和 Schema 支持，使其成为构建数据密集型应用的实用基础设施。

对于需要内嵌 JSON 编辑功能的开发者来说，这个项目值得关注。

文章发表于 gumi.ink