Skip to content
codevory

JSON Viewer

Explore JSON as a collapsible tree. Search keys and values, copy the path of any node, and open large documents without freezing the page.

JSON Viewer: the tool

Paste JSON to explore it as a tree.

JSON

Tree

The tree appears here once the JSON is valid. Click a key to copy its path.

How to use JSON Viewer

  1. Paste JSON into the left panel, or press Example. The tree appears on the right as soon as the JSON is valid.
  2. Click the arrow next to an object or array to open it. Expand all and Collapse all change every node at once.
  3. Type in Find to search keys and values. Matches are highlighted, and the branches that contain them open by themselves.
  4. Click a key to copy its path, for example $.users[2].address.city, ready to paste into code or a query.

Example

Paths copied from a small document. The same notation is used in the JSON diff tool.

Document
{"users":[{"name":"Ada","address":{"city":"London"}},{"name":"Alan"}],"first name":"x"}
Paths you can copy
$.users
$.users[0].name
$.users[0].address.city
$.users[1]
$["first name"]

About this tool

A tree is the quickest way to understand the shape of an unfamiliar document, such as an API response or a configuration file. Each object and array shows how many keys or items it holds, so you can tell a list of three users from a list of three thousand without scrolling through them.

Rows are drawn only when their parent is open, and long arrays are shown 100 items at a time, so documents with tens of thousands of values stay responsive. Numbers are shown as written: a 20-digit identifier is not rounded, and a number such as 1.10 keeps its trailing zero. Long strings are shortened in the tree with their length shown.

The path you copy follows the common dot-and-bracket form of JSONPath. Keys that are not plain identifiers use brackets, such as $["first name"]. Invalid JSON is reported with its line and column, using the same strict parser as the JSON validator. Everything runs in your browser.

Frequently asked questions

How large a document can the viewer open?

Up to a few megabytes comfortably. Only open nodes are drawn, so the size of the document matters much less than how much of it you expand. For very large documents Expand all opens the first four levels.

What does the path I copy mean?

It locates the value from the root, which is $. A name after a dot selects a key, and a number in brackets selects an item of an array, counting from 0. Most JSONPath libraries and tools such as jq accept this shape, with small syntax differences.

Does the search look at keys or values?

Both. It is case-insensitive, matches part of a word, and lists up to 500 matches. Branches containing a match open automatically, and closing the search shows the tree as you left it.

Are big numbers shown correctly?

Yes. Numbers are displayed exactly as they appear in the text, so an identifier with 20 digits is not rounded as it would be after JSON.parse.

Can I edit the JSON in the tree?

No. The tree is for reading. Edit the text on the left, and the tree follows. To tidy the text itself, use the JSON formatter.

More developer tools