JSON Viewer

JSON Viewer

Paste or type JSON into the editor, load the Example, or Open a file up to 10 MB (you can also drag it onto the page). Next to the editor, the JSON appears as a tree you can expand and collapse.

• Click any row to see its path and value, and to select it in the editor.
• Search to find a key or value anywhere in the document.
• Format or Minify the text, then Copy it or Download .json.

Under the editor you’ll see the root type, the number of values, the nesting depth, the size and the line count.

Everything runs in your browser. Nothing you paste or open is uploaded.

Example: finding a value and its path

{
  "store": {
    "name": "Corner Books",
    "books": [
      { "title": "The Hobbit", "author": "J. R. R. Tolkien", "price": 8.99 },
      { "title": "Dune", "author": "Frank Herbert", "price": 9.50 }
    ],
    "open": true
  }
}

The tree opens two levels deep, so you see store and its contents straight away. Open books, then the first book, and click title. The panel shows:

• Path: store.books[0].title
• Value: "The Hobbit"

Copy path puts the path on your clipboard, and Copy value the value. The same path works almost unchanged in code:

This is the quickest way to answer “how do I get to this field?” in a large API response. Find the value in the tree, click it, and copy the path.

Searching

Type in the search box to look through keys and values. Every match is highlighted, and each branch leading to a match opens automatically, so you see where the value sits in the structure. Searching for Dune in the example opens store, then books, then the second book. If nothing matches, the search says so.

Large files stay fast

The tree only builds rows for branches you open. Big lists show 100 items at a time, with Show 100 more and Show all below. A file with thousands of records opens quickly, and you only load the part you’re looking at.

Expand all and Collapse all open or close everything at once.

The tree shows the JSON exactly as written

Most tree viewers read the JSON with JavaScript first. That means long numbers get rounded, 1.0 turns into 1, and a key that appears twice is shown only once. This viewer reads the text itself, so the tree matches the file:

• Keys stay in their original order.
• Long integers keep every digit. 9007199254740993 isn’t shown as 9007199254740992.
• Numbers keep their form. 1.0 stays 1.0, and 9.50 stays 9.50.
• Both copies of a duplicate key are shown, with a note that the key appears twice.
• Escape codes stay visible. A n inside a string is shown as n, so you can see it’s there. u00fc is shown as the letter it stands for, ü.

Notes under the editor also point out integers too large for JavaScript and Windows paths whose backslashes may be read as escape codes.

Fixing mistakes

If the text has an error, you get the same explanation as in the JSON Validator: the line and column, what was found, and how to fix it. The problem is marked in the editor’s margin and in the text, and Show it in the text selects it.

While you fix it, the tree keeps showing the last valid version, with a note, so you don’t lose your place.

Long strings and HTML

Strings longer than 160 characters are shortened in the tree. Click one to see it in full.

If a value contains HTML, it’s displayed as plain text, never run as code. JSON from an unknown API or a log file is safe to open here, even if a value contains a <script> tag.

Format, Minify and files

Format indents the text so it’s readable, and Minify puts it on one line. Neither changes a value. For more formatting options, like the indent width, sorted keys and escape handling, use the JSON Beautifier.

Download .json names the file after the one you opened, so response.json comes back as response.json.

The editor is the same one used by the HTML Code Editor, with line numbers and syntax highlighting. If it can’t load, for example because a browser extension blocks it, a plain text box takes over and the page tells you. Everything else still works.

FAQ

What’s the difference between the viewer, the beautifier and the validator?

• The viewer is for exploring: browse the tree, search, and copy paths and values.
• The JSON Beautifier is for formatting: indentation, sorting and escape options.
• The JSON Validator is for finding errors, including invisible characters, and for checking JSON Lines files.

What does “depth” mean?

How many levels deep the most nested value sits. In the example, title is at depth 4: inside store, inside books, inside the first book. Very deep JSON can cause problems for some programs, so it’s worth keeping an eye on.

Can I edit the JSON here?

Yes. Change the text in the editor and the tree updates as you type. Then copy or download the result.

Can I turn the JSON into a table?

Yes, with JSON to CSV, which opens in Excel or Google Sheets.

Is my JSON uploaded anywhere?

No. Everything happens in your browser, and we never see or store your data.