My Tool Studio
Developer Tools·5 min read

How to Format JSON and Read Any Payload

Every developer eventually stares at a wall of JSON with no line breaks and a bug hiding somewhere inside it. Formatting turns that wall into a readable tree in seconds, as long as you know what a formatter can and can't do. This guide walks through a worked example with real input and output, what happens to your data along the way, the syntax errors that stop formatting cold, and the habits that keep payloads readable across a team. The JSON Formatter itself is simple: paste, pick an indent, press Format. The details around it are where most of the time gets saved.

{"name": "site","tags": ["fast","clean"],"active": true}Beautified

The 40 KB single line: when formatting comes up

The scenario every developer knows.

It usually starts in a network tab or a terminal. An endpoint returns its whole response minified, a log aggregator flattens a payload onto one line, or a teammate pastes a webhook body into chat with every space stripped. The data is fine. Reading it is the problem, because 40 KB of JSON with no line breaks defeats human eyes completely.

That's when people reach for a formatter. The task isn't hard, it's constant. Formatting is the first move in almost every JSON debugging session, since you can't reason about structure you can't see. The fix takes about three seconds once you know what the formatter is doing, and what it refuses to do.

How to format JSON with a two-space indent

A worked example, input to output.

Take the smallest interesting payload: {"a":1,"b":[2,3]}. Paste it into the Input box, leave Indent on 2, and press Format. The output starts with an opening brace on its own line, then "a": 1 indented two spaces, then "b" opening an array where 2 and 3 each get their own line at four spaces of depth, before the closing bracket and brace step back out. One line in, seven lines out, identical data.

Pick 4 and the same structure doubles its indentation, which some teams prefer for deeply nested documents. Pick Tab and each level gets one tab character instead, which suits editors set up for tabs; 1 and 3 spaces are there for house styles that use them. The line under the panes shows the character and line count, so you can confirm the whole document came through. If you want to see a realistic payload first, Try sample loads a small product record with a nested object and an array.

What a formatter does under the hood

Parse, then reprint. That's all.

Every JSON formatter starts the same way: it parses the input to prove it is valid. What happens next differs. Many formatters print the parsed data back out, which means JavaScript re-prints every number and reorders keys that look like whole numbers. This formatter re-indents the original tokens instead, so keys stay in their exact order and numbers keep every digit: 1.0 stays 1.0, and a 19-digit database ID is not rounded.

Sorting is the exception. Choose A to Z or Z to A under Sort keys and the data has to be rebuilt in a new order, so numbers pass through JavaScript on the way. When that would change a value, the page says so, and you can turn sorting off to keep the original digits.

Notice what's absent from that description: silent repair. Parsing happens before printing, so broken input never reaches the pretty-printing step. That boundary explains almost every surprise people run into with these tools.

Five mistakes that stop your JSON from formatting

The parser is strict on purpose.

When the parse fails, the Input box highlights the line with the problem, and the message gives the line, the column and a plain-English reason. Go to line moves the cursor there. For the usual hand-editing slips, Fix common errors repairs the text in one press and tells you what it changed. It never guesses at a missing comma or bracket, because a tool that invents structure will eventually guess wrong on data that matters. These five causes cover most failures:

  • A trailing comma after the last item: {"a":1,} is legal JavaScript but invalid JSON.
  • Single quotes around keys or strings. JSON requires double quotes everywhere.
  • Comments. JSON has no comment syntax, so // or /* */ kills the parse immediately.
  • Unquoted keys, usually from pasting a JavaScript object literal instead of real JSON.
  • An escaped string pasted as a document: if it starts with a quote and is full of backslashes, unescape it first.

Why format JSON before debugging

Structure you can see is structure you can check.

Indentation converts invisible problems into visible ones. A null where an object should be, an array wrapped one level too deep, a key that appears twice with different casing: all of these hide on a single line and jump out in indented output. The Output pane adds syntax colors too, so a string where a number belongs stands out before you've read a single key. On very large inputs, above about 80,000 characters, the colors switch off to keep the page responsive.

Formatting also makes edits safer. When you edit JSON in a browser rather than an IDE, formatting first puts each change on its own line, so diffs stay reviewable and a misplaced brace gets caught immediately. For big payloads, switch the output to Tree to fold everything you are not looking at, search for a key, and copy its path, or use the JSONPath tab to pull out one field from every item. The usual loop is expand, inspect, edit, then press Minify to pack the result back onto one line for shipping.

JSON formatting habits for teams

Three habits that keep payloads readable.

First, pick one indent width per repository and stop debating it; two spaces is the common choice for JSON. Second, format before you commit, so version control shows one changed value per line instead of one giant changed blob. Third, keep the split explicit: pretty for humans and fixtures, minified for the wire, and never hand-edit the minified copy.

On tooling, you don't need a browser extension to follow any of this. What matters most is where the parsing happens. This formatter parses and prints in your browser, so pasted and uploaded payloads that contain tokens, emails or customer data never leave your machine. Load URL is the one exception, since the site's server has to fetch the address for you. For files of hundreds of megabytes, a command-line tool such as jq is a better fit than any browser tab, since your browser's memory is the ceiling.

Formatter, validator, minifier: which JSON tool when

Related tools on this site.

Reach for the JSON Validator when you need a verdict with a line and column, or want trailing commas, single quotes and bare keys fixed for you. The Formatter has its own Minify button, but the JSON Minifier goes further, with byte counts before and after and an escaped string output for embedding JSON inside another string. The JSON Viewer is the formatter's reading room: a bigger tree, a table view for lists of records and a stats panel.

For format changes rather than formatting, the converters take over. The XML to JSON Converter and JSON to XML Converter handle markup, the JSON to CSV Converter and CSV to JSON Converter cover spreadsheet trips, JSON to Excel builds a workbook, and JSON to TypeScript turns a sample into interfaces or a Zod schema. Formatting sits at the start of all those pipelines, because every converter expects input that parses.

Try it now

Open JSON Formatter

The tool is one click away. No sign up, no upload, no payment.

Open JSON Formatter