60

0

JSON Hero

JSON Hero 是一个开源的、漂亮的网络 JSON 浏览器,可让您快速浏览、搜索和导航您的 JSON 文件

JSON Hero

JSON Hero 通过为您提供包含额外功能的干净美观的 UI,使阅读和理解 JSON 文件变得容易。

  • 以您喜欢的任何方式查看 JSON:列视图、树视图、编辑器视图等。
  • 自动推断字符串的内容并提供有用的预览
  • 创建可用于验证 JSON 的推断 JSON 模式
  • 快速扫描相关值以检查边缘情况
  • 搜索您的 JSON 文件(键和值)
  • 可使用键盘
  • 具有路径支持的可轻松共享的 URL

JSON英雄截图

特征

发送给 JSON Hero

以多种方式将您的 JSON 发送到 JSON Hero

  • 前往jsonhero.io并拖放 JSON 文件,或在提供的表单中粘贴 JSON 或 JSON url

  • 包含 JSON 有效负载的 Base64 编码字符串:jsonhero.io/new?j=eyAiZm9vIjogImJhciIgfQ==

  • 包含一个指向 new端点的 JSON URL:jsonhero.io/new?url=https: //jsonplaceholder.typicode.com/todos/1

  • 安装VS Code 扩展并从 VS Code 打开 JSON

  • 光线投射用户?在这里查看我们的扩展

  • 使用非官方 API:

    • 使用以下 JSON 正文发出 POST请求:jsonhero.io/api/create.json
    {
      "title": "test 123",
      "content": { "foo": "bar" }
    }

    JSON 响应将如下所示:

    {
      "id": "YKKduNySH7Ub",
      "title": "test 123",
      "location": "https://jsonhero.io/j/YKKduNySH7Ub"
    }

列视图

受 macOS Finder 的启发,Column View 是一种浏览 JSON 文档的新方法。

JSON 英雄列视图

它具有您期望的所有功能:键盘导航、路径栏、历史记录。

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

列视图 - 带上下文遍历

如您所见,在移动到父级时按住 Option(或 AltWindows 上的键)会保持选定的文档部分并在其周围 JSON 的上下文中显示它。然后,您可以在数组中的项目之间进行遍历,并在深度层次结构中比较选择的值。

编辑器视图

在编辑器中查看整个 JSON 文档,但在文档中移动时保留从侧边栏中获得的漂亮预览和相关值:

编辑器视图

树视图

使用传统的树视图遍历您的 JSON 文档,并带有可折叠的部分和键盘快捷键。同时保持漂亮的预览:

树视图

搜索

快速打开搜索面板并在几毫秒内模糊搜索整个 JSON 文件。搜索键名、键路径、值,甚至是格式化的值(例如,搜索 "Dec"将在 12 月份找到日期时间字符串。)

搜索

内容预览

JSON Hero 自动推断字符串的内容,并为您选择的值提供有用的预览和属性。这是 JSON 的“Show Don't Tell”:

日期和时间

预览颜色

图片网址

预览颜色

网站网址

预览网站

推文网址

预览推文

JSON URL

预览 JSON

颜色

预览颜色

相关值

轻松查看整个 JSON 文档中特定字段的所有相关值,包括任何 undefinednull值。

编辑器视图

错误和功能请求

有错误或功能请求?随意打开一个新问题

您还可以加入我们的Discord 频道,闲逛并讨论您想要的任何内容。

发展

要在本地运行,首先克隆 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 buildnpm run dev构建。

现在,运行 npm start并打开浏览器 http://localhost:8787