實用!一款開源的 JSON 視覺化管理工具

語言: CN / TW / HK

簡介

JSON Hero 是一個簡單實用的 JSON 工具,通過簡介美觀的 UI 及增強的額外功能,使得閱讀和理解 JSON 文件變得更容易、直觀。

  • 支援多種檢視以便檢視 JSON:列檢視、樹檢視、JSON 檢視等 列檢視是受 macOS Finder 啟發建立的一種瀏覽 JSON 文件的新方法

  • 自動推斷字串的內容並提供有用的預覽

  • 自動推斷 JSON 的內容、型別並提供有用的建議

  • 快速掃描相關知識並檢查邊緣情況

  • ,時長 00:10

  • 支援檢索 JSON 檔案

  • ,時長 00:14

  • 支援使用鍵盤進行操控

  • 可生成段路徑 URL 輕鬆與他人共享自己的 JSON 檔案

  • ,時長 00:08

專案地址:

https://github.com/jsonhero-io/jsonhero-web

安裝使用

安裝

要在本地執行 JSON Hero,首先 clone 原始碼,並安裝相關依賴項:

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

然後執行以下命令啟動,開啟 http://localhost:8787 即可使用:

npm start

使用

可以通過多種方式將 JSON 檔案發給 JSON Hero 解析

  • 前往 https://jsonhero.io/ 並將 JSON 檔案拖拽到網站上,或在提供的表單中貼上 JSON 或 JSON url
  • 使用包含 JSON 有效負載的 Base64 字串,拼接到 jsonhero.id:jsonhero.io/new?j=eyAiZm9vIjogImJhciIgfQ==
  • 使用包含 JSON 檔案的 url 地址,拼接到 jsonhero.io:jsonhero.io/new?url=https://jsonplaceholder.typicode.com/todos/1
  • 安裝 JSON Hero 的 VS Code 擴充套件並從 VS Code 開啟 JSON
  • Raycast 使用者也提供了相關的擴充套件外掛可直接安裝:https://www.raycast.com/maverickdotdev/open-in-json-hero
  • 使用非官方 API:使用以下 JSON 發出 POST 請求:
{
  "title": "test 123",
  "content": { "foo": "bar" }
}

將得到如下響應:

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

內容預覽

JSON Hero 會自動推斷字串的內容,並對選擇的值提供有用的預覽和屬性。

  • 日期和時間

  • 圖片網址

  • 網站網址

  • 推特網址

  • JSON URL

  • 顏色

相關值

可以輕鬆檢視整個 JSON 文件中特定欄位的所有相關值,包括 undefined 和 null 值。