JSON Hero初体验

最近收到不少的微信公众号推送, 都提到了一个在Github开源的JSON可视化工具: jsonhero-web, 搜索了一下, 这个工具主要实现的功能就是JSON的可视化, 可以方便快捷的浏览JSON文件, 展现结构参考了MacOS的Finder, 有点意思, 部署一个试试看效果

部署

jsonhero-io/jsonhero-web: JSON Hero is an open-source, beautiful JSON explorer for the web that lets you browse, search and navigate your JSON files at speed. 🚀

结合官方文档, 本地快速部署的方法如下

# 设置一个密码
PASSWD=$(openssl rand -hex 16)

# 克隆项目并安装项目
git clone https://github.com/jsonhero-io/jsonhero-web.git
cd jsonhero-web
npm install

# 初始化.env文件
echo "SESSION_SECRET=${PASSWD}" > .env

# 启动服务
npm start &

# 展示访问地址
echo "Access service via http://localhost:8787 using password ${PASSWD}"

此时访问http://localhost:8787, 可以看到页面正确展示, 支持两种JSON解析模式

支持两种模式解析

试用

就以AWS Pricing API为例, 这个提取的结果都是JSON格式的文件, 并且如果需要查询EC2的价格信息, JSON的嵌套深度很深, 可以发挥JSON Hero的优势

读取在线JSON

https://pricing.amazonaws.com/offers/v1.0/cn/index.json

尝试解析JSON

界面展示

总览

左侧有总览信息, 右侧可以切换Schema, 支持⌘(Command)+K快速检索, 左下角有快捷键提示, 右下角支持切换暗黑模式

界面友好

不过切换暗黑模式后, 报错了...

暗黑模式报错了

报错日志

先继续, 后续再看这个报错问题¹

左侧的边栏可以展示不同的视图格式, 分别是:

• 列视图(Column View) 快捷键⌘+1
• 编辑器视图(JSON View) 快捷键⌘+2
• 树状图(Tree View) 快捷键⌘+3

并且可以通过快捷键⌘+4进入命令行(截止2022-06-05 该功能在开发中)

左侧边栏展示

日期类型

针对于date类型, 可以展示类似于日历页的相关属性

DATE类型展示

图片预览

针对于图片类型, 可以展示预览图

图片预览

颜色HEX

针对于颜色HEX代码, 可以展示颜色预览图

颜色HEX

Schema视图

对于普通JSON, 有数据和格式的tab页供查看

可以查看Schema

其他

支持以下内容的预览, 不一一测试了

• URL: 网站
• URL: 推特
• URL: JSON

参考博文

JSON Hero 好用的json工具_fxnawm的博客-CSDN博客

---

1. 该问题已经创建了Github Issue↩︎