JSON Tree ViewerONLINE

Explore nested objects and arrays, search the preview, and copy exact values or paths.

JSON
{
  "project": "Something worth building",
  "version": 1,
  "isPublic": true,
  "stack": [
    "Astro",
    "TypeScript",
    "JSON"
  ],
  "settings": {
    "theme": "light",
    "indent": 2
  },
  "description": null
}
Preparing editor…
Strict JSON · RFC 8259
Your JSON stays in your browser. Core processing happens locally.
Keyboard shortcuts & workspace limits

Ctrl / ⌘ + Enter runs the primary action. Ctrl / ⌘ + F searches the focused editor. Ctrl / ⌘ + Z undoes; add Shift to redo. Tab moves focus. Esc restores the expanded workspace.

Up to 10 MiB UTF-8 input, 128 nesting levels, and 32 Mi characters of output. The tree preview shows at most 2,000 nodes with bounded text. Syntax highlighting is disabled above one million characters; documents above 250,000 characters run on request. Export before reloading: documents are kept in memory, not saved.

THE PRACTICAL GUIDE

Find a nested JSON value and understand its exact location

The tree viewer exposes the hierarchy of objects and arrays so you can navigate a document without counting braces or indexes. Every visible node has a location you can copy.

When should you use it?

  • Find a value several levels below an API response.
  • Copy a bracket path for a bug report or query.
  • Compare the shape of arrays and objects before writing code.
WORKED EXAMPLE

Example: locate a nested value

Array indexes start at zero. Copy path identifies a location; copy value returns the source JSON text.

Input
{"team":[{"name":"Alex"},{"name":"Sam"}]}
Copied path and value
$["team"][1]["name"]  →  "Sam"

Follow containers before individual values

Objects group named members; arrays group ordered items. Expand the outer container, find the relevant branch, and keep following its objects or array indexes. Array indexes start at zero, so the first item is [0]. A value displayed under a key is different from a similarly named key elsewhere in the document.

Copy a path that survives unusual property names

Bracket notation quotes each property name. A key containing a dot, a space, or a quote can therefore be represented without pretending that the punctuation is a navigation operator. Copying a value retrieves its original source text, which is useful for large numbers. The tree is a bounded preview; reaching its node limit does not mean the remaining source was deleted or validated less thoroughly.

AT THE WORKBENCH

Follow the branch that matters.

Expand one object or the full bounded preview. Types and child counts keep the structure understandable while path and value controls make a selected node useful outside the viewer.

  1. Open your document

    Valid JSON is converted into a bounded tree preview.

  2. Explore or search

    Expand branches, collapse them, or find keys and value excerpts.

  3. Copy the relevant piece

    Copy a JSON value or a bracket-notation JSONPath.

IN PRACTICE

How do I find a nested JSON value and copy its exact path?

Open the document in Tree, expand the parent objects and arrays, and select the node. Copy Path gives a quoted bracket path, including zero-based array indexes. Copy Value returns the value from source text, which is useful when a large number must keep its original spelling.

JSON path for a nested array member

text
{"users":[{"name":"Alex"},{"name":"Sam"}]}
$["users"][1]["name"]  →  "Sam"

The path is a location in this document. Array position 1 means the second user; quoted brackets preserve unusual property names.

It identifies one location, but the query tester supports a defined subset of JSONPath and can return multiple matches. Use JSONPath Query when you need wildcards or recursive names.

BEFORE YOU USE THE RESULT

What should you check before using the result?

The tree is a bounded preview of at most 2,000 nodes. To evaluate a query across the document, use JSONPath Query; a copied path is only an address.

Paths and values mean different things

Copy path returns a location such as $["team"][0]["name"]. Copy value returns the original JSON text at that node, including quotes around strings. Duplicate object keys can make a path ambiguous; copying a value still selects that exact source occurrence.

Large-tree behavior

The preview is limited to 2,000 nodes and a text budget. Branches render on demand, and expand-all works in batches. Search covers the preview, including shortened value excerpts; it is not a full-document query engine. Copying a shown container retains its full original value.

Learn paths in nested JSON

Technical reference: JSON syntax and interoperability · RFC 8259

THE JSON FIELD GUIDE
All guides