JSON Graph Visualizer
Paste JSON or open a .json file and see its structure as a diagram: every object and array becomes a card, linked to its parent by the key it sits under. Zoom, drag, collapse branches, search for keys or values, copy the path of any field, and save the graph as PNG or SVG.
Last updated:
How to use the JSON Graph Visualizer
- Paste your JSON into the box or open a .json file. A sample store catalog is drawn on load so you can try it right away.
- Explore the graph: drag to move around, scroll or pinch to zoom, and press Fit to see the whole document.
- Collapse branches with the round − button on a card, and open them again with +.
- Search for a key or value; use the arrows or Enter to jump between matches.
- Click a field to see its JSONPath, then copy the path or the value.
- Download the graph as PNG for docs and slides, or SVG for crisp scaling.
Reading the graph
| What you see | Meaning |
|---|---|
Card with a green header and {n} | An object with n keys |
Card with an orange header and [n] | An array with n items; items are labelled by index 0, 1, 2… |
| Green text in quotes | String value |
| Orange text | Number (integers and decimals are the same JSON type) |
| Purple text | true or false |
| Grey text | null, or a link to a nested object or array |
| Line from a row to another card | The key or index on that row holds the nested object or array |
Keyboard and mouse shortcuts
- Drag the canvas to pan; on touch screens drag with one finger and pinch with two.
- Mouse wheel zooms around the pointer; hold Shift to scroll sideways.
- With the graph focused, + and − zoom, 0 fits the whole graph and the arrow keys pan.
- In the search box, Enter goes to the next match and Shift+Enter to the previous one.
- Click a row that links to a nested card, then click it again to collapse or expand that card.
When a graph helps
Graphs are useful for understanding an unfamiliar API response before writing code against it, for spotting inconsistent records in an array (one item with an extra or missing nested object stands out), for explaining a data model in a design document, and for checking how deeply a configuration file is nested. For editing or validating the text itself, the JSON Formatter and JSON Editor are a better fit, and the JSONPath Tester runs queries using the paths you copy here.
Frequently asked questions
What does a JSON graph show?
Each object or array in the document is drawn as a card. Simple values (strings, numbers, true/false, null) are listed inside the card of their parent, and every nested object or array gets its own card connected by a line from the key that holds it. This makes the shape of an API response or config file visible at a glance.
How is this different from a JSON tree viewer?
A tree viewer shows the same data as an indented outline, which is compact and good for reading values. A graph spreads the structure out in two dimensions, which makes it easier to see how deep the nesting goes, which branches are large and how parts relate. Use whichever fits the task.
Can it handle large JSON files?
Files up to 25 MB can be opened. When a document has more than about 250 objects and arrays, deeper levels start collapsed so the page stays responsive, and arrays show the first 60 items in a card. Open branches as needed or use search, which looks through the whole document.
What path format is copied?
Paths use JSONPath dot and bracket notation starting at $, for example $.address.geo.lat or $.products[2]['unit price']. Keys that are not simple identifiers are written in brackets with quotes. The same path works in JSONPath tools and, without the $, in JavaScript.
Why does it say my JSON is invalid?
The input must be strict JSON: keys and strings in double quotes, no trailing commas, no comments and no single quotes. The error shows the line and column where parsing stopped; the real mistake is usually just before that spot.
Is my JSON sent to a server?
No. Parsing, layout and image export all happen in your browser. Nothing is uploaded, so it is safe to use with private API responses or configuration files.
Are all the tools on FreeToolCabin tested for quality and accuracy?
Yes! Every tool on our site undergoes automated Q/A testing in real browser environments to ensure high precision, correct output, and zero errors. If you happen to spot a bug or have a suggestion, please contact us at [email protected] and our team will review it right away.