JSON graph viewer
About JSON Graph Viewer
This JSON graph viewer draws a JSON document as a diagram. Every object and array becomes a card that lists its fields, and nested objects and arrays branch off as linked cards, left to right.
Use it to understand the shape of an unfamiliar API response, explain a payload to a teammate, or find where a value sits in a deeply nested config. Pan, zoom, collapse branches, search, and export the graph as a PNG or SVG image.
Runs in your browser. Nothing is uploaded.
How it works
One card per object or array
Each card is headed by its key and its size, such as 4 keys or 12 items. Strings, numbers, booleans and null are listed inside the card in their syntax colors. A field that holds a non-empty object or array shows its size, like {3} or [2], and a line links it to that child card.
Pan, zoom and fit
Drag the canvas or scroll to pan. Hold Ctrl or ⌘ while scrolling, or pinch on a trackpad, to zoom toward the pointer. The + and − buttons zoom around the center, and fit brings the whole graph back into view.
Collapse branches
The − button on a card hides everything below it, and the card then shows +N with the number of hidden cards. Large documents open with deeper levels collapsed so the first view stays readable. Expand all and collapse all work on the whole document.
Search and copy paths
Type in the search box to highlight matching keys and values. Press Enter to jump to the next match and Shift+Enter for the previous one. Click a card to see its JSONPath, such as $.shipment.events[0], and copy it for a JSONPath or jq query.
Export as PNG or SVG
Download the full graph, not only the visible part, as an SVG for docs and slides or as a PNG image. The export uses the colors of the current light or dark theme.
Frequently asked questions
How do I visualize JSON as a graph?
Paste the JSON into the input pane, upload a .json file, or drop it on the page. The graph appears on the right and updates as you type. Invalid JSON shows the line and column of the first error instead.
Can I view large JSON files as a graph?
Yes. Big documents open with deeper levels collapsed, and arrays or objects with more than 100 entries list the first 100 and summarise the rest. Expand only the branches you need, or switch to the tree view for very large files.
What is the difference between the graph view and the tree view?
The tree view nests everything in one indented list, which is compact for reading values. The graph view lays objects out side by side with links between them, which makes the overall structure and the relationships between nested objects easier to see.
Can I save the graph as an image?
Yes. Use the png or svg button above the graph. The whole graph is exported at full size with the current theme's colors. SVG stays sharp at any zoom level.
Is my JSON uploaded anywhere?
No. Parsing, layout and image export all happen in your browser tab. The data never leaves your device.
Does the graph change my data?
No. It only displays the parsed document. Copy and Download in the toolbar give you the same JSON pretty-printed with 2-space indentation. Integers above 2^53 lose precision when parsed, as in any JavaScript-based tool.
Sources & last verified
We checked this tool's behavior and the claims on this page against the specifications below on . The tool runs in your browser, so the output you see is exactly what the engine produced.
- RFC 8259: The JSON Data Interchange Format
- ECMA-404: The JSON data interchange syntax
- RFC 9535: JSONPath query expressions
Found a wrong result or an outdated claim? Report an error and we will check it again.
JSON Viewer
JSONPath Tester
JSON Size Analyzer
JSON Minifier
JSON Escape / Unescape
JSON Sorter