JSON Tree Viewer

Runs entirely in your browser

Paste JSON and click View Tree to explore it as an interactive, collapsible tree directly in your browser. Expand or collapse any node, see types at a glance, and copy a value or path with one click.

Advertisement

Paste JSON on the left, then click View Tree.

Advertisement

How to use JSON Tree Viewer

  1. Paste your JSON into the Input box, or click Load Sample to try it out.
  2. Click View Tree, then use the arrows — or Expand All / Collapse All — to explore objects and arrays.
  3. Click the copy icon next to any node to copy its value or path.

Features

  • Interactive, collapsible tree with color-coded data types.
  • Expand All / Collapse All controls for quick navigation.
  • One-click copy for any value or its JSON path, like $.user.name.
  • Clear error messages with line and column details for invalid JSON.
  • 100% client-side — your data never leaves your browser.

Example

Click Load Sample (or paste your own JSON) to load this data:

{
  "id": 101,
  "name": "Toolbeel",
  "active": true,
  "rating": 4.8,
  "tags": ["free", "browser-based", "privacy-first"],
  "address": { "city": "Pune", "zip": "411001" },
  "owner": null
}

The tree opens with every node already expanded — objects and arrays up to two levels deep auto-expand, and this sample doesn't go any deeper — showing pills for 2 objects, 1 array and 10 values. Clicking the copy icon next to address copies the path $.address; clicking it next to city's value copies Pune without the quotes shown in the tree.

Tips

  • Copying a string value copies the raw text, not the quoted form shown in the tree — copying the value of "Pune" gives you Pune, ready to paste elsewhere.
  • Copying the path of an object or array gives a dot/bracket accessor, such as $.tags[0] or $.address.city — handy for referencing that field in your own code.
  • Nodes deeper than two levels start collapsed to keep large documents readable; use Expand All if you need to see everything at once.
  • The object/array/value pills count every node in the document, including ones currently collapsed — collapsing a branch only hides it, it doesn't remove it from the counts.

Is JSON Tree Viewer safe?

Yes. JSON Tree Viewer parses your JSON and builds the collapsible tree entirely with local JavaScript in your browser — copying a value or path never leaves your device, since there's no server involved in rendering it.

Frequently Asked Questions

How do I expand or collapse nodes?

Click the arrow next to any object or array to expand or collapse just that node, or use the Expand All / Collapse All buttons to control the whole tree at once.

Can I copy a value or its path?

Yes. Click the copy icon next to any node to copy its value, or the copy icon next to an object or array to copy its JSON path, such as $.user.name.

What happens if my JSON is invalid?

You'll see an error message with the line and column where the problem was found, so you can fix it before viewing the tree.

Related tools