JSON Graph Visualization
See a JSON document as a graph instead of text. Objects and arrays become nodes you can expand and collapse, so the shape of a payload is visible at a glance. Click any node to see its JSONPath, and drag to pan or scroll to zoom. Documents over 2,000 nodes are drawn partially, with the limit stated on screen.
How to use the JSON Graph Visualization
- Paste a JSON document in the left pane and click Draw graph.
- Click a node to collapse or expand it, drag the canvas to pan, and use the toolbar to zoom or expand everything.
- Click any node to select it and copy its JSONPath from the strip under the canvas.
Example
Select the author name node to see the path $.author.name.
{
"name": "json-utils",
"version": "1.0.0",
"private": false,
"tags": ["json", "tools"],
"author": { "name": "Ada", "active": true },
"score": 9.5,
"notes": null
}Frequently asked questions
What happens with very large documents?
The first 2,000 nodes in document order are drawn and the rest stay collapsed behind count badges, with a note on screen saying exactly how many nodes are hidden. You can expand subtrees to explore within the same budget.
How is this different from the Tree Viewer?
The Tree Viewer is a text list for searching and reading values. The graph draws the same structure spatially, which makes nesting, wide objects, and deep branches easier to judge at a glance.