APIヒーローによってもたらされました

JSON Hero は、API Hero の背後にあるチームによって作成され、保守されています。API Hero を使用すると、お気に入りのフレームワークを使用して人気のある API をプロジェクトにすばやく簡単に追加し、心配することなくスケーリングできます。

JSON ヒーロー

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

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

顔立ち

JSON ヒーローに送信

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

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

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

• エンドポイントへの JSON URL を含める:jsonhero.io/new?url=https://jsonplaceholder.typicode.com/todos/1

  new

• VS Code拡張機能をインストールし、VS Code から 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 Hero は文字列の内容を自動的に推測し、選択した値の便利なプレビューとプロパティを提供します。それはJSONのための "Show Don't Tell"です:

日付と時刻

画像の URL

ウェブサイトの URL

ツイートのURL

JSON の URL

色

関連する値

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

undefined

null

バグと機能要求

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

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

現像

ローカルで実行するには、まずリポジトリを複製し、依存関係をインストールします。

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

次に、呼び出されたリポジトリのルートにファイルを作成し、値を設定します。

.env

SESSION_SECRET

SESSION_SECRET=abc123

次に、走るorビルドします。

npm run build

npm run dev

今、実行ブラウザを開いて

npm start

http://localhost:8787