JSONの可視化・編集ツール
(github.com/podosoft-dev)こんにちは
以前から時々使っていたいくつかの無料JSON Viewerについて、機能面で少しずつ物足りなさを感じていたため、
複数のオープンソースを参考にして、Svelte5ベースで作ってみました。
主な機能は以下のとおりです。
- リアルタイムのJSON構文検証とフォーマット
- ツリー構造のインタラクティブなグラフ可視化
- ノードクリックでJSON上の該当位置へ即時移動
- URLからJSONデータを取得 (GET/POST/PUT/DELETE/PATCH)
- 20件以上の項目を自動折りたたみ (「もっと見る」機能)
- 日本語/英語対応
複雑なJSON構造を視覚的に把握したり、APIレスポンスを分析したりする際に使うことを想定して作りました。
リンク:
フィードバック歓迎です！
ありがとうございます。
15件のコメント
複雑で深いjson構造をよく見るので、こういうツールがあるのはとても便利ですね（笑）。もし可能なら、デスクトップ向けアプリとして作る予定はありませんか？Sublimeみたいな感じで。
現在計画中です
xyflowをお使いなんですね。どうもフローチャートを使うとアイデアがうまく思い浮かばないのですが、素敵ですね。
わあ！ 普段から惜しいと思っていたところですが、本当にすごく見やすいです！
お疲れさまでした。
プログラミング初心者の方にも役立ちそうですね。
ありがとうございます！
JSON5もサポートされると良いと思います！
わあ〜、イブコーディングされたんですか？
はい、主に Claude Code を使い、途中で行き詰まる部分は ChatGPT で確認し、それでも解決できないものは自分でコードを分析して修正方針を確認したうえで、Claude Code に再度指示する方法を使いました。
特に Dagre を適用した際のグラフノードの重なり問題は、どうしても解決できなかったため、私が直接デバッグして修正しました。
この一連の過程を通じて、限界がどこまでなのか、作業指示をどう出すべきかについて多くの経験を積めたと思います。
わあ、いいですね。
ただ、ノードをクリックしても移動はできないようです。
現在は修正されています
ご指摘のケースを確認したところ、移動できるノードがある一方で、できない場合もあることを確認しました。確認のうえ修正してみます。
個人的にエスケープされたJSONを扱うことが時々あるので、JSONエスケープ機能も追加されると良いと思います！
はい、参考にして検討してみます。
とても良いです!! YAML や TOML とも互換性があれば、よく使うようになりそうです
ご指摘ありがとうございます。Yaml、TOMLについては考えが及んでいませんでした。機能追加を検討して進めてみます。