《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是一个开源的JSON文件浏览器——JSON Hero。
JSON Hero 由 API Hero 团队创建和维护。API Hero 可以轻松地集成到项目中，无需任何扩展。支持列视图、树视图、编辑器视图等多种预览方式，预览文件支持图片、视频、样式、网站等。
效果展示- 列视图
受 macOS Finder 的启发，Column View 是一种浏览 JSON 文档的新方法。支持键盘导航、路径栏、历史记录等功能。
另外，列视图支持 “持有” 选定的后代并在层次结构中向上移动，然后在兄弟姐妹之间移动并查看在该路径中找到的不同值。很难描述，但这里有一个动画可以帮助演示：
如图所示，在移动到父级时按住Option（或 Alt ）可保持文档的一部分处于选中状态，并在其周围的 JSON 上下文中显示它。然后可以在数组中的项目之间遍历并比较跨深层层次结构的选择值。
- 编辑器视图
在编辑器中查看整个 JSON 文档，但保留在文档中移动时从侧边栏获得的实时预览和相关值：
- 树视图
使用传统的树视图遍历JSON 文档，具有可折叠的部分和键盘快捷键。同时保持实时的预览效果：
- 搜索
快速打开搜索面板并在几毫秒内模糊搜索整个 JSON 文件。支持搜索：键名、键路径、值。
- 内容预览
JSON Hero 自动推断字符串的内容并提供有用的预览和您选择的值的属性。
日期和时间：
图片网址：
网站网址：
推文网址：
JSON 网址：
颜色：
- 相关值
轻松查看整个 JSON 文档中特定字段的所有相关值，包括任何 undefined 或 null 值。
克隆 repo 并安装依赖项：
git clone https://github.com/apihero-run/jsonhero-web.git
cd jsonhero-web
npm install
然后，在名为 repo 的根目录下创建一个文件 .env 并设置SESSION_SECRET值：
SESSION_SECRET=abc123
构建：
npm run build
或
npm run dev
运行：
npm start
访问：http://localhost:8787
-END-
开源协议：Apache2.0
开源地址：https://github.com/apihero-run/jsonhero-web
,
