JSON Tree Viewer
Explore JSON structure as an interactive collapsible tree or graph. Click nodes to expand, hover to copy the full path.
What is a JSON Tree Viewer?
A JSON Tree Viewer transforms raw JSON text into a visual, navigable structure. Instead of scanning through hundreds of lines of nested braces and brackets, you can collapse and expand individual nodes to focus on the part of the data that matters. It is especially useful when working with API responses, configuration files, or any deeply nested payload — making it easy to understand the shape of the data at a glance without modifying it.
Tree view: navigate and search
The tree view renders each key-value pair as an indented row with color-coded types: strings in green, numbers in blue, booleans in amber, and null in grey. Objects and arrays show a count of their children and can be collapsed to a single line. Hover any node to reveal a copy icon that captures the full dot/bracket path (e.g. features[0].name) — ready to paste directly into your code. Use the search box to instantly highlight matching keys and values across the entire tree.
Graph view: visualise the full structure
The graph view renders JSON as an interactive node diagram laid out left-to-right. The root object appears as a content node; each nested object or array becomes a header node connected by arrows to its children. Primitive values inside arrays appear as individual leaf nodes; objects inside arrays show their key-value content inline. Zoom and pan with the mouse or trackpad to explore large payloads. The layout is computed automatically using the Dagre algorithm, so the graph always reflects the actual JSON structure.