JSON Tree Viewer with Node Search
Lay nested JSON out as a collapsible tree, search for a key or value, and copy the path to any node instead of counting braces to work out where a field lives.
In plain text you have to count brackets to work out which level a field belongs to, and similar field names make that actively misleading. The tree view lays the structure out instead: every object and array shows how many members it contains, leaf nodes are tagged with their data type, and any node expands or collapses on click, so the nesting relationship is visible at a glance.
The tree and the editor share one document. Change the input and the tree is rebuilt immediately, so there is no separate load step and no chance of reading a stale structure. All of the rendering happens locally in the browser: pasted API responses and configuration files are not sent anywhere, and inspecting a structure leaves no request behind in a server log.
Collapse, depth and expansion strategy
Every object and array node has a disclosure arrow in front of it; clicking it collapses or expands that node, and empty containers are shown as a dot with nothing to expand. The toolbar offers expand all, collapse all, and shortcuts to collapse to level 1, 2, 3 or 4, with level 3 as the default. For deeply nested documents the practical approach is to collapse to a shallow level and then open only the branch you need. Nodes are rendered recursively in the DOM, so expanding a hundred thousand of them at once — for example a long array of records — will visibly stall the browser, while staying collapsed costs almost nothing.
Searching nodes and automatic expansion
The search box matches key names and leaf values at the same time, case-insensitively, as a literal substring rather than a pattern. Regular expression characters are escaped automatically, so searching for a period or an asterisk returns matches instead of throwing an error. Matches are highlighted, and every branch that contains a match is expanded automatically, even when it sits below the current collapse depth — which is precisely what you want when hunting an obscure field in a document you have not read before. Clearing the search box restores the depth-based collapse state.
Copying JSONPath and node values
Hovering a node reveals a path button and a content button; on leaf nodes they copy the path and the value respectively. Paths are assembled with $ for the root, dot notation for object members and bracketed indices for array elements, giving results such as $.data.list[0].id that can be pasted straight into a JSONPath query. One detail to keep in mind: names are inserted without quotes, so a key containing a dot, a space, a bracket or a non-ASCII character may fail to parse on the other side and has to be rewritten in bracket form such as $["my.key"]. Copying an object node yields a JSON fragment with two-space indentation, which is convenient for a ticket or a design document.
Frequently asked questions
- Why is the tree view empty?
- The tree depends on a successful parse, so when the JSON contains a syntax error nothing is rendered and the panel reports that there is no valid JSON data. Fix the syntax in the editor — the status bar names the line and shows the snippet, or you can run one-click repair — and the tree appears as soon as parsing succeeds.
- Can search match part of a field value?
- Yes. Matching is substring containment: if the search text appears anywhere in a key name or a leaf value, that node counts as a hit. There is no whole-word requirement and no case sensitivity. Object and array nodes do not match on their own, but any branch containing a matching child is expanded, so results are never hidden inside a collapsed node.
- Can the copied path be used in JSONPath directly?
- For ordinary ASCII keys, yes — a path such as $.data.list[0].id evaluates correctly as generated. When a key contains a dot, a space, a hyphen or a non-ASCII character, the generated path leaves it unquoted and it can be misread, so rewrite that segment in bracket form, for example $["my key"], before querying.
- Does a very large JSON document lag in the tree view?
- Once there are many nodes, yes. Each node is a separate DOM element, and expanding everything means the browser has to render everything; tens of thousands of nodes make that noticeably slow. Keep the default three-level collapse and use search to jump to the field you need, or copy the branch you care about into a fresh editor and inspect it in isolation.