How to Format and Prettify JSON

Minified or messy JSON is hard to read and harder to debug. Formatting (also called prettifying or beautifying) adds consistent indentation and line breaks so the structure is obvious.

Before and after

Minified JSON is one dense line:

{"name":"app","port":8080,"tags":["web","api"],"db":{"host":"localhost"}}

Formatted, the same data is readable:

{
  "name": "app",
  "port": 8080,
  "tags": ["web", "api"],
  "db": {
    "host": "localhost"
  }
}

Same information, far less cognitive load.

2 spaces or 4?

Both are common. 2 spaces is the most popular default (npm, Prettier, most JS tooling) because it keeps deeply nested structures from drifting too far right. 4 spaces is easier to scan for some people. Pick one and stay consistent.

Why formatting helps debugging

• A missing or extra bracket becomes visually obvious once indented.
• You can fold sections in your editor.
• Diffs are line-by-line instead of one giant changed line.

Format it instantly

Open the formatter, paste your JSON, choose 2 or 4 space indentation, and copy. It also converts to YAML or TOML if you pick a different target format.

Formatting vs minifying

Formatting is for humans; minifying strips all whitespace for machines to save bytes. You format during development and minify for production payloads.

Tip: validate first

If formatting fails, your JSON has a syntax error. Run it through the validator first — it pinpoints the problem in plain English, then format the corrected version.