JSON Graph
InteractiveIn-browser onlyDrawing the graph…
Every object and array becomes a node; keys and values stay inside it. Nothing leaves your browser.
Visualise JSON as an interactive node graph — click any node to see its path. 100% in-browser.
How to visualize JSON as a graph
Three steps from a wall of brackets to a structure you can read at a glance — with nothing leaving your browser.
- 01
Paste, type, or upload JSON into the Source pane — it is parsed in your browser, never uploaded.
- 02
Read the structure as a node graph: every object and array becomes a node, and its keys and values stay inside it.
- 03
Click a node for its JSONPath, collapse branches you are not reading, search keys and values, then export SVG or PNG.
What the JSON graph gives you
Structure, not noise
Objects and arrays become nodes; their keys and values stay inside them. Your document shape is what you see, not one box per key.
The path is the navigation
Click any node for its canonical JSONPath, ready to copy into code, a jq query, or a bug report.
Search the whole document
Matching runs over the model, so a hit inside a collapsed or off-screen branch is still found and stepped to.
Collapse what you are not reading
Fold any branch, or every branch at once, to bring a large payload down to the part that matters.
Vector and raster export
Download the entire graph as SVG or PNG — generated from the graph itself, so it is sharp and complete rather than a screenshot.
Honest about limits
Very large documents are drawn breadth-first against a device-scaled budget, and the graph says exactly how many branches it left out.
JSON graph questions
How does the JSON graph visualizer work?
Each object and array in your document becomes a node, and the keys and primitive values it holds are listed inside that node. Nested objects and arrays become their own nodes, joined by a labelled edge. That keeps the graph proportional to your document structure rather than its number of keys, so a flat object with 500 fields is one readable node instead of 500 scattered ones.
What is the JSONPath shown when I click a node?
Clicking any node fills the path bar with its canonical JSONPath, such as $.user.roles[0]. Click the path to copy it. Keys that are not plain identifiers are bracket-quoted automatically, so $['first name'] is always valid to paste back into code or a query.
Is my JSON uploaded to a server to render the graph?
No. Parsing, graph building, layout, search and export all run entirely inside your browser, in a Web Worker. Nothing is transmitted, logged, or stored. That makes it safe for production configs, API responses, and payloads containing credentials.
Can I export the JSON graph as an image?
Yes. Export as SVG for true vector output you can scale or edit, or as PNG for pasting into documents and tickets. Both export the entire graph, not just the part currently visible on screen, and both are generated locally from the graph model rather than by screenshotting the page.
What happens with very large JSON files?
The graph expands breadth-first against a node budget scaled to your device, so the shallow structure you use to orient yourself is always drawn first. If a document exceeds that budget the graph tells you how many branches were not drawn rather than silently hiding them or freezing the page.
Can I link someone directly to a node in the graph?
Yes. Add a path query parameter to the URL — for example /json-graph?path=$.user.roles[0] — and the graph opens with that node selected, provided the same document is loaded.