Formatting JSON in JavaScript comes down to one function: JSON.stringify(). Its third argument controls indentation and transforms compact JSON into human-readable output. This article covers everything from the basic pretty-print call to advanced replacer patterns.
Try it directly in your browser:
Format JSON in browser →The basic pretty-print
const data = { name: "Alice", age: 30, roles: ["admin", "editor"] };
// Compact (default)
JSON.stringify(data);
// '{"name":"Alice","age":30,"roles":["admin","editor"]}'
// Pretty-printed with 2-space indent
JSON.stringify(data, null, 2);
// '{
// "name": "Alice",
// "age": 30,
// "roles": [
// "admin",
// "editor"
// ]
// }'
The three arguments are: the value to serialize, the replacer (pass null to skip), and the space argument. The space argument can be a number (spaces per level) or a string (used as the indent character, e.g., "\t" for tabs).
Using a tab indent
JSON.stringify(data, null, "\t"); // Uses tab characters instead of spaces
Reformatting an existing JSON string
If you have a minified JSON string and want to pretty-print it, parse it first:
const minified = '{"name":"Alice","age":30}';
const pretty = JSON.stringify(JSON.parse(minified), null, 2);
console.log(pretty);
This is the same operation that the online JSON Formatter performs in the browser.
The replacer: filtering and transforming keys
The second argument to JSON.stringify() lets you control what gets included in the output.
Array replacer — whitelist specific keys
const user = { id: 1, name: "Alice", password: "secret", age: 30 };
JSON.stringify(user, ["id", "name", "age"], 2);
// Only includes "id", "name", and "age" — "password" is excluded
Function replacer — transform or omit values
JSON.stringify(user, (key, value) => {
if (key === "password") return undefined; // omit
if (typeof value === "number") return value * 2; // transform
return value;
}, 2);
Returning undefined from the replacer omits the property from the output.
Logging formatted JSON to the console
A common use case is debugging — logging a complex object in a readable way:
console.log(JSON.stringify(response.data, null, 2));
Note that console.log(obj) already provides interactive tree inspection in browser DevTools. The stringify approach is more useful when you want to copy the output, write it to a file, or compare it as a plain string.
Writing formatted JSON to a file in Node.js
import fs from 'fs';
const data = { name: "config", version: 1 };
fs.writeFileSync('config.json', JSON.stringify(data, null, 2));
Always use an indent of 2 or 4 for JSON files committed to version control — it makes diffs readable.
Handling special values
A few JavaScript values are not supported in JSON and are handled specially by stringify:
undefined— object properties are dropped; array elements becomenullNaNandInfinity— becomenull- Circular references — throw
TypeError
For more on these edge cases, see undefined Is Not Valid in JSON and JSON NaN and Infinity Are Not Valid.
Formatting without inflating your bundle
Because JSON.stringify with a space argument is built into every JavaScript runtime, you almost never need a library to pretty-print JSON — adding one just to format output is wasted bundle size. The native call handles indentation, key filtering (via the replacer array), and value transformation (via the replacer function) with zero dependencies. Reach for a third-party formatter only when you need something the spec genuinely doesn't cover, such as sorting keys deterministically, preserving a specific number precision, or producing colorized terminal output. For everything else, JSON.stringify(data, null, 2) is the right answer in the browser, in Node, and in edge/serverless runtimes alike.
Common gotchas when formatting in JavaScript
Two things trip people up. First, JSON.stringify only formats a JavaScript value, not a JSON string — if you already have a JSON string and want to reformat it, you must JSON.parse it first, then stringify with an indent, otherwise you'll get an escaped string wrapped in quotes. Second, the space argument accepts either a number (2 gives two spaces) or a string ('\t' gives tabs); passing a number greater than 10 is capped at 10 spaces by the spec. Also remember that stringifying loses anything JSON can't represent — functions, undefined, and symbols are dropped from objects, and Date objects become ISO strings via their toJSON method. When in doubt about the result, drop it into the JSON Validator to confirm it's still well-formed.
Quick online formatting
For one-off formatting without writing code, paste your JSON into the JSON Formatter. It pretty-prints the structure with syntax highlighting and collapses nested nodes for navigation.
Ready to format json in browser?
Open JSON Formatter →