JSON Hero是一款 “智能 JSON 可视化工具”，专为简化JSON数据的浏览和分析而生。普通工具只能让你 “看到” JSON 文本，而它能帮你 “看懂” JSON 数据 —— 自动整理结构、智能识别内容、快速定位信息，甚至支持团队共享，彻底解决 JSON 处理的三大痛点：结构乱、找得慢、分享难。

它通过一个直观且功能丰富的用户界面，使用户能够轻松地探索和操作JSON文件。无论是在数据结构的可视化呈现，还是在快速定位和分析数据方面，JSON Hero都提供了前所未有的便捷体验。而且它完全免费开源，既能在线用（官网：jsonhero.io），也能下载代码本地部署，敏感数据保存在自己电脑，安全感拉满～

JSON Hero通过提供简洁美观的界面，并配备了丰富的额外功能，使阅读和理解JSON文件变得轻松。它的主要功能特点包括：

• 支持多种视图以便查看 JSON：列视图、树视图、JSON 视图等

• 支持 JSON 数据的语法高亮，使数据更具可读性

• 自动推断 JSON 的内容、类型并根据不同的类型提供不同的预览

• 和属性

• 快速扫描相关值以检查边缘情况

• 支持检索 JSON 文件（包括键和值）

• 支持使用键盘进行操控

• 可生成 URL 轻松与他人共享自己的 JSON 文件

列视图：借鉴了 Mac 文件管理器的设计，点击节点就像打开文件夹，右侧自动显示下一层内容，还能通过键盘快速导航，逛数据比逛相册还丝滑

树视图：经典的 “折叠展开” 模式，不同类型数据自动上色，层级一目了然，再也不用数大括号了

JSON视图：在编辑器中查看整个JSON文档，但保留侧边栏的预览和相关值，方便在文档中移动

​

键盘导航：

内容搜索：支持模糊搜索：不管是搜键名（比如 “shippingFee”）、键路径（比如 “user.address”），还是值内容（比如邮箱、日期），输入关键词瞬间出结果

智能识别：它能自动认出字符串里的图片 URL、网站链接、日期时间，甚至颜色值 —— 遇到图片链接直接显示预览，看到日期自动格式化，不用再手动复制链接打开查看，效率直接翻倍

日期时间预览：

图片链接预览：

网站链接预览：

JSON链接预览：

颜色预览：

相关值查看：使用户能够一键查看整个JSON文档中与特定字段相关的所有值，包括那些可能被忽略的undefined或null值。这项功能对于数据清洗、验证和分析尤为重要，因为它能够帮助用户全面地掌握数据的分布情况，从而做出更准确的决策

本地部署：

1、克隆仓库并安装依赖

git clone https://github.com/triggerdotdev/jsonhero-web.gitcd jsonhero-webnpm install

2、创建名称为.env的文件并在其中设置环境变量

SESSION_SECRET=abc123

3、执行构建命令

npm run build 或者npm run dev

4、执行启动命令并在浏览器中访问 http://localhost:8787 进行查看

npm start

在线使用：

进入官网：https://jsonhero.io/，可以在右侧输入框输入JSON文档的Url或者输入/粘贴JSON内容，之后点击右侧Go按钮进入工具界面；也可以拖拽JSON文件到输入框下方或者点击来打开选择文件对话框来选择JSON文件后直接进入工具界面，也可以点击下方的示例JSON打开示例的JSON文件。

开源地址：https://github.com/triggerdotdev/jsonhero-web