How the JSON visualizer draws your data
Strings, numbers, booleans and null are rows inside their card. A nested object or array is a row showing its size, like {2} or [3], with a line to its own card. Cards line up in columns by depth from root on the left, and array items are titled by index, such as teams[0].
{
"league": "Sunday 5-a-side",
"season": 2026,
"teams": [
{ "name": "Red Kites", "captain": { "name": "Ines", "number": 9 }, "players": ["Ines", "Tomas", "Bea"] },
{ "name": "Night Owls", "captain": { "name": "Raj", "number": 4 }, "players": ["Raj", "Lena"] }
],
"venue": { "name": "Riverside Park", "pitch": 3 }
}This draws nine cards in four columns: root; teams and venue; teams[0] and teams[1]; then a captain and a players card for each team.
Controls
- Pan: drag the background.
- Zoom: scroll, pinch on a trackpad or touch screen, or press + and −. Fit shows the whole graph again.
- Collapse: click a card’s header. It then shows how many cards it hides:
+6forteamsabove. - Export: PNG saves the whole graph, not only the visible part, at twice screen resolution in the current theme’s colors. Collapse what you don’t need first.
Limits on large documents
The graph is built breadth first, so the deepest branches are the first to be left out:
- Up to 600 cards are drawn, and a note says how many were left out.
- Each card lists its first 12 keys or items and sums up the rest, as in
… 38 more. Cards under those rows are not drawn, so an array of 50 records shows 12. - Strings are cut to 40 characters.
The tree in the JSON viewer and the JSON to table view show every value.
When a graph helps
Use it to learn the shape of an unfamiliar API response, explain a payload in a ticket, or spot repeated structures. If you came looking for a JSON Crack alternative, the idea is the same: objects as nodes, nesting as edges, here in one editor with the Tree and Table tabs. To describe the shape in text, use the JSON schema generator.