visual-json

在现代化的开发工作流中，JSON 已成为数据交换的事实标准。然而，面对庞大、嵌套复杂的 JSON 文件，传统的纯文本编辑器往往显得力不从心：难以直观理解结构、容易因语法错误导致解析失败、缺乏对 Schema 的智能提示。

近日，Vercel 正式开源了 visual-json 项目。这是一套旨在重新定义 JSON 交互体验的可视化编辑解决方案。它不仅是一个编辑器，更是一个高度模块化、模式感知（Schema-aware）且可无缝嵌入的工具库，支持从底层数据模型到上层 UI 组件的全链路定制。

核心架构：三位一体的模块化设计

visual-json 并未采用“黑盒”式的单体应用设计，而是将其能力拆解为三个紧密协作但独立发布的 npm 包，赋予开发者极大的灵活性：

1. @visual-json/core：无头引擎

这是整个项目的“大脑”，不包含任何 UI 依赖。

• 无头树模型 (Headless Tree Model)：提供高效的 JSON 数据树操作能力，支持增删改查、节点移动等原子操作。
• 模式类型系统：内置强大的 JSON Schema 解析与验证逻辑，确保数据结构的合法性。
• 适用场景：适合需要自定义 UI 框架（如 Vue, Svelte, Solid）或仅在 Node.js 后端处理 JSON 逻辑的开发者。

2. @visual-json/react：开箱即用的 UI 组件

基于 React 构建的一系列高性能组件，直接复用 Core 的逻辑。

• TreeView：经典的树形结构浏览与编辑，支持折叠、拖拽。
• FormView：将 JSON 转换为直观的表单界面，特别适合非技术人员配置数据。
• DiffView：可视化对比两个 JSON 对象的差异，高亮显示变更内容。
• 适用场景：快速集成到 React 管理后台、配置中心或 SaaS 应用中。

3. @visual-json/vscode：生产力增强插件

直接将可视化能力带入开发者最熟悉的 IDE。

• 树形侧边栏：在 VS Code 中提供独立的 JSON 结构导航面板。
• Schema 智能支持：自动识别关联的 JSON Schema，提供类型提示和错误校验。
• JSONC 兼容：完美支持带注释的 JSON (JSONC) 格式，满足配置文件编辑需求。
• 适用场景：日常代码编写、配置文件修改、大型数据结构调试。

关键特性：为何选择 visual-json？

• 模式感知 (Schema-Aware)
  不仅仅是展示数据，更能理解数据。通过加载 JSON Schema，编辑器能自动推断字段类型、枚举值、必填项等信息，提供智能补全和实时验证，大幅降低配置错误率。
• 极致可扩展性
  得益于“无头 Core + UI 组件”的分离设计，你可以轻松替换默认渲染器，添加自定义控件（如颜色选择器、日期拾取器），甚至集成特定的业务逻辑校验。
• 无缝嵌入能力
  无论是作为 Web 应用中的一个小组件，还是作为大型平台的核心配置模块，visual-json 都能通过简单的 API 调用轻松嵌入，且保持轻量级性能。
• 高性能渲染
  针对大型 JSON 文件进行了深度优化，采用虚拟滚动和按需渲染技术，即使面对数万行数据的复杂结构，也能保持流畅的交互体验。

🛠️ 快速开始与开发

visual-json 使用现代前端工具链构建，推荐通过 pnpm 进行依赖管理和开发。

环境准备：
确保已安装 Node.js 和 pnpm。

安装依赖：

pnpm install

构建项目：

pnpm build

这将编译所有包（core, react, vscode），生成可分发的产物。

启动开发服务器：

pnpm dev

进入热重载模式，方便实时预览 UI 组件的变更和调试 Core 逻辑。

应用场景展望

• 低代码/无代码平台：利用 FormView 让用户通过表单配置复杂的工作流或页面布局，底层自动生成标准 JSON。
• API 调试与管理工具：类似 Postman 的请求体编辑器，提供比纯文本更友好的结构化输入体验。
• 游戏/应用配置中心：为策划或运营人员提供可视化的数值配置界面，自动校验数据类型，防止因格式错误导致服务崩溃。
• IDE 增强：通过 VS Code 插件，让开发者在图形化视图和代码视图间自由切换，提升阅读和修改大型配置文件的效率。