一个强大且灵活的 JSON 可视化差异对比 SDK，采用可插拔的渲染器架构设计，支持实时编辑预览和多种扩展类型。
- LCS 数组对比：使用最长公共子序列算法实现智能数组差异识别
- 扩展类型支持：原生支持 Function、Date、RegExp、Symbol 等非标准 JSON 类型
- 循环引用检测：安全处理循环引用，避免无限循环
- 深度可配置：灵活的深度限制和忽略字段配置
- 架构解耦：核心算法与渲染逻辑完全分离
- 标准化输出：统一的 DiffResult 格式，易于集成
- 多主题支持：内置浅色/深色主题，支持自定义配色
- 无障碍访问：完整的 ARIA 属性和键盘导航支持
- Monaco Editor：集成 VS Code 同款编辑器，语法高亮、自动补全、错误检测
- 实时预览：编辑内容时自动触发差异计算，无需手动点击比较按钮
- 响应式设计：完美适配桌面、平板和移动设备
- 设置持久化：用户偏好自动保存到本地存储
- ⚡ 实时对比：移除手动比较按钮，编辑内容时自动计算并显示差异
- 🎯 默认示例：页面加载时自动显示 basic 示例数据
- 📐 优化布局：精简头部设计，增大编辑器区域，提升用户体验
- ⚡ Tsdown 构建：使用 tsdown 替代 tsc，构建速度更快
- 📦 双格式输出：同时生成 ESM 和 CJS 格式
- 🗺️ Source Maps：完整的源码映射支持
json-visual-diff/
├── packages/
│ ├── core/ # 核心 diff 算法库
│ ├── dom-renderer/ # DOM 渲染器
│ └── playground/ # 演示应用
├── pnpm-workspace.yaml # pnpm workspace 配置
├── package.json # 根 package.json
├── tsconfig.json # TypeScript 配置
└── vitest.config.ts # Vitest 测试配置
- Node.js >= 20.19.0
- pnpm >= 8.0.0
pnpm install @json-visual-diff/core pnpm install @json-visual-diff/dom-renderer
pnpm build- 构建所有包pnpm test- 运行所有测试pnpm test:watch- 监听模式运行测试pnpm lint- 代码检查pnpm format- 格式化代码pnpm typecheck- 类型检查
核心差异算法引擎，提供高性能的 JSON 对象比较功能。
- 纯算法实现：平台无关的核心库，可在任何 JavaScript 环境中运行
- 智能数组对比：基于 LCS 算法的数组差异识别
- 扩展类型支持：处理 Function、Date、RegExp、Symbol 等非标准类型
- 循环引用安全：内置循环引用检测机制
- TypeScript 优先：完整的类型定义，提供优秀的 IDE 支持
DOM 渲染器，将差异结果渲染为可交互的浏览器 DOM 元素。
- 视觉差异化：清晰的颜色编码显示（新增、删除、修改、未变）
- 主题系统：内置浅色/深色主题，支持自定义配色方案
- 交互式 UI：可折叠/展开的嵌套结构，便于导航
- 无障碍访问：语义化 HTML 和 ARIA 属性，支持屏幕阅读器
- 键盘导航：完整的键盘操作支持
交互式演示应用，提供完整的差异对比体验。
- Monaco Editor 集成：VS Code 同款编辑器，语法高亮、自动补全、错误检测
- 实时编辑预览：编辑内容时自动计算并显示差异，无需手动触发
- 响应式设计：完美适配桌面、平板和移动设备
- 设置持久化：用户偏好自动保存到本地存储
- 示例库：内置多个示例，快速上手体验
快速启动：
cd packages/playground
pnpm dev访问 http://localhost:3000 体验 Playground！
MIT