JSON formatter, validator and viewer

What this tool does

This is a JSON formatter, viewer and validator in a single page. Paste JSON of any shape — an API response, a webhook body, a configuration file, one line out of a log — press Format, and the document is parsed, checked and laid out as an indented, collapsible tree. Keys, strings, numbers, booleans and nulls are coloured differently, objects and arrays report how many entries they hold, and every branch can be folded away so a large payload can be read one level at a time.

The three jobs run together because in practice they are one job. To beautify a document you first have to parse it, and parsing is exactly what a validator does. A formatter that cannot read its input has to say so, and that refusal is the validation result. So a single button does both: it will convert a minified blob into human readable output when the syntax is sound, and point at the position where it broke when it is not.

Each time you format something the result appears above the previous one, so two payloads can be compared without losing the first. Results can be removed one at a time, or cleared all at once, and nothing survives a refresh.

Formatter, beautifier, validator, viewer

Four words get used for tools like this one, and they describe four different things people actually want.

A formatter rewrites the document with consistent whitespace: one value per line, a fixed indent per level of nesting, a predictable place for every brace and comma. Beautify is the older name for the same operation, inherited from the JavaScript tooling world — a beautifier and a formatter are the same tool wearing two labels. Neither touches your data; both only decide where the line breaks fall.

A validator answers one yes-or-no question: is this text legal JSON. That is a stricter question than it sounds, because the dialect most people write by hand is JavaScript rather than JSON, and a validator rejects every bit of the difference — trailing commas, comments, single-quoted strings, unquoted keys.

A viewer goes a step past a formatter. Instead of printing text it turns the parsed document into something you can work with: fold an array shut, read how many entries an object holds, follow one nested branch without tracking brackets by eye. Formatted text beats minified text; a tree beats formatted text as soon as the document is taller than a screen.

This page is all four at once. Input is validated, formatted, beautified and rendered as a human readable tree, and the Copy button hands back the indented text for when plain text was what you needed all along.

Why formatted JSON is easier to reason about

JSON is written for machines, and a serialiser has no reason to add whitespace. The result is a single line where structure is carried entirely by punctuation, which is exactly the information a reader needs and cannot see. Indentation restores it: nesting becomes depth on the page, and the shape of the data becomes visible before any of the values are read.

Collapsing helps for the opposite reason. A response with two hundred records is mostly repetition, and folding the array down to its first entry answers the question "what does one of these look like" without scrolling past the other hundred and ninety-nine.

Your JSON never leaves your browser

Nothing you paste here becomes a network request. The text you paste is parsed by your own browser with its built-in JSON parser, rendered into the page, and held in memory only — nothing is posted to a server, written to a cookie or saved in local storage. Refreshing clears every result, and closing the tab is all it takes to dispose of the data.

That matters because the JSON people need to read is rarely harmless. Production responses carry customer names, access tokens, order histories, internal identifiers, sometimes an entire address book. A formatter that uploads its input quietly converts a debugging step into a data transfer, and in a regulated environment that transfer is the sort of thing that has to be written down and justified.

The only version of that promise worth anything is one the page keeps whether or not you believe it. Open your browser network tab, paste a payload and press Format: apart from the analytics beacon this site sends on every page load — a URL and a page title — no request appears, whatever you pasted. Disconnect from the network entirely and the tool still works, because there was never anything on the other end to talk to.

Reading the error message

When the text is not valid JSON, the browser's own parser message is shown as-is, usually naming the position where it gave up. That position is where parsing failed, which is not always where the mistake is: a missing closing brace is reported at the end of the document, not at the object that was left open.

The common causes are worth knowing by sight. Single quotes instead of double ones, a trailing comma after the last element, unquoted keys, and comments — all legal in JavaScript, none legal in JSON. A payload copied from a terminal often carries an escape sequence or a truncation marker that has to come out first.

Converting minified JSON into something human readable

Almost all JSON in the wild arrives minified. Serialisers have no reason to emit whitespace, gateways strip what little there is, and log lines are deliberately squeezed onto one row so that one event equals one line. What you get is a wall of text in which the structure is carried entirely by punctuation — which is precisely the information a reader needs and the one thing a single line refuses to show.

Beautifying converts that wall back into shape. Nesting becomes depth on the page, so the outline of the document is legible before a single value has been read: this is an object with five keys, one of which is a list of orders, each order carrying a customer and a set of lines. That outline is the thing you were looking for nine times out of ten. The values only matter once you know where they sit.

Collapsing helps for the opposite reason. A response holding two hundred records is mostly repetition, and folding the array down to its first entry answers the question "what does one of these look like" without scrolling past the other hundred and ninety-nine. Fold everything with Collapse all, then open only the branch under investigation — on a large document that is far quicker than reading top to bottom, and it keeps the surrounding context on screen.

Using the page as a validator

When the text is not valid JSON nothing is rendered; instead the parser message is shown as-is, normally naming the character position where it gave up. Treat that position as where parsing failed rather than where the mistake is. The two coincide for a stray character, but a missing closing brace is only detected at the end of the document, long after the object that was left open.

The usual culprits are worth recognising on sight. Single quotes where JSON demands double ones. A trailing comma after the last element of an array or object. Keys written bare instead of quoted. Comments — all four are perfectly legal JavaScript and none of them are JSON. Some tools deliberately emit that relaxed dialect, usually under the name JSON5 or JSONC, and it has to be converted to strict JSON before any standard parser will look at it.

Payloads copied out of a terminal bring their own problems: escaped quotes that were never unescaped, a truncation marker in the middle, a shell prompt glued to the front, or smart quotes introduced by a chat client on the way. Strip those first. And if a document validates here but is rejected further down your own stack, the disagreement is usually not about syntax at all but about a schema — a field that is present and legal but not the type the receiving code expected.

A worked example

Take a typical order payload: an object with an order number, a nested customer, an array of two line items and a null field. Minified it is one line of about a hundred and eighty characters, and answering "how many items were on this order" means counting brackets.

Formatted, the same document opens with Object, 4 keys, and the items branch announces 2 items before you have read anything. Fold the customer away and the order structure fits in five lines. The null shows in grey, which distinguishes a field that exists and is empty from a field that is simply absent — a difference that decides whether a bug lives in the sender or the receiver, and one that is easy to miss in raw text. Press "Load a sample" to see exactly that document rendered.