jsonhero-web - JSON Heroは、Web用のオープンソースの美しいJSONエクスプローラーであり、JSONファイルを高速に参照、検索、ナビゲートできます。🚀

(JSON Hero is an open-source, beautiful JSON explorer for the web that lets you browse, search and navigate your JSON files at speed. 🚀)

Created at: 2022-03-01 17:33:29
Language: TypeScript
License: Apache-2.0

JSONヒーロー

JSON Heroは、追加機能が満載のクリーンで美しいUIを提供することで、JSONファイルの読み取りと理解を容易にします。

  • 列ビュー、ツリービュー、エディタービューなど、任意の方法でJSONを表示します。
  • 文字列の内容を自動的に推測し、便利なプレビューを提供します
  • JSONの検証に使用できる推定JSONスキーマを作成します
  • 関連する値をすばやくスキャンして、エッジケースを確認します
  • JSONファイル(キーと値の両方)を検索する
  • キーボードアクセス可能
  • パスをサポートする簡単に共有可能なURL

JSONヒーローのスクリーンショット

特徴

JSONヒーローに送信

さまざまな方法でJSONをJSONヒーローに送信します

  • jsonhero.ioに移動してJSONファイルをドラッグアンドドロップするか、提供されたフォームにJSONまたはJSONURLを貼り付けます

  • JSONペイロードのBase64エンコード文字列を含めます:jsonhero.io/new?j=eyAiZm9vIjogImJhciIgfQ==

  • エンドポイントへのJSONURLを含めます:jsonhero.io/new?url=https

    new
    : //jsonplaceholder.typicode.com/todos/1

  • VS Code拡張機能をインストールし、VSCodeからJSONを開きます

  • Raycastユーザー?ここで私たちの拡張機能をチェックしてください

  • 非公式の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"
    }

カラムビュー

macOSFinderに触発されたColumnViewは、JSONドキュメントを閲覧するための新しい方法です。

JSONヒーロー列ビュー

キーボードナビゲーション、パスバー、履歴など、期待するすべての機能を備えています。

また、選択した子孫を「保持」して階層を上に移動し、兄弟間を移動してそのパスで見つかったさまざまな値を表示できる便利な機能もあります。説明するのは難しいですが、ここにデモンストレーションに役立つアニメーションがあります。

列ビュー-コンテキストでトラバース

ご覧のとおり、親に移動するときに

Option
(または
Alt
Windowsのキー)を押したままにすると、ドキュメントの一部が選択されたままになり、周囲のJSONのコンテキストで表示されます。次に、配列内のアイテム間を移動し、深い階層のチャネル間で選択の値を比較できます。

エディタービュー

JSONドキュメント全体をエディターで表示しますが、ドキュメント内を移動するときにサイドバーから取得したプレビューと関連する値を保持します。

エディタービュー

ツリー表示

従来のツリービューを使用して、折りたたみ可能なセクションとキーボードショートカットを使用してJSONドキュメントをトラバースします。素敵なプレビューを維持しながら:

ツリー表示

探す

検索パネルをすばやく開き、JSONファイル全体をミリ秒単位であいまい検索します。キー名、キーパス、値、さらにはかなりフォーマットされた値を検索します(たとえば、検索する

"Dec"
と、12月の日時文字列が検索されます)。

探す

コンテンツプレビュー

JSON Heroは文字列の内容を自動的に推測し、選択した値の便利なプレビューとプロパティを提供します。JSONの場合は「語るのではなく見せる」です。

日付と時刻

プレビューカラー

画像のURL

プレビューカラー

ウェブサイトのURL

ウェブサイトをプレビューする

ツイートURL

ツイートのプレビュー

JSONURL

JSONのプレビュー

プレビューカラー

関連する値

undefined
任意の値または値を含む、特定のフィールドのJSONドキュメント全体で関連するすべての値を簡単に確認でき
null
ます。

エディタービュー

バグと機能リクエスト

バグや機能のリクエストがありますか?新しい号をお気軽に開いてください。

また、 Discordチャンネルに参加して、好きなことを話し合ったりすることもできます。

現像

ローカルで実行するには、最初にリポジトリのクローンを作成し、依存関係をインストールします。

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

次に、呼び出されたリポジトリのルートにファイルを作成し

.env
、値を設定し
SESSION_SECRET
ます。

SESSION_SECRET=abc123

npm start
次に、ブラウザを実行して開き、
http://localhost:8787