Paste JSON to explore it visually
Nodes are draggable · Scroll to zoom · Drag canvas to pan
Visual JSON Exploration
The JSON Explorer renders your JSON as an interactive graph — each object and array becomes a node with expandable rows. Follow the connections between parent and child nodes to understand deeply nested data structures at a glance.
How to Use
- 1Paste your JSON into the input panel on the left
- 2The graph renders automatically — each object/array is a node
- 3Click any node header to expand or collapse its children
- 4Drag on the canvas to pan, scroll to zoom
- 5Click 'Fit View' to re-center the graph
- 6Click 'Copy Share URL' to share with a colleague
Smart Value Previews
URLs
String values starting with http:// or https:// become clickable links
Colors
CSS hex colors like #3b82f6 show a color swatch alongside the value
Dates
ISO date strings are displayed in a human-readable format
Nested objects
Objects and arrays show their size — click to expand as a new node
Tree View vs. Graph View: When to Use Which
These aren't competing tools — they answer different questions. Reach for a linear tree view (like the JSON Formatter) when you want to drill top-down into one known path and read exact values — it's compact and familiar. Reach for the graph viewhere when you need to see the overall shape of the data, spot repeated substructures across siblings, or explain a payload's architecture to a teammate visually rather than scrolling through indentation. The two are complementary: explore the shape here, then switch to the Formatter to read and copy exact field values once you know where to look.
Where a Node Graph Beats a Tree View
- ▸Onboarding onto an unfamiliar API — Paste a real response and visually trace how objects nest and connect before writing any integration code.
- ▸Debugging a deeply nested payload — Collapse everything except the branch you care about instead of scrolling past hundreds of irrelevant lines.
- ▸Explaining a data shape to a teammate — Share a live, navigable graph link instead of a static screenshot of formatted JSON.
- ▸Spotting structural inconsistencies — Visually compare sibling nodes at the same depth to catch a field that's an object in one branch and a string in another.
- ▸Reading recursive or tree-shaped data — AST dumps, GraphQL responses, comment threads, and org/permission hierarchies are naturally graph-shaped — a node graph mirrors the data's real structure instead of flattening it into indentation.
- ▸Scoping a schema migration — See every place a field appears across a large document at a glance before deciding how a rename or type change ripples through it.