What does a JSON viewer do?
A JSON viewer takes a JSON document and shows it as a tree you can open and close, rather than as a block of indented text. The document is parsed, then rendered so that each object and array is a branch that expands, each value is a leaf you can read directly, and the nesting is visible in the indentation instead of implied by it. That matters because JSON is a nested format: a real API response is usually an envelope around a result around a list, and reading it linearly means scrolling past the same shape repeatedly.
Everything happens as you type. The text is parsed with the same strict parser the browser uses for JSON, so a document that is almost JSON is reported as invalid rather than quietly accepted. When parsing fails, the message from the parser is shown along with the line it points at, which is the fastest way to find a trailing comma, a single-quoted key or an unescaped newline inside a string.
The viewer also counts and filters. A node count tells you how large the document really is, which is useful when a payload is bigger than it looked in the editor, and the filter keeps every branch on the path to a match open while hiding the rest — turning the question of where a field lives into a single step.
How to view and explore JSON
- Paste the JSON into the box, or press Load an example to see a representative document.
- The tree appears immediately if the document is valid. Each + expands a branch and each − closes it; the first two levels start open.
- Type a key or a value into the filter to keep only the branches that match, with their ancestors retained so the path stays readable.
- Read the node and value counts beside the input to see how large the document is.
- Press Copy prettified JSON to put a two-space-indented version on your clipboard for a file, a bug report or a test fixture.
- If the document is rejected, read the parser message and the line number it gives, then fix that position and the tree will appear.
JSON Viewer limits and rules
| Item | Limit |
|---|---|
| Input | Any single JSON document — object, array, string, number, boolean or null |
| Parsing | Strict JSON: no trailing commas, no comments and no single-quoted keys |
| Errors | The parser message plus the line the position falls on |
| Filtering | Case-insensitive match on keys and on values, as text |
| Copying | The parsed document re-serialised with two-space indentation |
| Size | Practical up to a few megabytes; much beyond that the tree becomes slow to render |
| Not a JSON5 or JSONC parser | Comments and trailing commas must be removed first |
| Read-only | Edits belong in the input box; the tree is a view, not an editor |
When to use it
- Working out the shape of an API response before writing the code that consumes it.
- Finding which branch of a large configuration file holds a particular setting.
- Checking that a serialised object round-trips, and that the numbers stayed numbers and the booleans stayed booleans.
- Locating a value in a webhook payload without scrolling through a screen of nested braces.
- Confirming that two versions of a document have the same structure, before diffing them in detail.
Is it private?
The JSON is parsed in your browser and never uploaded. That is the point of doing it here: a payload often contains an access token, an API key or a customer record, and pasting it into a server-side viewer means sending it to somebody else's machine. Nothing is stored, and closing the tab discards it.
Frequently asked questions
A formatter changes the text: it takes minified JSON and writes it out with indentation and line breaks so a human can read it. A viewer changes how the structure is presented: it parses the document and renders a tree you can navigate. The two are often combined, and this tool copies a prettified version when you need one, but the reason to reach for a viewer is that formatting alone still leaves a large document as a wall of equally indented lines.
Almost always a detail that JSON forbids but JavaScript and JSON5 allow. A trailing comma after the last item in an object or array is legal in JavaScript and fatal here. Keys in single quotes, comments, undefined as a value, a hexadecimal number, and a number with a leading zero or a leading plus are all rejected. The error message gives the character position, and the line number beside it is where to look — it is usually one line above the position, since the parser only notices on the next token.
A few megabytes is comfortable. Beyond that the cost is rendering rather than parsing: every object, array and value becomes a DOM node, and a hundred thousand of them makes the browser slow to paint and slow to respond to clicks. For a multi-megabyte document, a validator or a command-line tool that can query the structure without drawing it is the better choice. Collapsing the first level helps, since nothing inside a closed branch is rendered.
Yes. Matching is on the text of a value as well as on keys, so a number, a string and a boolean are all found by typing what they contain. A branch is kept if it or any of its descendants matches, and the ancestors of a match stay visible so the path to it makes sense. Ordinary spaces from the kind of text editors often paste in are not trimmed for you, so a match that looks right but is not found is sometimes one invisible character away.
No, and that is deliberate. Editing a tree in place raises questions a viewer is not built to answer — what to do with an invalid intermediate state, how to represent a value that is temporarily a string in a position that expects a number — and getting them wrong makes the tool untrustworthy for the job it does best. Edit the text in the input box: the tree re-parses on every keystroke, so the view is always the current document.
It displays them in the order the parser preserves, which for JSON is the order they appear in the document. The specification does not attach meaning to key order, and some tools sort alphabetically, which can be confusing when comparing two documents that differ only in order. Numeric-looking keys are the exception to watch: a few environments reorder them, though the display here does not.
Related tools
Written and maintained by Md. Nur Hossain Repon.