Developer Tools·4 min read

How to View Large JSON Files as a Tree

A formatted JSON file is readable until it isn't. Past a few hundred lines, indentation stops helping, because the part you need is three screens down and five levels deep. A JSON viewer solves that by drawing the document as a tree you can fold, search and query. This guide shows how to open a large payload, find what you need in it quickly, copy exact paths for your code, and switch to a table when the data is really a list of records.

Open the free JSON Viewer All insights

When indentation stops being enough

The 3,000-line API response.

Picture a paginated API response: a small envelope with a status, a cursor and a count, and then an items array with two hundred orders, each carrying a customer, an address, line items and payment details. Formatted with two spaces, that is several thousand lines. Everything is visible and nothing is findable.

What you usually want is narrow. Does every order have a shipping address? What does the payment object look like? Which orders have a discount code? Scrolling formatted text answers those questions slowly and unreliably. A tree view answers them by letting you hide everything else.

Opening JSON in the viewer

Paste, drop, upload or fetch.

Paste the JSON into the left pane of the JSON Viewer, drop a file onto it, or press Open .json. For a public endpoint, press Load URL and enter the address; the site's server fetches it for you, because browsers block most cross-site reads, and the text lands in the editor. The tree updates a moment after you stop typing.

Log exports often come as JSON Lines, one object per line, which is not a single valid JSON document. The viewer notices that and reads each line as one item of an array, so a day of structured logs opens as a list you can browse. If the text is broken, the bad line is highlighted with a plain-English reason, and Fix common errors handles trailing commas, single quotes, comments and unquoted keys.

Reading the tree without getting lost

Open only what you need.

The tree starts with two levels open. Set Open levels to 1 to see just the top-level keys, which for an API response is usually the envelope. Every object shows how many keys it has in braces, and every array shows its length in brackets, so you can tell at a glance that items holds 200 entries before you open it.

Large arrays show 200 entries at a time with a button for the next batch. That keeps the page quick on big files, since only the branches you open are drawn. Expand all opens the first few thousand nodes for a quick scan, and Collapse all folds everything back to the root.

Arrows open and close one branch; they work with the keyboard as well as the mouse.
Keys are shown in one color and values in another, with strings, numbers, booleans and null each distinct.
Click any row to select it and see its full path underneath the tree.

Search, then copy the path

From a key name to code you can paste.

Type a word in the search box, such as discount, and the viewer checks every key and every value. Matching rows are highlighted, the branches that contain them open automatically, and a counter shows how many matches there are. That turns where is this field into a two-second question, even when it sits four levels down in one order out of two hundred.

Once you find the node, copy its path. Hover and press the copy icon at the end of the row, or select it and press Copy path. Paths come in the normalized JSONPath form, such as $.items[37].payment.discount.code, with bracket quotes for keys that contain spaces. Copy value gives you the node itself, pretty-printed if it is an object or array.

Tables and JSONPath queries

When the data is really a list.

Most payloads contain at least one array of similar objects, and those read far better as rows. Open the Table tab and the viewer finds every such list in the document. Pick one and each object becomes a row, with nested objects flattened into columns such as customer.email. Empty cells make missing fields jump out, which is the quickest way to spot records that break a pattern.

The JSONPath tab goes one step further. Paste a path you copied from the tree and replace an index with a star to get the same field from every item: $.items[*].payment.method. Recursive descent finds a key at any depth, as in $..sku, and filters pick items by value, as in $.items[?(@.total > 100 && @.status == 'paid')]. Matching values and their paths are listed below, ready to copy.

Habits for working with large JSON

Check Stats before you write code that walks a document. It shows the nesting depth, how many objects, arrays and keys there are, and how many values of each type, which tells you whether a field that should be a number sometimes arrives as a string or null.

Keep sensitive payloads local. Pasted and dropped files are parsed in your browser and never uploaded, so production data with emails or tokens stays on your machine. Only Load URL goes through a server, and it only makes sense for public addresses anyway. When you need the data in another shape afterwards, the JSON Formatter re-indents it, JSON to CSV and JSON to Excel turn a list into a spreadsheet, and JSON to TypeScript writes types from the same sample.