GNEXT

JSON Viewer

Explore JSON as a collapsible tree. Search keys and values, fold branches, and copy the path to any node.

Processed locally in your browser
JSON
Tree
The tree appears here. Click a key to collapse it, hover to copy its path.
Waiting for inputRuns as you type

Reading JSON as a tree

Formatted JSON is easy to read until it is a few hundred lines long. A tree view shows the same document as nested, collapsible nodes: each object lists its keys, each array its items, and you can fold away the branches you are not interested in. Hover any node to see its path, and click the path to copy it.

The count next to each container (3 keys, 12 items) is visible even when the node is collapsed, which makes it quick to spot an empty array or an unexpectedly large one.

Paths

Paths use a JSONPath-style notation starting at $. Object keys that are valid identifiers use dot notation; other keys and array indexes use brackets:

$.customer.name
$.items[1].tags[0]
$["content-type"]

These paths map directly onto JavaScript property access (drop the $), onto jq filters (.items[1].tags[0]), and onto JSONPath libraries in most languages.

Search matches keys and values, case-insensitively. Matching nodes are highlighted, their ancestors expanded and everything else hidden until you clear the search. Numbers, booleans and null are matched on their text form, so searching true finds boolean trues and strings containing “true”.

Large documents

The first three levels are rendered immediately; deeper branches are built the first time you expand them. Documents with tens of thousands of nodes stay responsive. Parsing uses the browser's native JSON.parse, so integers above 253 are displayed as JavaScript doubles. If exact large integers matter, the JSON Formatter preserves them.

Viewing JSON elsewhere

  • Browser DevTools. Firefox renders JSON responses as a tree automatically. Chrome shows a tree for JSON in the Network panel's Preview tab. Both let you filter.
  • jq. jq '.items[] | {sku, qty}' data.json extracts and reshapes. jq 'paths' lists every path in the document.
  • Editors. VS Code folds JSON by indentation and shows the breadcrumb path of the cursor position in the editor title bar.

Pretty-print or minify with the JSON Formatter. Diagnose syntax errors with the JSON Validator. Turn a decoded token into a tree by pasting the payload from the JWT Decoder.

↑↓ navigateEnter openEsc close