How to Format and Pretty-Print JSON (Without Breaking It)

You paste an API response into your editor and it arrives as one endless line: {"user":{"id":42,"roles":["admin","editor"],"meta":{"lastLogin":"2026-07-14T09:11:00Z"}}}. It's valid, but it's unreadable. Finding a single missing bracket or an unexpected null in a minified blob is genuinely painful. Formatting JSON turns that wall of characters into an indented, scannable structure your eyes can actually parse.

What "formatting" JSON actually means

JSON has no significant whitespace, so {"a":1} and a version spread across five indented lines are byte-for-byte equivalent to a parser. Formatting (also called pretty-printing or beautifying) inserts newlines and consistent indentation so the nesting becomes visible. It never changes the data — only how it's displayed.

Under the hood this is a two-step operation: parse the text into an in-memory structure, then re-serialize it with indentation. In JavaScript that's exactly what the built-in JSON.parse and JSON.stringify do.

The one line of code behind it

If you ever want to do this in a script, the standard library already covers it:

const raw = '{"user":{"id":42,"roles":["admin","editor"]}}';

// The third argument is the indent width (2 spaces here)
const pretty = JSON.stringify(JSON.parse(raw), null, 2);

console.log(pretty);
/*
{
  "user": {
    "id": 42,
    "roles": [
      "admin",
      "editor"
    ]
  }
}
*/

The JSON.parse step is important: it's what throws if the JSON is malformed, which is how a good formatter detects errors. If parsing succeeds, you know the JSON is syntactically valid before you even read it.

A practical walkthrough

Open the JSON Formatter and paste your raw JSON into the input pane. It parses instantly in your browser — nothing is uploaded — and produces indented output plus a collapsible tree view so you can drill into deep objects without scrolling through hundreds of lines.

1. Paste the minified or messy JSON.
2. Pick an indent width (2 spaces is the common default; 4 or tabs also work).
3. Read the formatted result, or collapse branches in the tree view to focus on one section.
4. Copy the clean output back into your code, docs, or a ticket.

If there's a syntax error, the parser reports it with a position so you can jump to the exact character that broke.

Common pitfalls to watch for

• Trailing commas. {"a": 1,} is valid in JavaScript object literals but invalid JSON. This is the single most common formatting failure.
• Single quotes. JSON strings and keys must use double quotes. {'a': 1} will not parse.
• Comments. Standard JSON has no comment syntax. If you pasted a config file with // notes, strip them first.
• Unquoted keys. {a: 1} is a JS object but not JSON — every key needs quotes.
• Big numbers. Values beyond Number.MAX_SAFE_INTEGER (like some 64-bit IDs) can silently lose precision when re-serialized. If you're handling snowflake IDs, keep them as strings.

Formatting only reveals structure — it does not fix invalid data. If a formatter refuses to run, treat that as a signal your JSON has a real syntax problem to resolve.

When you're done formatting

Pretty-printed JSON is great for reading, but you'll want the opposite before shipping it over the wire. Run it through the JSON Minifier to strip whitespace, or confirm correctness with the JSON Validator if you only care about whether it parses. All three run entirely in your browser with no sign-up.

Conclusion

Formatting JSON is a tiny operation with an outsized payoff: it turns opaque one-liners into something you can debug in seconds. Whether you lean on JSON.stringify(obj, null, 2) in a script or paste into a browser tool for the tree view and error detection, the goal is the same — make the structure visible so the data can speak for itself.