JSON Hero

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

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

特征

发送给 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 文档的新方法。

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

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

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

编辑器视图

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

树视图

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

搜索

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

内容预览

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

日期和时间

图片网址

网站网址

推文网址

JSON URL

颜色

相关值

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

错误和功能请求

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

您还可以加入我们的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 build或 npm run dev构建。

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