How to use the JSON Viewer
- Paste JSON into the left box, open a .json file by dropping it there, or click Load sample.
- Click ▸ to open an object or array. Expand all and Collapse all work on the whole tree.
- Type in Search to find keys or values. Matching items open and are highlighted.
- Click any item to see its path, such as
$.orders[0].customer.name, then copy the path or the value.
Why use a tree view?
A formatted JSON file can still run to thousands of lines. A tree shows the shape instead: each object and array is one line with its size, like orders [25] or customer {4}, and you open only the parts you care about. It's the quickest way to find your way around an unfamiliar API response.
Copy the path to any value
Click an item and the viewer shows its path in JSONPath style, for example $.orders[0].items[1]. Keys that aren't simple names are quoted, like $["first name"]. Paths like these drop straight into JavaScript (data.orders[0].items[1]), Python, jq filters and API test tools.
Colors and counts
- Strings, numbers, booleans and null each have their own color.
- Objects show how many keys they have, and arrays how many items.
- Very large files open two levels deep, and the rest is drawn only when you expand it, so the page stays fast.
If the JSON is invalid, you'll see the line and column of the error, and Fix it repairs common problems like trailing commas and single quotes. To get indented text instead of a tree, use the JSON Formatter.
Frequently asked questions
Is my JSON uploaded?
No. The tree is built in your browser and nothing is sent to a server.
How big a file can it open?
Files of several megabytes work well, because only the parts you open are drawn. Expand all stops after 20,000 items to keep the page responsive.
What path format does it use?
JSONPath style, starting with $: dots for simple keys, [0] for array items, and ["key"] for keys with spaces or symbols.
Can I edit the JSON in the tree?
Edit the text on the left; the tree updates as you type.
Updated