JSON Viewer

Explore JSON as a collapsible tree. Expand only the parts you need, search keys and values, and copy the path to any node.

Updated
Runs in your browser. Your data is not uploaded.
Shows the tree as you type for inputs up to 200 KB.

How to use the JSON Viewer

  1. Paste JSON into JSON input, upload a .json file, or load it From URL.
  2. Press View. The tree opens to the depth set in Open levels. Click a row's arrow to open or close it, or use Expand all and Collapse all.
  3. Type in Search to highlight matching keys and values. Select a row to see its Path and copy it or its value.

How it works

The input is parsed with a strict JSON parser that keeps numbers and strings exactly as written, so a 20-digit ID is never rounded. The tree is then built from the parsed structure.

  • Objects show {n} with their number of keys, and arrays show [n] with their number of items.
  • Paths use JSONPath dot notation: $.users[0].email. Keys that aren't plain identifiers use brackets, such as $["first name"].
  • Rows inside closed branches are only built when you open them, which keeps large files responsive.

Examples

For {"users":[{"id":1,"email":"[email protected]","roles":["admin"]}],"total":1}:

  • The root shows {2}: the keys users and total.
  • users shows [1], and its first item shows {3}.
  • Selecting the email gives the path $.users[0].email and the value "[email protected]".
  • Searching for admin opens $.users[0].roles and highlights [0].

Limitations

  • Files up to 10 MB can be viewed. Past a few hundred thousand nodes, search slows down.
  • The viewer is read-only. To change the JSON, edit the input and press View again.
  • Invalid JSON can't be shown as a tree. The error's line and column are shown instead.
  • When a key appears twice in the same object, both entries are shown, and a warning says the last one wins.

Frequently asked questions

What is the difference between the JSON Viewer and the JSON Formatter?

The formatter rewrites JSON as indented text to copy or download. The viewer shows it as a tree you can fold, search, and navigate, which suits large API responses.

What is a JSONPath?

A way to point to one value inside a JSON document, such as $.users[0].email. $ is the root, dots go into objects, and [0] selects an array item.

Can I open JSON from an API URL?

Yes, with From URL, if the API allows cross-origin requests (CORS). Your browser fetches it directly; nothing goes through our server.

Is my JSON uploaded?

No. Parsing and display happen in your browser.

Often used together with the JSON Viewer.