JSON Tree Viewer

This tree view renders JSON as a collapsible hierarchy with colour-coded objects, arrays, strings, numbers, booleans and null, and shows an "N keys / N items" count on container nodes. It supports manual expand and collapse, expand-all / collapse-all, live search across keys and values (with automatic ancestor expansion and jump-to-match), JSONPath breadcrumbs, copying node values and paths, and inline editing of primitive values that syncs back to the text. The tree and editor stay in sync, parsing runs in a Web Worker, and files with hundreds of thousands of nodes use windowed rendering so only visible rows are loaded. All data stays in your browser.

Open in the workbench Runs locally · nothing is uploaded

How to use it

1
Paste or open JSON
The tree on the right builds automatically after you stop typing, or click "Open file" to load a local .json. On syntax errors the editor highlights the offending line while the tree keeps the last valid state.
2
Collapse and expand to explore
Click a node arrow to toggle it individually, or use "Expand all / Collapse all" in the toolbar. Container nodes show their child count so you can gauge the structure at a glance.
3
Search and jump
Type a key or value fragment (case-insensitive) to list matches with their ancestor chains expanded, then use Up / Down to step through hits with the matched substring highlighted.
4
Read paths, copy, edit values
Selecting a node shows its JSONPath breadcrumb (click any segment to walk up). Hover to copy the value or full path. String, number, boolean and null leaves can be edited inline and commit back to the editor on Enter.

Key features

Type colours and container summaries

Strings, numbers, booleans and null each get their own syntax colour; objects show "N keys" and arrays "N items" so collapsed nodes still convey their size.

Key/value search with ancestor expansion

Case-insensitive substring matching expands the whole ancestor chain of each hit, so deep fields are one search away. Results are capped at 500 with a clear notice.

JSONPath breadcrumbs

A selected node shows a path like $ → items → [12] → id. Click any level to jump to that ancestor, or copy the path for a JSONPath query or code lookup.

Inline editing with two-way sync

Edit leaf values directly in the tree (Enter to commit, Esc to cancel). The Worker rewrites the value by path and re-serialises it to the editor, and editing the text rebuilds the tree.

Windowed rendering for 100k+ nodes

The Worker returns only counts; rows are fetched page by page and off-screen rows are recycled, so 120,000 nodes still scroll smoothly without memory growth.

Open local files

Open a local .json file directly — sensitive structures never leave your device.

Common errors & troubleshooting

! For very large files, avoid hitting "Expand all" first. Search for the field you need (its ancestors expand automatically) instead of unfolding hundreds of thousands of rows blindly.
! Array indices in JSONPath start at 0, so $.items[0] is the first element. For keys with special characters, use the bracket form such as $["a-b"].
! Inline editing supports primitives only (string, number, boolean, null). To add or remove fields or restructure arrays, edit the text in the editor directly.
! Search matches both key names and value text — for example, typing "http" hits both a key named url and any link values. Clearing the search restores the previous expansion state.

Frequently asked questions

Is the tree view the same tool as the large JSON viewer?

They share the same workspace but emphasise different things. The tree view focuses on structured browsing and manipulation (collapse, search, JSONPath, inline editing). When a file exceeds 5 MB the text pane automatically switches to a read-only chunked view to stay smooth, while tree browsing, search and copying are unaffected — two viewing modes of one tool.

How large a JSON file can the tree view open, and will it lag?

There is no artificial size limit. Parsing runs in a Web Worker and the tree uses a session-based windowing protocol: the main thread keeps only row pages near the viewport, so the number of DOM nodes is independent of file size. Files with 120,000 fully expanded nodes still scroll and search smoothly.

Can editing a value in the tree corrupt the original data?

No. Inline editing hands a "path + new value" pair to the Worker, which rewrites by path and re-serialises. Invalid input (for example, text in a numeric field) is flagged in place and does not take effect. On success the editor updates in sync, and you can copy or undo it by editing the text.

What can I do with a copied JSONPath?

JSONPath is a cross-language expression for addressing JSON values (like XPath for XML). A copied $.items[12].id can be pasted into the JSONPath query tool on this site for batch extraction, or used in JavaScript, Python or Java to locate a field without counting levels by hand.

Related tools

Large JSON Viewer

Open 10 MB+ JSON files in the browser. Parsing runs in a Web Worker and the tree renders only visible rows, so even a million nodes scroll smoothly. Text over 5 MB switches to read-only chunked view.

JSON Formatter

Format, beautify and validate JSON in your browser. Errors point to the exact line and column, and you can indent with 2 spaces, 4 spaces or a tab.

JSONPath Query

Query JSON with JSONPath expressions, with a built-in syntax cheat sheet and one-click copy of each result.

JSON Diff / Compare

Compare two JSON documents side by side. Additions, deletions and changes are colour-coded, and key or array order can be ignored.