Developer Tool

JSON Tree Viewer

Open any JSON document as a collapsible tree, search keys and values, and copy a JSONPath for every node, all locally.

Backend developers, QA engineers, and integration specialists stare down nested JSON constantly: paginated API responses, webhook payloads, feature flag objects, and test fixtures where the field you need sits four levels below metadata you do not. When to use it: Mapping an unknown response before writing a client, locating the exact path of a value for an assertion, checking item counts without counting brackets by hand, or showing a teammate where a field lives without pasting thousands of lines into chat. What it solves: Parses your document, renders containers as collapsible nodes with key and item counts, badges every leaf with its JSON type, searches across keys and values, and puts a copyable JSONPath on each row. Why it matters: Reading structure is the slow part of working with unfamiliar payloads, and a tree that folds what you do not need turns that reading into a few clicks.

JSON input

How the Tree Viewer Works

The input goes through the native JSON parser first. On success, a recursive walk converts the parsed value into a node model: each node records its type, its key, its JSONPath, its depth, a short preview, and its child count. Objects contribute keyed children, arrays contribute index-keyed children, and primitives (string, number, boolean, null) become leaves with type badges.

Rendering is lazy. Only the root row is inserted into the page when the tree builds. Expanding a container inserts that container's children at that moment, and each child repeats the pattern. Collapsed branches cost no DOM nodes, which keeps large documents responsive and keeps the page light for Core Web Vitals even when the parsed model holds thousands of nodes.

JSONPath construction follows the standard: a dot plus identifier for plain keys, bracket-quoted form such as ['strange key'] when the key is not a simple identifier, and bracketed integers for array indexes. The copy button writes the path for that exact node, so $.items[3].sku is one click away for a value buried in a list.

Search runs over the prebuilt node model rather than the rendered DOM, matching case-insensitively against keys and previews up to a fixed result limit. Matching rows show their paths, which works even while most branches are still collapsed.

On parse failure, the tool extracts the position from the parser message, converts it into a line and column, and shows both alongside the raw error. The input stays untouched so you can fix the text and rebuild immediately.

Before / After Examples

Example 1: Flat Object to Labeled Tree

Before (Raw text)

{"name":"Ada","age":36,"admin":true}

<!-- Three fields, easy. Now scale up. -->

After (Tree with type badges)

â–¾ {} root        { 3 keys }
    name: "Ada"    [string]
    age: 36        [number]
    admin: true    [boolean]

Example 2: Finding a Field in a Nested Response

Before (Long API response)

{
  "meta": { "page": 2, ... },
  "data": [ ... 50 items ... ],
  "data[7]": { "sku": "AX-99" }
}

<!-- Where exactly is sku? -->

After (Collapsed branches + copied path)

â–¾ {} root          { 3 keys }
  â–¸ meta           { 2 keys }
  â–¸ [] data        { 50 items }
  â–¾ [8]            { 1 key }
      sku: "AX-99"
      path: $.data[7].sku   â§‰ copied

Example 3: Parse Error with Position

Before (Broken input)

{
  "id": 1,
  "name": "Ada",,
}

<!-- Double comma on line 3 -->

After (Position reported)

Line 4, column 1
Unexpected token } in JSON at position 36

Fix the trailing comma, rebuild.

Use Cases

Developer	Production	Workflow
Map an unfamiliar API response before writing the client model	Inspect a webhook payload captured during an incident	Share a field path in a bug ticket with the copy button
Copy JSONPath expressions for test assertions	Confirm nested config keys after a deployment change	Walk a new teammate through the payload schema
Check item counts in nested arrays at a glance	Verify feature flag objects hold the expected branches	Compare structure against the documented example
Find the line of a parse error before running a script	Audit serialized fixtures for unexpected null leaves	Prepare screenshots of collapsed branches for docs

Common Mistakes & Troubleshooting

Trailing commas from a JavaScript object literal

JavaScript allows a trailing comma; JSON does not. Copying an object literal out of source code and pasting it into a JSON context fails on that last comma. The viewer reports the exact position so the fix takes seconds.

âŒ {"id": 1, "name": "Ada",}
âœ… {"id": 1, "name": "Ada"}

Single quotes or unquoted keys

Python dicts and JavaScript objects tolerate single quotes and bare keys, JSON requires double-quoted strings for every key and string value. The error position shows which token the parser rejected.

