The JSON tree: structure before content
A JSON tree shows a document as parents and children: the root object at the top, its keys one level down, and nested objects and arrays branching further below. Looking at JSON this way answers structural questions first. Which keys exist at the top level? Is items a list or a single object? How deep does the nesting go?
Every branch in this JSON tree viewer can be expanded or collapsed, and each shows a count such as "3 keys" or "250 items", so you can judge its size before opening it.
Example
Given this configuration:
{"project":"atlas","env":{"region":"us-east-1","replicas":3},"features":["search","export"]}the status bar reports Valid JSON · 2 objects, 1 arrays, depth 2. The root, labeled $, opens with three children: project, a leaf holding a string; env, an object with 2 keys; and features, an array with 2 items. Leaves show their values directly, colored by type.
With every branch open, the rows of the tree read:
$: { 3 keys }
project: "atlas"
env: { 2 keys }
region: "us-east-1"
replicas: 3
features: [ 2 items ]
0: "search"
1: "export"Array items are labeled with their index. Click any key and the path bar above the tree shows where it sits, for example $.env.replicas, which is useful when you describe the structure in documentation or a ticket.
Sort keys
Sort keys, one of the buttons above the editor, rewrites the JSON text with object keys in alphabetical order at every depth, and the tree follows; in the example, env moves above project. It does not reorder arrays. Because the text itself changes, Copy and Download then give you the sorted document.
Filter the tree
Type part of a key or a value in the filter box above the tree. The tree shrinks to the branches that contain a match, opens them and highlights the matching text, and a counter next to the box shows the number of matches. Letter case is ignored. Clear the box to get the whole tree back.
How the tree behaves with big documents
Only the first two levels are opened for you. Deeper branches are built at the moment you expand them, which keeps the page light even when the document holds tens of thousands of values. Any single branch lists up to 1,000 children and then a "… N more" line; the filter reaches the entries beyond it. Expand all opens up to 5,000 branches in one go, and Collapse all folds the tree back to its top-level keys.
Tree, graph or path list?
The tree is the most compact way to walk a hierarchy. If you prefer boxes connected by lines, the JSON graph visualizer draws the same structure as a diagram. If you need an exact path to use in code or a query, the JSON navigator focuses on paths, and the JSONPath tester lets you run queries against the data.