I remember the first time I had to debug a production issue from a 15KB API response. The backend developer sent me the raw response — a single line of JSON that my terminal refused to wrap cleanly. Scrolling horizontally through 3,000 characters of compressed JSON to find a single "status" field felt like looking for a typo in a phone book.
That day I learned the single most useful command in my dev toolkit: pretty-printing.
Why Single-Line JSON Happens
APIs compress JSON for transport. Less whitespace means fewer bytes on the wire, lower latency, and happier network teams. This is fine in production. But when you're debugging, reading, or editing JSON, the compressed format is a nightmare.
{"users":[{"id":1,"name":"Alice","email":"alice@example.com","roles":["admin","editor"],"metadata":{"lastLogin":"2026-05-30","preferences":{"theme":"dark","notifications":{"email":true,"sms":false,"push":true,"digest":"weekly"}},"loginHistory":[{"date":"2026-05-30","ip":"192.168.1.1","device":"Chrome/125"},{"date":"2026-05-29","ip":"192.168.1.2","device":"Firefox/126"}]}},{"id":2,"name":"Bob","email":"bob@example.com","roles":["viewer"],"metadata":{"lastLogin":"2026-05-28","preferences":{"theme":"light","notifications":{"email":false,"sms":false,"push":false,"digest":"never"}},"loginHistory":[{"date":"2026-05-28","ip":"192.168.1.3","device":"Safari/18"}]}}]}
Now imagine that's 500 users, not 2. Good luck finding anything.
The Quick Fixes
In the Browser Console
console.log(JSON.stringify(data, null, 2));
That 2 is the number of spaces per indent level. You get a readable, indented version of your JSON right in the dev tools console.
In Node.js / Terminal
# Pretty-print a JSON file
echo '{"name":"test","data":{"key":"value"}}' | node -e "process.stdin.on('data', d => console.log(JSON.stringify(JSON.parse(d), null, 2)))"
# Or with a file
cat response.json | node -e "process.stdin.on('data', d => console.log(JSON.stringify(JSON.parse(d), null, 2)))"
Using a Web Tool
Paste the single-line mess into the JSON Formatter, hit "Format", and you get a clean tree view instantly. I use this daily because I don't always have a terminal handy — especially when someone pastes a response in a Slack thread.
Choosing Your Indentation Style
Different projects use different conventions. Here's what I've encountered:
2-Space Indentation (Most Common)
{
"name": "Alice",
"roles": [
"admin",
"editor"
]
}
The JavaScript ecosystem standard. Node.js configs, npm packages, and most modern APIs use this.
4-Space Indentation
{
"name": "Alice",
"roles": [
"admin",
"editor"
]
}
Popular in Python projects and teams that prefer more visual hierarchy. Some linters enforce this.
8-Space and Tab Indentation
{
"name": "Alice",
"roles": [
"admin",
"editor"
]
}
I've only seen 8-space in legacy Java projects. Tab indentation is rare but shows up when teams don't configure their editors. The JSON Formatter supports all these options — including Tab — in a dropdown.
Which should you pick? 2-space is the safest default. If your project has a .editorconfig or linter config, follow that. If you're committing JSON to a shared repo, check what the team uses before formatting — re-indenting a file creates a massive diff that buries real changes.
Beyond Basic Formatting: What a Good Pretty-Printer Does
When I'm debugging, basic indentation isn't enough. I need these features too:
Syntax Highlighting
Color-coded keys, strings, numbers, and booleans. The difference between finding a string vs a number at a glance is huge when scanning 50-line objects.
Collapsible Tree View
This is the killer feature. Being able to expand only the subtree I care about — like response.data.users[3].metadata — instead of scrolling through the whole document saves hours.
The JSON Formatter renders formatted JSON as both an indented text view and an interactive tree view. Click the arrows to drill down, collapse what you don't need.
Search Within JSON
{
"users": [
{ "id": 1, "email": "alice@company.com" },
{ "id": 42, "email": "bob@company.com" }
]
}
Try finding email: bob@company.com by eyeballing a 300-line JSON file. You need search. The tree view's built-in search highlights matches within the structure.
Automating Pretty-Print in Your Workflow
Here's a snippet I keep in my ~/.bashrc:
alias prettyjson='node -e "process.stdin.on(\"data\",d=>{try{console.log(JSON.stringify(JSON.parse(d),null,2))}catch(e){console.error(\"Invalid JSON:\",e.message)}})"'
Usage:
curl https://api.example.com/data | prettyjson
Or, if you're dealing with a lot of JSON files and want to batch process them:
// batch-pretty.js
const fs = require('fs');
const path = require('path');
const dir = process.argv[2];
const files = fs.readdirSync(dir).filter(f => f.endsWith('.json'));
files.forEach(file => {
const raw = fs.readFileSync(path.join(dir, file), 'utf-8');
const pretty = JSON.stringify(JSON.parse(raw), null, 2);
fs.writeFileSync(path.join(dir, 'pretty-' + file), pretty);
console.log(`Formatted: ${file}`);
});
FAQ
Q: Does pretty-printing change the data structure?
A: No. It only adds whitespace. Parsing a pretty-printed JSON gives you the exact same data as parsing the minified version.
Q: Can pretty-printing break anything?
A: Only if you're using JSON in a whitespace-sensitive context (which you shouldn't be). In general, it's a safe transformation.
Q: What's the difference between Format and Validate in the JSON Formatter?
A: Validate just checks syntax. Format pretty-prints AND validates simultaneously. If the JSON is invalid, Format will show the error instead of the formatted output.
Q: Should I commit pretty-printed or minified JSON to version control?
A: Pretty-printed. The diff is more readable. Minified JSON produces impossible-to-review diffs where a single character change shifts the entire line.
Q: How do I pretty-print JSON from a clipboard automatically?
A: I use the JSON Formatter — paste with Ctrl+V, click Format. It's faster than switching to a terminal.
Q: What indentation does the JSON specification require?
A: None. The RFC allows any amount of whitespace, including zero. Indentation is purely for human readability.
Q: Can I control array formatting separately from object formatting?
A: Most formatters use a single setting for both. The pretty-printed output aligns array elements similarly to object properties by default.