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:
| Style | Pros | Common in |
|---|---|---|
| 2 spaces | Compact, less horizontal drift on deep nesting; the de facto web default | npm/package.json, most JS/TS projects, Prettier default |
| 4 spaces | More visual separation between levels; easier to scan | Python ecosystems, some enterprise style guides |
| Tabs | Reader controls display width; smaller file size | Go-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
{"id":42,"name":"Ada","roles":["admin","editor"],"active":true}{
"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).
- Open the file, or paste your JSON into an empty buffer and set the language mode to JSON.
- Run Format Document:
Shift+Alt+Fon Windows/Linux,Shift+Option+Fon macOS. - 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:
{
"[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.
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
# 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.jsonThe . 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
# 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.jsonjson.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.