{ }jsonkitOpen the tool

How to Format and Beautify JSON

6 min read · updated 2026-07-12

Formatting JSON—also called pretty-printing or beautifying—means adding consistent indentation and line breaks so a machine-minified blob becomes something a human can read and diff. It is one of the most common day-to-day tasks in web development, and every environment has a built-in way to do it.

This guide covers how to format JSON everywhere you actually work: in a browser-based tool, in VS Code, programmatically with JSON.stringify, and on the command line with jq and Python's json.tool. It also explains why formatting is a purely cosmetic transformation that never changes your data.

What "formatting" JSON actually means

JSON has no significant whitespace. The parser ignores spaces, tabs, and newlines between tokens, so {"a":1} and a version spread across five indented lines represent the exact same value. Formatting (or *beautifying*) inserts that ignored whitespace in a consistent pattern so the structure becomes visible to a human reader.

A formatter does three things: it puts each key/value pair on its own line, indents nested objects and arrays by a fixed amount per level, and adds a single space after each colon. Nothing else changes—keys keep their order, numbers keep their precision, and strings are untouched.

Choosing an indentation style: 2 spaces, 4 spaces, or tabs

All three are valid JSON—the spec doesn't care. The choice is about readability and matching your team's conventions. Here is how they compare in practice:

StyleProsCommon in
2 spacesCompact, less horizontal drift on deep nesting; the de facto web defaultnpm/package.json, most JS/TS projects, Prettier default
4 spacesMore visual separation between levels; easier to scanPython ecosystems, some enterprise style guides
TabsReader controls display width; smaller file sizeGo-adjacent tooling, accessibility-focused setups

Two spaces is the safest default: it is what package.json uses, what Prettier emits, and what most linters expect. Whatever you pick, be consistent within a repository—mixed indentation is the one thing that reliably annoys reviewers and produces noisy diffs.

A quick before-and-after

Minified inputjson
{"id":42,"name":"Ada","roles":["admin","editor"],"active":true}
Same data, formatted with 2-space indentationjson
{
  "id": 42,
  "name": "Ada",
  "roles": [
    "admin",
    "editor"
  ],
  "active": true
}

Format JSON in the browser (no install)

The fastest way to beautify an ad-hoc payload—an API response you copied from the network tab, a log line, a webhook body—is a browser tool. You paste, it formats, and nothing leaves your machine if the tool runs client-side.

{ }JSON FormatterOpen the tool

A good formatter does more than add whitespace: it validates as it parses, so malformed input surfaces an error with a line and column instead of silently mangling your data. If the tool reports a syntax problem, fix it first—see how to fix common JSON syntax errors—since a formatter can only pretty-print input that already parses. To confirm validity without reformatting, a dedicated JSON validator runs the same parse check.

Format JSON in VS Code

VS Code formats JSON out of the box—no extension required—as long as the file is recognized as JSON (the language mode shows "JSON" in the status bar, or the file ends in .json).

  1. Open the file, or paste your JSON into an empty buffer and set the language mode to JSON.
  2. Run Format Document: Shift+Alt+F on Windows/Linux, Shift+Option+F on macOS.
  3. To change indentation, click the Spaces: N indicator in the status bar and pick Indent Using Spaces or Indent Using Tabs, then the width.

To set the default width for every JSON file, add this to your settings.json:

VS Code settings.json — 2-space JSON indentationjson
{
  "[json]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.defaultFormatter": "vscode.json-language-features"
  }
}

Format Document respects whatever tab size the file already uses, making it handy for a one-off compact-to-pretty conversion without touching settings. If Prettier is installed, it overrides the built-in formatter and applies its own rules.

Format JSON with JSON.stringify in JavaScript

In JavaScript and Node, the built-in formatter is the third argument to JSON.stringify—the space parameter. Pass a number for that many spaces of indentation, or a string (like "\t") to indent with tabs.

Pretty-print with JSON.stringifyjs
const data = { id: 42, name: "Ada", roles: ["admin", "editor"] };

// 2-space indentation (most common)
console.log(JSON.stringify(data, null, 2));

// 4 spaces
console.log(JSON.stringify(data, null, 4));

// Tab indentation
console.log(JSON.stringify(data, null, "\t"));

