JSON Board

一个离线优先、打开即用的 JSON、XML 与代码工作台。
格式化、折叠、诊断、代码高亮、查找替换和文本对比，全都留在本地浏览器里完成。

在线使用 JSON Board →

为什么用它

JSON Board 不需要安装、不需要构建，也不会把文本传到服务器。下载仓库后直接打开 index.html，就能获得接近桌面编辑器的体验。

能力	说明
JSON 工作台	粘贴自动格式化、行号、折叠、片段复制、一键展开与隐藏 null
XML 工作台	粘贴自动格式化、语法高亮、标签折叠、子元素计数、片段复制与中文错误定位
中文诊断	定位缺逗号、多括号、错误引号、非法转义等常见 JSON 问题
代码模式	自动识别 JavaScript、TypeScript、Python、Java、SQL、Shell、HTML、CSS、Go、Rust 等语言，支持花括号代码块折叠
查找替换	所有匹配与当前匹配独立高亮，支持上一处、下一处、替换和全部替换
文本对比	任意文本左右对比，支持差异统计、变更导航和双栏同步滚动
大文件优化	纵向与横向虚拟渲染，超大文本使用 IndexedDB 与 gzip 本地备份
独立草稿与恢复	JSON、XML、代码模式分别保存草稿；切换互不覆盖，刷新后继续编辑

工作模式

代码模式	文本对比
自动识别语言并使用离线 Highlight.js 着色。	绿色为新增，红色为删除，琥珀色为修改。

快速开始

直接使用

git clone https://github.com/PianoCello/json-board.git
cd json-board
open index.html

macOS 也可以双击 scripts/打开 JSON 看板.command，以最大化独立窗口打开。

本地服务器

npm run serve

然后访问 http://localhost:4173。

快捷键

快捷键	功能
Ctrl/Command + C	无选区时复制光标所在整行；有选区时复制选区
Ctrl/Command + X	无选区时剪切光标所在整行；有选区时剪切选区
Ctrl/Command + V	粘贴文本；由看板复制的整行会按行插入
Ctrl/Command + Z	撤销当前模式中的操作
Ctrl/Command + Shift + Z	重做当前模式中的操作
Ctrl + Y	Windows/Linux 重做
Ctrl/Command + Enter	格式化当前 JSON 或 XML
Ctrl + H	Windows 打开查找替换
Command + Option + F	macOS 打开查找替换
Ctrl/Command + F	保留浏览器原生搜索
Tab	插入两个空格
← / →	聚焦分隔线时调整双栏宽度

项目结构

json-board/
├── .github/workflows/      # GitHub Actions
├── docs/
│   ├── images/             # README 实际运行截图
│   └── ARCHITECTURE.md     # 架构与编辑器图层说明
├── public/icons/           # 应用图标
├── scripts/                # 本地启动脚本
├── src/
│   ├── css/app.css         # 视觉样式与编辑器图层
│   └── js/
│       ├── app.js          # 应用状态与交互
│       ├── diff-utils.js   # 行级差异算法
│       ├── editor-utils.js # 括号配对等编辑能力
│       ├── json-diagnostics.js
│       └── xml-utils.js    # XML 格式化、诊断与折叠
├── tests/                  # Node.js 回归测试
├── vendor/highlightjs/     # 离线语法高亮与许可证
├── index.html              # 无构建步骤的应用入口
└── package.json            # 测试与本地开发命令

更多实现细节见 架构说明。

开发与验证

项目没有运行时 npm 依赖。Node.js 只用于执行自动化测试：

npm run verify

该命令会进行 JavaScript 语法检查，并运行差异算法、括号配对、JSON 中文诊断、XML 格式化与诊断，以及页面结构契约测试。每次推送和 Pull Request 也会由 GitHub Actions 自动执行同一套验证。

隐私与离线能力

• 编辑内容只写入浏览器的 LocalStorage 或 IndexedDB。
• 应用不会发送网络请求，也没有分析统计或后端接口。
• Highlight.js 已随项目离线打包，断网仍可进行代码高亮。
• README 徽章只在浏览 GitHub 项目页时加载，不属于应用运行时。

参与贡献

欢迎提交 Issue 和 Pull Request。开始前请阅读 贡献指南 与 变更记录。

License

MIT © 2026 PianoCello