josdejong/jsoneditor

これは何？

主な機能

• 01フィールドや値の編集、移動、複製、並べ替えができるツリーモード。
• 02シンタックスハイライト、整形、圧縮に対応したコードモード。
• 03最大500 MiBのJSONドキュメントを扱えるプレビューモード。
• 04すべてのモードでajvを使ったJSON Schema検証。
• 05JMESPathクエリによるJSONデータの変換。
• 06壊れたJSONの修復。

ユースケース

• Web管理画面や設定ツールへのJSONエディタの組み込み。
• ブラウザ上でのAPIレスポンスや設定ファイルの確認・修正。
• ユーザーが送信したデータを保存する前の、スキーマに基づくJSON検証。
• プレビューモードを使った大きなJSONファイルの閲覧。

クイックスタート

1. 1

   npmでライブラリをインストールします

   npm install jsoneditor
2. 2

   HTMLページにCSSファイルとJSファイルを読み込み、コンテナ要素内にエディターを作成します

使う前に知っておきたいこと

• !READMEには、後継としてsvelte-jsoneditorが紹介されていますが、新しいエディターは完全な互換品ではないと記載されています。

トピック

よくある質問

jsoneditor とは？

Webアプリに組み込める、ツリー・コード・テキスト・プレビューの各モードを備えたWebベースのJSONビューア・エディタコンポーネント。 JSON Editorを使うと、ブラウザ上でJSONの表示、編集、整形、検証ができます。フィールドや値を視覚的に変更できるツリーエディタ、シンタックスハイライト付きのコードエディタ、プレーンテキストエディタ、大きなドキュメント（最大500 MiB）に対応するプレビューモードなど、複数のモードを利用できます。

jsoneditor は無料で使えますか？ライセンスは？

jsoneditor は Apache-2.0 ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

jsoneditor は今もメンテナンスされていますか？

活発にメンテナンス中。jsoneditor の最終コミットは 2026年11月1日 です。

jsoneditor は何に使えますか？

Web管理画面や設定ツールへのJSONエディタの組み込み。 ブラウザ上でのAPIレスポンスや設定ファイルの確認・修正。 ユーザーが送信したデータを保存する前の、スキーマに基づくJSON検証。 プレビューモードを使った大きなJSONファイルの閲覧。

jsoneditor のインストール方法は？

npmでライブラリをインストールします: npm install jsoneditor HTMLページにCSSファイルとJSファイルを読み込み、コンテナ要素内にエディターを作成します

jsoneditor はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/josdejong/jsoneditor