JSON Tree Viewer
Visualise any JSON as an interactive collapsible tree. Expand nodes, copy key paths, detect types by colour, and validate JSON instantly in your browser.
The JSON Tree Viewer is a free, browser-based tool that parses any JSON document and displays it as an interactive, collapsible tree. Expand or collapse individual nodes, inspect value types at a glance, and click any key to copy its dot-notation path to the clipboard. All processing happens entirely in your browser — no data is uploaded to any server.
Features
| Feature | Detail |
|---|---|
| Interactive tree | Click the triangle next to any object or array to expand or collapse it |
| Type colour coding | Strings in green, numbers in blue, booleans in orange, null in grey |
| Node counts | Each collapsed object or array shows its key or item count |
| Path copy | Click any key name to copy its full dot-notation path to the clipboard |
| Expand / Collapse all | Open or close every node in the tree with a single click |
| JSON formatter | Reformat minified or poorly indented JSON in the input area with one click |
| File load | Open any .json or .txt file directly from your device |
| Download | Save the formatted JSON as formatted.json |
| Error reporting | Invalid JSON shows a clear error message with the parser's explanation |
| Stats bar | Shows key count, max nesting depth, object count, array count, string count, and number count |
How to Use
- Paste your JSON into the JSON input area, or click Load to open a file from your device.
- Optionally click Format to pretty-print the raw input before parsing.
- Click Parse JSON — the tree appears on the right.
- Click the ▼ triangle next to any object or array to collapse it; click ▶ to expand it again.
- Click Expand all or Collapse all to control all nodes at once.
- Click any key name (shown in the accent colour) to copy its dot-notation path to your clipboard.
- Click Download to save the formatted JSON as a file.
Tree Display
Value Types
| Type | Colour | Example |
|---|---|---|
| String | Green | "Hello, world" |
| Number | Blue | 42, 3.14, -1 |
| Boolean | Orange | true, false |
| Null | Grey italic | null |
| Object | Default | { … } with key count badge |
| Array | Default | [ … ] with item count badge |
Collapsed Nodes
When a node is collapsed its children are hidden and a count badge appears next to the bracket — for example { 5 keys } or [ 12 items ]. This lets you quickly gauge the size of a subtree without expanding it.
Path Copy
Clicking a key copies a dot-notation path (e.g. user.address.city) for objects, or bracket notation (e.g. items[2].name) for array indices. The path is shown briefly in the status bar so you can confirm what was copied.
Use Cases
Debugging API Responses
Paste the raw JSON body from an API response and navigate the tree to find specific fields without scrolling through thousands of characters of minified text.
Exploring Configuration Files
Open large configuration files such as package.json, tsconfig.json, or Kubernetes manifests to understand their structure at a glance.
Learning JSON Structure
Beginners can paste example JSON from documentation and use the tree to understand how objects, arrays, and values are nested relative to each other.
Validating JSON
The parser reports exact syntax errors from the browser's native JSON.parse — useful for quickly locating stray commas, missing brackets, or unquoted keys.
Path Reference for Code
Click through the tree to copy exact key paths, then paste them directly into code such as response.data.user.address.city without counting brackets manually.
Frequently Asked Questions
What is the maximum JSON size this tool can handle?
There is no enforced limit. Since parsing uses the browser's built-in JSON.parse, performance depends on your device. Files up to several megabytes parse in under a second on modern hardware.
Is my JSON data kept private?
Yes. Everything runs in your browser — no data is sent to any server. Close the browser tab and the data is gone.
Can I load a JSON file from disk?
Yes. Click Load above the input area and select any .json or .txt file from your device.
Why does clicking a key copy a path instead of the value?
Path copy is the primary use case for inspecting nested structures; it lets you reference the exact location of a field in code or queries. The value itself is visible directly in the tree.
What does the depth counter in the stats bar mean?
It shows the maximum level of nesting in the parsed JSON. A depth of 1 means all values are at the top level; depth 5 means there are values nested five levels deep (e.g. object inside array inside object inside object inside array).
Can I edit the JSON in the tree and re-download?
Editing is done in the input textarea. Modify the JSON there, click Parse JSON again, then click Download to save the updated version.