âŒ {name: 'Ada'}
âœ… {"name": "Ada"}

Assuming collapsed counts equal data loss

A collapsed row showing { 50 items } still holds every element in the parsed model; only its DOM is deferred. Expanding builds the rows on demand, so counts are trustworthy even before you open the branch.

âŒ "Count says 50, list shows fewer â€” bug?"
âœ… Collapsed nodes are lazy, not truncated (500 shown per list)

Pasting an entire log file into the input

JSONL logs are one document per line, so a multi-record file is not a single JSON value and will not parse. Convert with the JSONL tools first, or paste a single record to inspect its structure.

âŒ Paste 1000 NDJSON lines into the tree viewer
âœ… View one record here; use the JSONL tools for streams

Treating tree order as sorted order

Object keys render in insertion order as produced by the parser, which matches source order but is not alphabetical sorting. When you need sorted keys, run the JSON formatter with its sort option instead of reading the tree as sorted.

âŒ Assume tree key order == alphabetical
âœ… Order follows the document; sort in the formatter if needed

Best Practices

âœ“

Copy paths, not value selections

Dragging across formatted text is error-prone. The JSONPath button gives a syntactically valid path including bracket quoting for unusual keys.

âœ“

Collapse first, then expand what matters

Starting from a fully collapsed view lets counts guide you to the right branch instead of scrolling through every leaf.

âœ“

Use search for unknown keys

Typing a suspected field name lists every matching key and value with its path, which beats opening branches one by one.

âœ“

Read stats before judging size

Node count, depth, and byte size tell you whether you hold a config object or a giant dump before you start expanding.

âœ“

Paste single documents, not streams

The viewer expects one JSON value. For NDJSON or JSON Lines input, switch to the JSONL tools and inspect one record at a time.

âœ“

Fix parse errors with the line and column

Go straight to the reported position instead of scanning the whole document. Most failures are a missing quote or extra comma on that line.

âœ“

Keep sensitive payloads local

Client-side parsing means tokens and personal data in captured responses never reach an external viewer service.

âœ“

Pair with the formatter for output

Explore in the tree, then use the formatter when you need pretty-printed text to commit, share, or transform.

Frequently Asked Questions

What is a JSON tree viewer used for? +

A JSON tree viewer renders a parsed JSON document as a hierarchy of collapsible objects and arrays instead of raw text. It lets you fold away branches you do not care about, see how many keys or items each container holds, and find the exact location of a field several levels deep. It is the fastest way to understand an unfamiliar API response or a large configuration file before you write code against it.

How is a tree viewer different from a JSON formatter? +

A formatter produces indented text you read or copy, which works well for small documents but turns a 50,000-line response into a wall of syntax. A tree viewer parses the same JSON but renders it as interactive nodes: each container collapses to a count, leaves carry type badges, and you can copy the path of a single value without selecting text. Use the formatter when you need the output text, and the viewer when you need to understand the shape.

What is JSONPath and how do I copy it? +

JSONPath is a query syntax for addressing values inside a JSON document, similar to XPath for XML. A path like $.users[2].email means root, then the users array, third element, then the email field. In this viewer, every row has a copy button that writes its full path to the clipboard, ready to paste into a JSONPath evaluator, a jq expression, or a test assertion.

Can this viewer handle very large JSON files? +

Parsing stays fast for multi-megabyte documents because it uses the native JSON parser. Rendering is the limiting factor, so the viewer builds child nodes only when you expand a branch and caps each container at 500 visible children with a paging control for the rest. For files beyond a few megabytes, a streaming tool or a text editor with fold support will feel smoother than any in-browser tree.

Why does the viewer show an error with line and column numbers? +

Invalid JSON cannot be parsed into a tree, so the viewer reports the native parser message along with the line and column of the offending position. That points directly at problems like a missing comma, a stray trailing comma, or an unquoted key. Fix the text, then rebuild the tree without reloading the page.

Is the tree editable? +

No, the tree is read-only by design so exploring a document can never alter it. Editing happens in the input text, and the tree rebuilds when you run the viewer again. Keeping view and edit separate avoids accidental mutations when you are copying paths or demonstrating a structure to a colleague.

Does pasting JSON into this tool expose it? +

No. Parsing and rendering happen entirely with local JavaScript, and the page makes no network requests with your data. Internal API responses, unreleased feature payloads, and personal records stay inside the browser tab and are gone when it closes.