JSON Tree Viewer

What the JSON tree viewer does

A JSON tree shows a document as nested rows. Each object and array is a node with a chevron. Open the node to see its children, or fold it to hide them. Every object and array shows a count, such as {4} or [12]. The count tells a short list from a long one before you open it.

The box at the top of this page formats what you paste and shows its shape. The tree itself is in the full editor, which opens in the Tree view with the same document. For a list of records, the Table tab shows the same data as a sortable grid.

Fold, expand, and set a depth

Three controls float at the top right of the tree. Expand All opens every node. Collapse All folds every node below the root, so you see only the top-level keys. The Depth menu offers Depth 1 to Depth 8 and opens the document to that level.

Depth 1 opens the top-level object and the objects and arrays directly inside it. Each step opens one more level. A small document opens fully expanded. A document of 1 MB or more opens with the root collapsed, so you choose what to open.

Key features

The tree is built for moving through data, not only for looking at it. A deep document needs fast ways to get from one place to another. These features do that job.

• Click a chevron to fold or open one node. Press Enter or Space on a row to do the same from the keyboard.
• Move with the arrow keys. Up and Down change rows, Right opens a node or steps into it, and Left folds it or steps out. Home and End jump to the first and last row.
• The path bar under the tree shows where you are. Each step is a button that jumps to that level, and Copy path puts the full path on your clipboard.
• Hover a row and select path or value to copy just that part.
• Select the pencil in the path bar, type a path such as company.teams[0].name, and press Enter to jump straight to it.
• Star a row to bookmark its path. The Bookmarks list jumps back to it later.
• Search matches keys and values in the rows that are open. Select Expand All first to search the whole document.
• Double-click a value or key to edit it in place.

How to use it

Start with the box on this page, then work in the editor. The box runs in your browser and takes documents up to 512 KB. Larger documents go straight to the editor.

1. Paste your JSON into the box at the top of this page, or select Try an example.
2. Select Open in full editor. The editor opens in the Tree view.
3. Select Collapse All, the second icon at the top right of the tree.
4. Pick a level from the Depth menu, or click chevrons to open single branches.
5. Click a row. The path bar at the bottom of the editor shows its path.
6. Select Copy path in the path bar, or hover the row and select path.
7. To go back to a place you need often, star its row and open Bookmarks from the path bar.

Worked example: find one skill in a nested org chart

Say you receive a company document with teams, members, and skills. You need the path to the second skill of the first member of the first team.

Choose Depth 2, and the tree opens the root, company, and teams, then stops. You see that teams holds two entries. Open teams[0], then members[0], then skills, and click sql. The path bar shows the route. Copy path gives you the text below.

Input
{"company":{"name":"Acme","teams":[{"name":"Platform","members":[{"name":"Ana","skills":["go","sql"]},{"name":"Ben","skills":[]}]},{"name":"Data","members":[]}]}}

Tree at Depth 2
{1}
  ▾ "company": {2}
      "name": "Acme"
      ▾ "teams": [2]
        ▸ 0: {2}
        ▸ 1: {2}

Copy path on "sql"
company.teams[0].members[0].skills[1]

Common use cases

A tree helps most when a document is deep, wide, or unfamiliar. You can learn its layout in seconds and then go straight to the value you need. These are the usual jobs.

• Learn the layout of an API response by folding it to Depth 2.
• Find the one nested field you need, then copy its path into code, a test, or a bug report.
• Compare how many items each array holds by reading the counts.
• Walk a configuration file section by section without scrolling past the rest.
• Rename a key or fix a value in place once you have found it.

Frequently asked questions

Related tools