Loading the interactive JSON visualizer…

JSON Visualizer — explore and compare JSON as an interactive graph

JSON Visualizer is a free tool that turns JSON text into a graph of linked cards you can pan, zoom, and click through, and shows the differences between two JSON documents on the same kind of graph. It runs entirely in your browser with no signup, and your data never leaves your device.

Features

How to visualize JSON

  1. Paste or type your JSON into the editor on the left, or use the Paste button to read it from the clipboard.
  2. The graph on the right updates as you type; any syntax error is reported in the editor so you can fix it.
  3. Drag to pan, scroll to zoom, and click a node or entry to highlight where it sits in the source.

Compare two JSON documents

Open the Compare tab and paste one document into each editor. The two are merged into a single diff graph: entries that exist only in the second document are marked as added, entries that exist only in the first are marked as removed, and a running count of each is shown above the graph. Structural mode looks at keys and types only; switch to Values mode to also highlight values that changed, shown as old value → new value.

Frequently asked questions

What is a JSON visualizer?

A JSON visualizer turns raw JSON text into an interactive view so it is easier to understand. JSON Visualizer renders your data as a navigable node graph of linked cards, letting you pan, zoom, and explore nested objects and arrays.

Is JSON Visualizer free?

Yes. JSON Visualizer is completely free to use, with no signup or account required.

Is my JSON uploaded to a server?

No. JSON Visualizer runs entirely in your browser. Your JSON is never uploaded or sent anywhere, so it stays private on your device.

What can I do with the visualized JSON?

You can format and minify JSON, edit it live with line numbers and inline error reporting, click any node to find it in the source, and view live stats such as node count, depth, and byte size.

How do I compare two JSON files?

Open the Compare tab and paste one document into each of the two editors. Added and removed keys and items are highlighted on the diff graph, and switching from Structural to Values mode also highlights values that changed.