JSON Viewer

A JSON viewerturns a JSON document into something you can walk through. Instead of a wall of text, you get a collapsible outline: objects and arrays become branches you open and close, and every value sits on its own row beside the key it belongs to — the same idea as a file explorer, or the object inspector in your browser’s developer tools.

The distinction that matters is that a viewer reads. It does not rewrite your document, reorder anything or hand you a new version to copy. It builds a picture of the data in memory and gives you the controls to move around it: expand, collapse, search, select, copy a path.

Take a response with two users in it. As text you have to track brackets to know where one record ends and the next begins:

1{"users":[{"id":1042,"address":{"city":"London"}},{"id":1043,"address":{"city":"New York"}}]}

▾ "users" [ ] 2 items
  ▸ 0 { } 2 keys      { id: 1042, address: {…} }
  ▸ 1 { } 2 keys      { id: 1043, address: {…} }

Nothing has changed except what you can see. The second record is still there — it is simply closed, because right now the question was how many users came back, not what is inside each one.

Formatting solves the problem of a document being unreadable. It does not solve the problem of a document being large. A well-indented 4,000-line response is still 4,000 lines, and scrolling through them to find one field is not reading — it is searching by hand. A viewer changes what the work is:

• You see structure before detail.A collapsed tree answers “what shape is this?” in one glance: how many top-level keys, which of them are collections, how deep the nesting goes.
• You only open what you need. Everything else stays folded away, so a deeply nested branch is three clicks rather than three screens of scrolling.
• Searching keeps its context. Finding text in an editor gives you a line number. Finding a key in a tree shows you the value, its siblings and the branch it sits in — which is usually the thing you actually wanted to know.
• Paths come out ready to use. Selecting a row gives you $.users[0].address.city without counting brackets, which is what you need to paste into a JSONPath tester, a test assertion or a line in a bug report.
• Types stop being guesswork. The tree distinguishes the number 0 from the string "0", an absent field from one set to null, and an empty array from an empty object — the exact distinctions that produce bugs when they are missed.
• Size stops being a barrier. Only the rows on screen are drawn, so opening a multi-megabyte export costs about what opening a small one does.

Everything below runs in your browser. There is no upload step, no queue and no account.

Interactive tree view

Objects, arrays, strings, numbers, booleans and nulls each render distinctly, with a child count on every container and a one-line preview of what a collapsed branch holds. Expand a single node, expand a whole branch, jump to a nesting level, or open the entire document at once. Very wide arrays load in blocks so a hundred-thousand-item list cannot stall the page.

Search across keys and values

Matches are found as you type, counted, and highlighted where they sit. Step through them with the arrows or with Enter and Shift+Enter — each jump opens whatever branches are needed and scrolls the result into the middle of the view. Restrict the search to keys or to values when a common word appears in both.

JSON paths

Every row carries its own path. Select one and it appears along the bottom of the explorer, ready to copy. Ordinary keys use dot notation, array indexes and awkward keys use brackets, so the result is a valid expression rather than an approximate one.

Node actions

Right-click any row — or use its …button — to copy the key, the value, the JSON path or the entire enclosing object, and to expand or collapse that node’s children without touching the rest of the tree.

Display options

Line numbers, word wrap, data-type tags, quotation marks, array indexes and a compact row height are each switchable. They change what is drawn, never the data: turn quotes off to skim a large document, turn types on when a value’s type is the thing in question.

Statistics

How many objects, arrays and keys the document contains, how deeply it nests, and its characters, lines and size on disk — the numbers that tell you whether a payload is reasonable before you build anything on top of it.

Files, clipboard and print

Open a .jsonfile with the upload button or by dropping it anywhere on the panel. Copy the document, download it as it arrived or re-indented for reading, or print it. Files are read with the browser’s own FileReader — they are never transmitted.

Keyboard control

The tree is fully navigable from the keyboard: arrow keys move between rows, Right and Left open and close branches, Enter toggles, and Home and End jump to the ends of the document. Ctrl+F searches, Ctrl+Shift+E and Ctrl+Shift+C expand and collapse everything, and Ctrl+Shift+D downloads.

1. 1. Add your JSON. Paste it into the source panel, drag a .json file anywhere onto the tool, or use the upload button. A sample document is loaded to begin with — replace it, or press Load example for a richer one.
2. 2. Check that it parses. The status bar reads Valid JSON as soon as the document is well-formed. If it does not, the message underneath names the problem with its line and column, and the button beside it jumps the cursor there.
3. 3. Open the branches you care about. The tree starts two levels deep. Click an arrow to open one node, use the numbered Level buttons to open every branch down to a given depth, or press Expand all.
4. 4. Search for what you are looking for. Type a key or a value into the search box. Use the arrows to step between matches; each one is revealed and centred as you reach it.
5. 5. Take what you need. Select a row to see its JSON path, or right-click it to copy the key, the value, the path or the whole enclosing object. The Statistics tab summarises the document, and the toolbar downloads or prints it.

For a long session, press the fullscreen button — the explorer takes the whole window, which on a deeply nested document is the difference between reading and squinting.

Both views show the same document, and this tool keeps both a keystroke apart. What differs is the question each one answers well.

Raw JSON is text. It is what you copy, commit, diff and send. It is the honest representation: every byte is there, including the whitespace, and what you see is exactly what a parser will read. When you need to hand the document to something else, you need the text.

The tree is the data. It is the parsed document, drawn as the structure it describes. Nesting becomes indentation you can fold, arrays announce their length, and each value carries its type. When you need to understand the document rather than transport it, you need the tree.

The practical differences:

• Finding something. Raw text search matches characters, so searching id also matches video and validity. Tree search can be limited to keys or to values, and each hit arrives with its surroundings intact.
• Hiding what you do not need. Raw text shows everything, always. A tree collapses a 900-line branch into one row and gives you a preview of what is inside it.
• Knowing where you are. Raw text gives you a line number, which means nothing outside the file. A tree gives you a path, which addresses the same value in any copy of the document.
• Handling size.A megabyte of text is a megabyte of text. A tree renders only the rows in view, so the document’s size stops determining how it feels to read.
• Seeing formatting problems. This is where raw wins outright. Trailing commas, duplicate keys and stray characters are text problems, and you fix them in the text — which is why the source panel stays open beside the tree, and why the JSON validator is the better place to work when the document will not parse at all.

In practice the two are complementary: explore in the tree until you know what you are looking at, then switch to raw when you need to take something away with you.