Inspect JSON as a navigable tree

Raw JSON is a good interchange format but a poor map of a deeply nested response. This JSON viewer turns a valid document into an interactive tree beside the original text. Objects and arrays become expandable branches; primitive values become color-coded leaves. Each branch reports its number of keys or items, making it possible to understand shape and volume before reading every value.

The viewer is especially useful when the question is not “Is this formatted?” but “Where is this field?” A search highlights matching keys and primitive values. A path action copies an accessor such as users[0].profile.email, saving the manual work of tracing object and array boundaries. The source stays visible in the left panel while the parsed structure appears in the JSON Tree Inspector on the right.

Start with a payload

Paste strict JSON into JSON Input. Parsing runs as the text changes. Once the complete value is valid, the tree is displayed automatically. Invalid text removes the tree and puts the browser’s parse message below the editor. There is no partial tree for malformed input because the document must be parsed before its nodes can be traversed.

Use Load Sample to open a representative service payload containing metadata, users, status codes, arrays, booleans, numbers, and null. Clear removes the source, parsed tree, search term, and copied-path feedback.

At initial render, nodes near the top are open while deeper branches begin collapsed. Click a row or its chevron to toggle that object or array. Expand All opens every branch; Collapse All closes them. These global controls appear only after data has parsed successfully.

Anatomy of the tree inspector

Objects and arrays

An object branch carries a badge such as 4 keys. An array branch uses 3 items. Empty objects and arrays still appear as branches with a zero count, but they have no child rows. Array children are labeled by numeric index, while object children show quoted property names.

The tree preserves the hierarchy produced by JSON.parse. It does not flatten properties or sort them. Repeated structures remain repeated, which is useful when comparing individual records in an API result.

Primitive types

Strings appear in quotes, numbers use a number-specific color, booleans are emphasized, and null is shown in an italic muted style. The color treatment helps distinguish "false" from false, or "404" from 404, at a glance. It does not infer dates, UUIDs, URLs, or domain-specific types; all of those remain strings.

Search highlighting

The search box performs a case-insensitive substring check across property names and rendered primitive values. Typing active can highlight an active key and a string containing that sequence. Typing true highlights boolean true values. While a search term is present, branches expand so that matches lower in the structure are visible.

Search is a highlighter, not a filter. Nonmatching nodes remain in the tree, there is no match counter, and pressing Enter does not jump between results. Object or array contents are searched through their children rather than through one serialized branch value.

Copy exact property paths

Hover over a key to reveal the link icon, then select it to copy that node’s path. The feedback bar confirms the copied text for about two seconds. Paths use familiar JavaScript accessor notation:

users[0].profile.email

Array positions use brackets. Object keys that are valid JavaScript identifiers use dot notation. Keys containing spaces, hyphens, or other characters use quoted brackets:

settings["build-target"]
account["display name"]

Double quotes inside a key are escaped in the copied path. The visible top node is named root, but its path starts empty, so descendants are copied as users[0].id rather than root.users[0].id. Copying the root itself therefore copies an empty path.

These paths are convenient for console exploration and JavaScript code, but they are not JSONPath or JSON Pointer expressions. They also identify an array position, not a durable record identity; if array ordering changes, [0] may refer to another item.

Example inspection session

Consider this response:

{
  "release": {
    "id": "rel-204",
    "approved": false,
    "artifacts": [
      { "name": "web", "size": 18420 },
      { "name": "worker", "size": 9910 }
    ]
  },
  "build-target": "production",
  "warnings": null
}

The root badge reports three keys. Expanding release reveals three more, and artifacts reports two items. Searching for worker opens the relevant branches and highlights the string. Hovering over its size property copies release.artifacts[1].size. The hyphenated root property copies as ["build-target"], because build-target cannot be written safely after a JavaScript dot.

This workflow is faster and less error-prone than counting braces in minified text, particularly when arrays contain many similarly shaped objects.

Useful ways to apply the viewer

Explore unfamiliar API contracts

Load a sample response before writing interfaces or selectors. Branch counts expose arrays and maps, while primitive styling helps identify accidental type inconsistency. Check several records rather than assuming the first array item represents every item.

Trace frontend data access

When a component shows Cannot read properties of undefined, inspect the real response and copy the path to the expected node. Compare it with the code’s accessor. Remember that a copied path says where a node exists in this sample, not that every response contains it; optional chaining and runtime validation may still be needed.

Audit feature flags and configuration

Search a large settings object for a flag name, environment label, or endpoint. The surrounding expanded branches retain context, unlike a plain text search that may show only one line.

Navigate webhook and event payloads

Events frequently wrap useful values in data, object, or attributes. The collapsible tree helps isolate the event envelope from the resource body and metadata. Copy paths into a transformation or handler prototype after checking nullability and array indexes.

When the tree does not appear

The error mentions an unexpected token

The source must be strict JSON. Replace single quotes with double quotes, quote every object key, remove comments, and remove trailing commas. HTML error pages and plain-text server responses also fail because they are not JSON.

A valid-looking document fails near a position

Inspect escaping inside string values. A raw backslash, unescaped quote, or literal newline can terminate a string unexpectedly. The message comes from the browser parser and may report a character position rather than a line and column.

Search does not hide unrelated entries

That is expected. Search highlights substring matches and expands branches; it does not filter the tree. Use browser page search only if its behavior better fits a static scan.

A copied path uses brackets instead of dots

Bracket notation is selected for keys that are not valid JavaScript identifiers. record["postal-code"] is executable JavaScript, while record.postal-code would be interpreted as subtraction.

Expand All feels slow

A large tree creates many visible rows at once. Collapse branches you do not need, narrow the input to the relevant section, or inspect very large payloads with a streaming or command-line utility.

Boundaries of this JSON tree viewer

The tool does not edit values in the tree, export a modified document, run JSONPath queries, calculate statistics, or compare two payloads. Search has no regular expressions, whole-word mode, result navigation, or match count. Parser diagnostics depend on the browser and are not guaranteed to identify an exact line and column.

All data must fit in browser memory as both source text and a JavaScript value. Numeric values follow JavaScript number behavior, so integers beyond the safe integer range can lose precision during parsing. Duplicate object keys cannot be represented independently after parsing. Never rely on this viewer to prove schema compliance or preserve unusual source-level details.

JSON Viewer FAQ

Does the viewer reformat my input?

No. The left editor keeps the text you entered. The right side visualizes the parsed value as nodes rather than producing a new formatted JSON document.

Are matching nodes filtered?

No. Matches are highlighted with surrounding context intact. Branches automatically expand while a search term is present.

What values can search find?

It checks key text and primitive values using a case-insensitive substring match. That includes strings, numbers, booleans, and null. It does not serialize an entire object for matching.

Why is there no tree for an empty input?

Blank text means no document has been supplied. Enter {} for an empty object, [] for an empty array, or another complete JSON value.

Can it display a top-level array?

Yes. The root becomes an array branch and its children use indexes. Top-level primitives also parse, though they provide little hierarchy to navigate.

Is the copied expression JSONPath?

No. It is a JavaScript-style accessor path using dots, numeric indexes, and quoted bracket notation. Convert it if another system expects JSONPath or RFC 6901 JSON Pointer.

Does Collapse All delete search matches?

No. It only changes branch expansion state. Entering or changing a search term expands branches again so highlighted descendants can be seen.

JSON Viewer