Dev Utilities

JSON Viewer

This JSON viewer turns a wall of JSON text into a tree you can fold and unfold, so you can see the structure of an API response or a big data file at a glance. Search for a key, click any node to get its JSONPath, and copy just the part you need.

JSONPath:click a key to see its path

Files are read by your browser and never uploaded. Nothing you paste is stored.

How do you view JSON as a tree?

Paste JSON or open a .json file and the viewer parses it into a tree where every object and array can be expanded or collapsed. Click a node to see its JSONPath and copy the path or the value, and type in the search box to reveal every key or value that matches. Everything happens in your browser, so the file stays on your device.

How to use the JSON reader

  1. Paste JSON into the box, drop a file on it, or click Open file. Files up to 20 MB are read locally.
  2. The tree opens two levels deep. Use the arrows to open a branch, or Expand all and Collapse all.
  3. Type in Search keys and values. Matching text is highlighted and the branches that contain it open automatically.
  4. Click a key to select it, then Copy path for its JSONPath or Copy value for that part of the document, pretty printed.

Reading the tree

Each line is one value. Objects show how many keys they hold ({3 keys}) and arrays how many items ([2 items]), so you can tell the size of a branch without opening it. Array items are labelled with their index, starting at 0. Strings are shown with their quotes and escapes exactly as they appear in the file, and numbers keep their original digits, so a 19-digit ID is not rounded the way it would be by a plain JSON.parse.

Very long arrays are drawn 200 items at a time with a Show more button, which keeps the page responsive when you open a large JSON file. If the file is not valid JSON, the viewer shows the first error and its position instead of a tree; the JSON validator explains common causes.

JSONPath: copy the path to any value

A JSONPath is an address for one value inside a document. It starts with $ for the root, adds .key for object members and [0] for array positions. Keys that are not simple identifiers use bracket notation with quotes. For the sample data above:

$.store.name            → "Corner Books"
$.store.book[1].title   → "Moby Dick"
$.store.bicycle.price   → 19.95
$['first name']         → a key containing a space

The syntax is standardised in RFC 9535, and the same paths translate directly to code: $.store.book[1].title is data.store.book[1].title in JavaScript and data["store"]["book"][1]["title"] in Python. Tools such as jq, Postman tests and many log platforms accept similar paths, so a copied path saves typing and typos.

JSON visualizer or formatter?

Use this JSON visualization when you want to explore: find where a field lives, check how many items an array has, or pull out one nested object. When you want the whole document as readable text to paste into a ticket or commit, the JSON formatter pretty prints it with indentation instead.

Frequently asked questions

How to view JSON files?

The easiest way to view a JSON file is to open it in a JSON viewer like this one: click Open file or drop the .json file on the input, and it is shown as a collapsible tree. You can also open it in a code editor such as VS Code, or in Firefox, which has a built-in JSON viewer.

How to read JSON file?

To read a JSON file, start at the outermost braces or brackets and follow the structure: each key in an object names a value, and each array holds an ordered list. A tree view makes this easier because you can collapse the parts you do not need; in code, use JSON.parse in JavaScript or json.load in Python.

What opens a JSON file?

Any text editor opens a JSON file, because JSON is plain text: Notepad, TextEdit, VS Code or Sublime Text all work. For large or deeply nested files, a dedicated JSON reader such as this online viewer or the JSON viewer built into Firefox is easier to navigate.

Related tools