About the JSON Visualizer
Reading indentation tells you how deep a document goes, but it does not show the shape at a glance. This visualizer lays the document out as a left to right graph. Each object and array becomes a box with its child count, each scalar becomes a leaf box with its value, and curved edges connect parents to children so branching is obvious even before you read a single key.
The drawing is plain SVG built in the page, with box colours taken from the same palette as the editors, so the diagram stays legible in the light and the dark theme. Column widths adapt to the longest label in that column, which keeps deep documents compact instead of pushing everything to the right.
Two controls decide how much detail appears. Levels to draw stops the recursion at a chosen depth and marks any node whose children were left out with an ellipsis, which is the fastest way to survey a large API response. Turning off leaf values shows types only, useful when the numbers are noise and you only care about the skeleton. A hard limit of four hundred nodes protects the browser from an accidental paste of a huge file.
Copy hands back a text outline of the same tree rather than the SVG markup, which pastes neatly into a design note or an issue. For an interactive click through instead of a picture, open the JSON Navigator.
How to use
- Paste a JSON document, or press Sample to load a flight record.
- Set Levels to draw to control how deep the diagram goes.
- Untick Show leaf values to draw types only when the values are noise.
- Scroll the diagram sideways for wide documents, then press Copy for a text outline.
Common questions
- Can I export the diagram as an image?
- Not directly. The diagram is live SVG in the page, so a screenshot is the quickest route. Copy gives you a text outline of the same tree.
- Why do some boxes end with an ellipsis?
- Their children were not drawn because the depth limit was reached or the node cap was hit. Raise the level count to see more.
- How large a document can it handle?
- Drawing stops after four hundred nodes so the page stays responsive. Larger files are better explored one branch at a time in the navigator.
- Are array items drawn individually?
- Yes, each item gets its own box labelled with its index, which makes a ragged array obvious at a glance.