像 Mac Finder 一样的 JSON 查看器 - JSON Hero

开源
JSON Hero 是一个开源的、漂亮的 JSON 查看器,可让你快速浏览、搜索和导航你的 JSON 文件,在 Cloudflare Workers 上运行的混合 React 应用程序,用 Typescript 编写。

如果你的 JSON 文档嵌套很深的话,那么你不得不手动折叠层次结构的一部分去关注你关心的 JSON 子集。

MacOS 的 Finder 通过提供方便的列视图解决了其中一些问题,如下图所示:

如果我们将这些相同的原则应用于 JSON 文档,它可能看起来像这样:

它具有你期望的所有功能:键盘导航、路径栏、历史记录。它还有一个优秀的功能,允许你保持选定的后代并在层级结构中向上移动,然后同级之间移动并查看在该路径中找到的不同值,描述起来可能有点抽象,我们可以通过下面的动画来演示:

智能预览面板

我们构建了一个预览面板,显示有关当前选择的更多信息。它可以自动推断所选项目的内容,并为你提供日期和时间、网站、推文、youtube 视频、颜色等的智能预览:

关联值

可以轻松查看整个 JSON 文档中特定字段的所有相关值,包括任何未定义的或空值:

搜索

要想查找特定的数据,可以使用 CMD+K 快捷键快速调出模糊搜索的面板,可以搜索对象键、路径、值,甚至格式化值,例如搜索Dec可以找到2021-12-01T13:56:12Z。

经典视图

列表视图可能不适合所有的场景,所以 JSON Hero 也提供一个经典的 JSON 树视图模式。

我们从头开始构建了这个树视图模式,以便快速并扩展到大型文档,利用出色的 react-virtual 项目来确保平滑滚动,它也是一个符合 ARIA 的树形视图,并具有你期望快速遍历和折叠/展开内容的所有快捷键。

我们还包括一个由 CodeMirror 6 驱动的编辑器,当你在文档中移动时,它会保留你从侧边栏中获得的预览和相关值:

自动推断的 JSON Schema

可以使用我们的自动推断模式生成器(由 @jsonhero/schema-infer 提供支持)从你的 JSON 中创建 JSON 模式文档:

分享

轻松共享指向你的 JSON 文档的链接,甚至链接到文档的特定部分。

重要提示:任何拥有你 JSON 文档的 URL 的人都可以查看它,并且所有 JSON Hero 都是公开的。如果你使用的是 jsonhero.io,则你的数据存储在 Cloudflare KV 中。

插件

现在 JSON Hero 也支持在 VSCode 中使用,直接安装官方提供的插件 https://marketplace.visualstudio.com/items?itemName=JSONHero.jsonhero-vscode 即可。

文档链接:https://github.com/jsonhero-io/jsonhero-web。

责任编辑:姜华 来源: Github爱好者
相关推荐

2023-04-05 14:19:07

FlinkRedisNoSQL

2013-12-31 09:19:23

Python调试

2022-12-21 15:56:23

代码文档工具

2023-05-23 13:59:41

RustPython程序

2013-12-17 09:02:03

Python调试

2015-04-09 11:27:34

2021-05-20 08:37:32

multiprocesPython线程

2015-03-16 12:50:44

2013-08-22 10:17:51

Google大数据业务价值

2011-01-18 10:45:16

乔布斯

2012-06-08 13:47:32

Wndows 8Vista

2015-02-05 13:27:02

移动开发模块SDK

2022-11-24 12:22:39

2016-10-08 00:24:53

httptcp实时

2021-08-27 06:41:34

Docker ContainerdRun&Exec

2012-03-21 10:15:48

RIM越狱

2021-12-14 19:40:07

Node路由Vue

2017-05-22 10:33:14

PythonJuliaCython

2021-09-07 10:29:11

JavaScript模块CSS

2011-10-24 13:07:00

点赞
收藏

51CTO技术栈公众号