// Round-trip: parse a string, then re-emit it formatted
const raw = '{"a":1,"b":[2,3]}';
console.log(JSON.stringify(JSON.parse(raw), null, 2));

The middle argument (null above) is the *replacer*—pass an array of key names to whitelist which keys are kept, or a function to transform values. For plain formatting, leave it null. There is much more to stringify and parse in working with JSON in JavaScript.

Format JSON on the command line: jq and Python

For files and shell pipelines, two tools cover almost every case. jq is a dedicated JSON processor that pretty-prints by default; Python's json.tool ships with any Python install and needs no dependencies.

Using jq

jq pretty-prints by default; use --indent or --tab to control widthbash
# Beautify a file (jq defaults to 2-space indentation)
jq . data.json

# 4-space indentation
jq --indent 4 . data.json

# Tab indentation
jq --tab . data.json

# Format an API response inline
curl -s https://api.example.com/users | jq .

# Overwrite the file with a formatted version
jq . data.json > tmp.json && mv tmp.json data.json

The . is the identity filter—it passes the input through unchanged, and jq formats the output. For querying and transforming rather than just formatting, see the JSONPath / jq cheat sheet.

Using Python's json.tool

Python's built-in JSON formatterbash
# Beautify a file (default 4-space indentation) to stdout
python3 -m json.tool data.json

# Choose the indent width
python3 -m json.tool --indent 2 data.json

# Format from a pipe
echo '{"a":1,"b":[2,3]}' | python3 -m json.tool

# Sort keys for a stable, diff-friendly output
python3 -m json.tool --sort-keys data.json

json.tool validates as it parses—if the input is malformed it prints the error and exits non-zero, which makes it a cheap JSON lint step in CI. For working with JSON in scripts rather than at the shell, see the Python json module guide.

Beautify vs minify: round-tripping without data loss

Beautifying and minifying are exact inverses. Beautify adds whitespace for humans; minify strips it for machines and smaller payloads. Because whitespace between tokens carries no meaning, you can convert back and forth indefinitely and the parsed value is always identical.

  • Beautify when reading, debugging, diffing, or committing config files to version control—readable diffs matter more than bytes.
  • Minify when shipping over the wire, storing in a cache, or embedding in a bundle—every byte counts and no human reads it.

One caveat: formatting preserves data but not necessarily byte-for-byte layout. A formatter may re-emit numbers in canonical form (for example, normalizing an exponent or a trailing zero, depending on the engine) and will not preserve comments, because standard JSON has none. If you rely on comments or trailing commas, you are using JSON5 or JSONC, not plain JSON, and a strict formatter will reject them.

Frequently asked questions

What is the standard indentation for JSON?

There is no official standard—JSON ignores whitespace entirely—but 2-space indentation is the de facto convention on the web. It is what npm's package.json uses and what Prettier emits by default. Four spaces and tabs are equally valid; consistency within a project matters more than the specific choice.

Does formatting JSON change the data?

No. Formatting only adds or removes insignificant whitespace between tokens. The parsed value—keys, order, numbers, strings, booleans, and nesting—is completely unchanged. You can beautify and minify the same document repeatedly without ever altering its meaning.

How do I pretty-print JSON in JavaScript?

Use the third argument of JSON.stringify: JSON.stringify(value, null, 2) formats with 2-space indentation. Pass 4 for four spaces or "\t" for tabs. To reformat an existing string, parse it first: JSON.stringify(JSON.parse(raw), null, 2).

How do I format a JSON file from the command line?

Two easy options: jq . file.json (jq pretty-prints by default with 2-space indent, and --indent N or --tab change it), or python3 -m json.tool file.json (built into Python, defaults to 4 spaces, --indent N to adjust). Both validate the input as they parse it.

How do I format JSON in VS Code?

With the file in JSON language mode, run Format Document: Shift+Alt+F on Windows/Linux or Shift+Option+F on macOS. Change the indent width via the 'Spaces: N' button in the status bar, or set editor.tabSize under a "[json]" block in settings.json for a permanent default.

Why does my JSON formatter say the input is invalid?

A formatter has to parse JSON before it can pretty-print it, so any syntax error—a trailing comma, a single quote, an unquoted key, a missing bracket—stops it. Fix the syntax first (a validator will point to the line and column), then format. Comments and trailing commas are JSON5/JSONC features that strict JSON parsers reject.