JSON Viewer: read, explore and search JSON.

What a JSON viewer is for

JSON is easy for a program to write and hard for a person to read once it grows past a screen. An API response arrives as one long line; a configuration file nests six levels deep; an export holds ten thousand records that all look alike. A viewer turns that text into a structure you can walk: objects and arrays you open and close, every value labelled with its key and its type, and the size of each container shown before you open it.

That is what this page is for. It opens on a single, full-width pane in Tree view, so the structure has the whole screen, and it leaves the text one click away for the moment you need it.

Open a file, paste, or load a URL

There are three ways in. Open a .json file from disk with Open in the pane’s toolbar, or drop one onto the page; choose From URL… in the same menu and give it the address of an API or a file on the web; or switch the pane to Code and paste. The document you had open in the editor is already here too: both pages share this tab’s workspace, so moving between them never loses your place.

A document that does not parse is not thrown away. The tree shows as much of it as could be read and says that it is incomplete, the text is kept exactly as it arrived, and Repair offers to fix the usual damage — a trailing comma, a single-quoted string, a response cut off halfway.

Tree, Table and Graph

[
  {"name":"Ada","role":"editor"},
  {"name":"Lin","role":"reader"}
]

|    # | name | role   |
| ---: | ---- | ------ |
|    0 | Ada  | editor |
|    1 | Lin  | reader |

Tree is the default because it suits the widest range of documents: every key and value on a row of its own, indented by depth, with a type chip beside each one. Arrow keys move through it, Right and Left open and close, and a tree of two hundred thousand nodes scrolls as smoothly as one of twenty, because only the rows on screen are ever drawn.

Table is for records. An array of objects becomes rows and columns, the columns the union of every row’s keys, and a nested object or array becomes a badge you can open, with a breadcrumb to find your way back. A wrapper like {"users": [...]} opens straight onto the users. Graph draws the same document as a diagram, root on the left and one column per level, which is the quickest way to see the shape of something you have never met; you can pan, zoom and fit it to the pane.

Each view, and when to reach for it: Four ways to read a JSON document.

Find a value, or ask with JSONPath

{
  "users": [
    {"name":"Ada","active":true},
    {"name":"Lin","active":false},
    {"name":"Mia","active":true}
  ]
}

$.users[?@.active == true].name

$.users[0].name  "Ada"
$.users[2].name  "Mia"

Find, in the editor band or with Ctrl/Cmd-F, searches keys and values as you type and marks every match in the tree. Switch it to JSONPath to ask a question instead — $.orders[*].total, or every item whose price is over a hundred — and the filter hides everything that is not a match or on the way to one, so a large document shrinks to the part you care about. Clear the query and the whole document comes back as it was.

Copy the path to a value

{
  "user": {
    "name": "Ada",
    "roles": ["reader", "editor"],
    "display name": "Ada L."
  }
}

$.user.name
$.user.roles[1]
$.user['display name']
7 nodes · depth 3

Select a row in the tree and the bar above it shows where you are: root › users › 3 › email, each step a button that takes you back up to it. Copy path copies that location in the form you need next — as JSONPath, $.users[3].email, ready to paste into Find, or as JavaScript, data.users[3].email, ready for your own code. Keys that are not plain names are quoted for you, so a key with a space or a hyphen still copies as a path that works.

Open what you need, fold the rest

A large document opens with its first rows expanded and everything else folded, so the first screen is readable rather than a wall. Open a branch with a click or the Right arrow; Expand all and Collapse all, in the pane’s toolbar, do the whole document at once, and the 1 · 2 · 3 buttons beside them open it to exactly that many levels and fold everything deeper. Tree and Graph share what is open, so a branch you fold in one is folded when you switch to the other.

Big files, and nothing uploaded

The parser, the tree and the search are JavaScript running in your browser, written for this site. There is no server behind the page and no account, so a file full of customer records or API keys is read on your own machine and never sent anywhere. Once the page has loaded it keeps working with the connection off. The practical limit on size is your browser’s memory rather than a cap we set. Because the tree draws only the rows on screen, a document of a few megabytes scrolls as easily as a small one; past 10 MB the tree asks before it builds, since building it holds the page for a moment.