[JS/TS] JSON数据可视化工具JSON Hero详解：在线使用与视图功能全解析

JSON Hero 是一款开源的、界面美观的 Web 版 JSON 浏览器，能够帮助开发者快速浏览、搜索和导航 JSON 文件。它由 Trigger.dev 团队构建。

该工具通过简洁直观的用户界面和丰富的功能，极大地简化了阅读和理解复杂JSON文件的过程。其主要功能包括：

• 多视图支持：提供列视图、树状视图、编辑器视图等多种方式查看JSON结构。
• 智能预览：自动推断字符串内容（如URL、日期、颜色、图片链接等）并提供对应的可视化预览。
• 模式推断：可生成推断的 JSON Schema，用于验证数据结构。
• 相关值扫描：快速扫描并高亮显示数组中相似或相关的值，便于检查边界情况。
• 强大搜索：支持在JSON的键和值中进行快速全文搜索。
• URL分享：支持通过URL直接分享JSON文档，并可在URL中指定路径定位。
• 便捷操作：提供键盘快捷键、深色模式支持，并拥有 VS Code 插件等增强功能。

JSON Hero 由 Trigger.dev 团队（一个专注于简化工作流自动化的团队）创建和维护。

该项目在 GitHub 上采用 Apache-2.0 协议开源，目前已获得超过 10.4k Star 和 1k Fork，是一个备受认可的前端优质开源项目。

如何使用 JSON Hero

在线使用

开发者可以通过以下几种便捷的方式将 JSON 数据加载到 JSON Hero 中：

1. 直接访问：打开官网 jsonhero.io，通过拖放 JSON 文件，或将 JSON 字符串、指向 JSON 文件的 URL 粘贴到输入框中。
2. Base64 编码：访问 jsonhero.io/new?j=eyAiZm9vIjogImJhciIgfQ== 这样的链接，其中 j 参数为 Base64 编码后的 JSON 字符串。
3. 指定URL：访问 jsonhero.io/new?url=https://api.example.com/data.json，直接加载远程 JSON 数据。
4. VS Code 插件：安装 JSON Hero 的 VS Code 扩展，即可直接在编辑器中打开并可视化 JSON 文件。
5. 调用 API：通过向 jsonhero.io/api/create.json 发送 POST 请求来创建文档，这对于集成到自动化流程中非常有用。这在Node.js服务端脚本中很容易实现。

API 请求示例：

{
  "title": "API 测试数据",
  "content": { "foo": "bar" },
  "readOnly": false, // 可选，设置为 true 可防止文档被编辑或删除
  "ttl": 3600 // 可选，文档将在 3600 秒后过期
}

API 响应示例：

{
  "id": "YKKduNySH7Ub",
  "title": "API 测试数据",
  "location": "https://jsonhero.io/j/YKKduNySH7Ub"
}

列视图

列视图的设计灵感来源于 macOS 的 Finder，它提供了一种全新的、高效的 JSON 文档浏览方式。该视图支持键盘导航、路径栏、历史记录回溯等功能。

列视图还有一个巧妙的设计：开发者可以按住 Option 键，同时选中某个子元素并向上拖动，即可在保持当前层级路径的同时，在不同兄弟节点的值之间快速切换和比较。

编辑器视图

在编辑器视图中，你可以查看完整的 JSON 源文件。与此同时，侧边栏会同步显示当前光标所在位置数据的精美预览和相关值信息，兼顾了原始代码编辑与可视化理解的便利。

JSON Hero 的功能远不止于此，更多高级用法和场景可参考其官方文档。

参考资料

• JSON Hero 官网: https://jsonhero.io/
• GitHub 仓库: https://github.com/jsonhero-io/jsonhero-web