JSON Viewer
Turn a JSON document into a collapsible tree with typed values, child counts, key and value search, and one-click copying of any value or its JSON path. Large documents open partially so the page stays responsive.
JSON ToolsHow to use JSON Viewer
- Paste JSON into the input panel.
- The tree appears on the right with the first few levels already open.
- Click any arrow to expand or collapse a node, or use Expand all and Collapse all.
- Type in the search box to highlight matching keys and values.
- Hover a row and use the path or value buttons to copy either one.
Examples
A JSON path
Copying a path gives you an expression you can paste into a query tool or a test.
$.categories[0].tools[2]
Nested structure
Objects inside arrays inside objects are exactly where a tree view earns its keep.
{
"meta": { "build": { "commit": "a1b2c3d", "ci": { "passed": true } } }
}Features
- Collapsible tree for objects and arrays, with array indexes and object keys
- Child counts on every collapsed node
- Values colour-coded by type: string, number, boolean and null
- Search highlights matching keys and values as you type
- Copy any value, or its JSON path such as $.meta.build.commit
- Expand all and Collapse all
- Large documents open only the first three levels by default, within a node budget
- Full diagnostics for malformed JSON, with Jump to error
Frequently asked questions
- Why is my document not fully expanded?
- Opening every node of a large document would create tens of thousands of DOM rows and freeze the tab. The first three levels open automatically, within a budget of 400 nodes; Expand all opens the rest when you want it.
- What is a JSON path?
- A JSONPath-style expression describing where a value sits: $ is the root, .key selects a property and [0] selects an array element. Copying one gives you a reference you can use in tests or query tools.
- Does search look inside values?
- Yes. It matches both keys and primitive values, and highlights every row that matches. It does not currently filter the tree to matches only.
- How large a document can it show?
- Several megabytes parse and display fine thanks to the partial expansion. Very large arrays are best explored by expanding one branch at a time rather than with Expand all.
- Can I edit the JSON here?
- You edit it in the input panel on the left and the tree follows. The tree itself is read-only, which keeps the displayed structure a faithful view of the source.
- Is the document uploaded?
- No. It is parsed in your browser and stored only in this browser's local storage.
Related tools
About JSON Viewer
JSON Viewer is part of JSON Tools on ToolHive, a growing collection of small, focused utilities for developers, designers and students. Format, validate, minify and convert JSON with instant feedback as you type. Everything runs client-side, so your data never leaves the browser tab — which makes these tools safe to use with work-in-progress code and private content.