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

Created at: 2022-03-01 17:33:29

Language: TypeScript

编号: https://github.com/apihero-run/jsonhero-web

License: Apache-2.0

由 API 英雄带给你

JSON Hero 由 API Hero 背后的团队创建和维护。API Hero 使你能够使用你喜欢的框架快速轻松地将流行的 API 添加到你的项目中，并且无需担心即可扩展。

杰伦英雄

JSON Hero 通过为你提供一个包含额外功能的干净美观的 UI 来轻松阅读和理解 JSON 文件。

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

特征

发送到 JSON 英雄

以多种方式将 JSON 发送到 JSON 英雄

前往 jsonhero.io 并拖放 JSON 文件，或将 JSON 或 JSON 网址粘贴到提供的表单中
包含 JSON 有效负载的 Base64 编码字符串：jsonhero.io/new?j=eyAiZm9vIjogImJhciIgfQ==
包含指向端点的 JSON URL：jsonhero.io/new？url=https：//jsonplaceholder.typicode.com/todos/1
```
new
```
安装 VS 代码扩展并从 VS 代码打开 JSON
光线投射用户？在此处查看我们的扩展

使用非官方 API：

使用以下 JSON 正文发出请求：
```
POST
```
```
jsonhero.io/api/create.json
```

{
  "title": "test 123",
  "content": { "foo": "bar" },
  "readOnly": false, // this is optional, will make it so the document title cannot be edited or document cannot be deleted
  "ttl": 3600 // this will expire the document after 3600 seconds, also optional
}

JSON 响应将如下所示：

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

列视图

受 macOS Finder 的启发，列视图是一种浏览 JSON 文档的新方式。

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

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

如你所见，在移动到父级时按住（或 Windows 上的键）会使文档的部分保持选中状态，并在围绕 JSON 的上下文中显示它。然后，你可以在数组中的项之间遍历，并跨深层层次结构比较所选内容的值。

Option

Alt

编辑器视图

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

树视图

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

搜索

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

"Dec"

内容预览

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

日期和时间

图片网址

网站网址

推文网址

JSON 网址

颜色

错误和功能请求

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

你也可以加入我们的 Discord 频道闲逛并讨论你想要的任何事情。

发展

若要在本地运行，请先克隆存储库并安装依赖项：

git clone https://github.com/apihero-run/jsonhero-web.git
cd jsonhero-web
npm install

然后，在调用的存储库的根目录下创建一个文件并设置值：

.env

SESSION_SECRET

SESSION_SECRET=abc123

然后，运行或生成。

npm run build

npm run dev

现在，运行并打开浏览器以

npm start

http://localhost:8787