2022 年网络编程:

https://twitter.com/tlakomy/status/1491049739978436612

因此,我们着手创建一个新工具,让 JSON 的阅读和理解比 Wall-O-Text 更容易、更高效:

在深度嵌套的文档中很容易迷失方向,最终您不得不求助于手动折叠层次结构的一部分,以便更轻松地专注于您关心的 JSON 子集。不幸的是,这使得比较相关值变得困难且耗时。

macOS Finder 通过提供方便的列视图解决了其中一些问题

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

它具有您期望的所有功能:键盘导航、路径栏、历史记录。立即在jsonhero.io 上试用

它还有一个漂亮的功能,允许您“保持”选定的后代并在层次结构中向上移动,然后在兄弟姐妹之间移动并查看在该路径中找到的不同值。这很难描述,但这里有一个动画来帮助演示:

智能预览窗格

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

相关值

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

搜索一切

寻找特定的东西?使用CMD+K,快速拉起模糊搜索调色板。搜索对象键、路径、值,甚至格式化值(例如,搜索“Dec”会找到“2021-12-01T13:56:12Z”)

秉承传统

列视图可能不是所有场合的正确视图,所以我们也构建了一个经典的 JSON 树视图

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

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

自动推断 JSON Schema

使用由@jsonhero/schema-infer提供支持的自动推断模式生成器,从 JSON 创建 JSON 模式文档开始:

分享就是关怀

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

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

100% 开源

如果您想自己贡献或运行 JSON Hero,请随时加入我们的GitHub。 JSON Hero 是一个remixReact 应用程序,运行在Cloudflare Workers上,用 Typescript 编写。

👉 请在GitHub上给我们一个star 以获取最新更新🌟