JSON Viewer

A tree view is for exploring a payload you did not write. Collapse the parts you do not care about, expand the ones you do, and copy the path to any value so you can reach it in code.

It is built for large documents. Nodes are rendered only when their parent is expanded, so a collapsed 10 MB file costs the length of its root rather than its node count.

What the tree shows you

Beyond the structure itself, a few things that are hard to see in raw text.

Every node path

In RFC 9535 normalised form, so it pastes straight into the JSONPath tester. Hover a row and copy it.

Child counts

A collapsed object says how many keys it holds, an array how many items. You can judge the shape without expanding it.

Duplicate keys

Marked inline. In raw text a duplicate five hundred lines from its twin is effectively invisible.

Numbers that lost precision

Flagged on the exact value. An integer above 2^53-1 is shown with its original digits and a warning that most parsers will not read it that way.

Keyboard navigation

The tree is a real ARIA tree, not a pile of clickable elements, so it works the way a tree is supposed to work: arrow keys move and expand, Home and End jump to the ends, Enter and Space toggle. It is reachable and operable without a mouse and announces itself correctly to a screen reader.

This is unusual in this category, which is a low bar rather than a boast.

When to use the tree and when to use the raw text

The tree is better for orientation: what shape is this, where is the field I need, how deep does it go. Raw text is better for editing and for search, and the editor keeps full text search with Ctrl+F.

For anything you are going to query repeatedly, go to the JSONPath tester instead. Writing an expression, seeing zero matches, and adjusting is a faster loop than clicking through a tree.

How to do this in code

Exploring a payload from a terminal, when a browser is not to hand.

# Top-level keys
jq 'keys' data.json

# The shape, without the values
jq 'walk(if type == "object" then map_values("...") else . end)' data.json

# Every distinct path in the document
jq -r 'paths | join(".")' data.json | sort -u

import json

with open('data.json') as f:
    data = json.load(f)

def walk(node, path=''):
    if isinstance(node, dict):
        for k, v in node.items():
            yield from walk(v, f'{path}.{k}')
    elif isinstance(node, list):
        for i, v in enumerate(node):
            yield from walk(v, f'{path}[{i}]')
    else:
        yield path, node

for path, value in walk(data):
    print(path, '=', value)

// console.dir gives you a collapsible tree in the terminal
console.dir(JSON.parse(text), { depth: null, colors: true });

Questions

How large a file can it open?

Parsing is not the constraint; memory is. A 10 MB document builds roughly a 294 MB tree, so that is a comfortable size on a desktop and a stretch on a phone. Above about 25 MB you will feel it. The tree is built only when this page needs it, so the formatter and validator handle much larger files.

Why do only some branches expand at once?

Expand All is deliberately bounded to six levels. Expanding every node of a large document produces hundreds of thousands of rows and helps nobody.

Can I edit in the tree?

No. Editing happens in the text pane, which has undo, search and full keyboard support. A tree editor is a different product and a worse text editor.