JSON viewer, formatter and validator
Explore JSON in a collapsible tree with path breadcrumbs, search, key sorting and size stats, plus one-click beautify, minify and validate.
- Runs in your browser
- Files are never uploaded
- Free, no account
Applies to the tree and the formatted output.
JSON input
Tree view
Paste JSON on the left and the collapsible tree appears here.
How to use the JSON viewer
- Paste your JSON or drop a
.jsonfile onto the left pane. Validation runs as you type. - Explore the tree. Expand and collapse nodes, or set a default depth so large documents open at a readable level.
- Click any row to see its full path in the breadcrumb above the tree, then copy it for your code.
- Search for a key or value; matching branches stay visible with their parents expanded.
- Switch tabs to beautify or minify the document, or to read the size and shape statistics.
Reading the error messages
When JSON is invalid you get the line, the column and the offending line printed with a caret beneath the exact character. These are the causes behind almost every failure:
| Mistake | Example | Fix |
|---|---|---|
| Trailing comma | {"a": 1,} | Remove the comma after the last member |
| Single quotes | {'a': 1} | JSON strings must use double quotes |
| Unquoted key | {a: 1} | Quote every key — that is JavaScript, not JSON |
| Comment | // note | JSON has no comments; delete them or use YAML |
| NaN or Infinity | {"x": NaN} | Not valid JSON — use null or a string |
| Unescaped control character | A literal newline inside a string | Escape it as \n |
| Truncated response | Ends mid-object | Re-copy the payload; the error points at the last line |
Paths you can paste into code
Selecting a node builds a JSONPath-style expression such as
$.store.books[2].title. Identifier-safe keys use dot notation; anything else — a key with a
space, a dash or a dot in it — is written in bracket notation with quotes, for example
$["order-id"]. Array elements always use numeric brackets. The result is directly usable
with jq, JSONPath libraries and most API testing tools, and reads almost identically to
JavaScript property access.
What the statistics tell you
- Total keys and max depth — a quick sanity check that a payload matches the schema you expected.
- Type counts — a large null count often means an optional field is never being populated upstream.
- Beautified versus minified size — how much whitespace costs you on the wire. Minifying typically saves 15-30% before compression; gzip narrows the gap but does not close it.
Beautify, minify, validate
Beautifying rewrites the document with two, four or eight-space indentation — useful for reading a response and for producing diffs that a reviewer can follow. Minifying removes every optional byte, which is what you want in a request body or an embedded config. Sorting keys makes two documents from different sources directly comparable, since JSON object member order is not significant.
Handling big documents
Everything is parsed with the browser’s native JSON engine, so a few megabytes is comfortable. To keep the interface responsive, any single node with more than 300 children renders the first 300 and tells you how many were omitted — the full document is still validated, formatted and downloadable.
Nothing is uploaded
API responses routinely contain access tokens, personal data and internal hostnames. This viewer never sends them anywhere: parsing, formatting and searching all happen in this tab, and the page keeps working with the network switched off.
Questions
How large a document can it handle?
Files of a few megabytes are comfortable on a normal laptop. Very wide nodes render their first 300 children with a note about the rest, so the page never freezes.
Where do I find the path to a value?
Click any row and its JSONPath-style path — for example $.store.books[2].title — appears in the breadcrumb above the tree with a copy button.
What does the search box match?
Both keys and scalar values, case-insensitively. Matching branches stay visible with their parents expanded, so you can see where each hit sits in the structure.
How exact is the error reporting?
Invalid JSON is reported with the line, the column and the offending line printed with a caret underneath, so you can jump straight to the stray comma or missing quote.
Is this the same as the developer JSON formatter?
They share a parser but not a focus. This page is built for reading and exploring documents; the developer formatter is tuned for quick beautify and minify passes.