How to Format JSON Online
A practical guide to formatting JSON for readability, using indentation conventions that make nested data easy to scan and debug.
JSON (JavaScript Object Notation) has become the default data format for APIs, configuration files, and inter-service communication. It's compact, human-readable in principle, and supported natively by nearly every programming language. But that readability breaks down fast once JSON is minified, logged as a single line, or nested several levels deep. Formatting, sometimes called "pretty-printing", restores that readability by adding consistent indentation and line breaks without changing the underlying data.
Why JSON Formatting Matters
When JSON arrives as a single unbroken line, which is common, since most APIs strip whitespace to save bandwidth, it becomes nearly impossible to scan visually. A response with a dozen nested objects and arrays turns into a wall of braces and brackets. Formatting doesn't change the data at all; it only changes how it's displayed, by inserting line breaks after commas and colons and indenting nested structures consistently.
This matters in a few concrete situations:
- Debugging API responses. When an endpoint returns unexpected data, formatted JSON makes it much faster to spot a missing field, an unexpected null, or a type mismatch.
- Reviewing configuration files. Many tools use JSON for config (package.json, tsconfig.json, and countless others). Consistent formatting makes diffs in version control meaningful instead of noisy.
- Teaching and documentation. Formatted JSON examples are far easier for readers to follow than minified equivalents.
- Code review. Reviewers can actually see what changed in a JSON file when it's consistently indented, rather than scrolling through a single dense line.
What "Formatting" Actually Does
Under the hood, JSON formatting is a two-step process: parse the text into a data structure, then serialize that structure back into text using a chosen indentation style. This is exactly what JSON.stringify(value, null, indentSize) does in JavaScript, the null second argument means "don't filter any keys," and the third argument controls how many spaces (or a string like a tab character) to use per indentation level.
Because formatting requires parsing first, a formatter will always tell you if your JSON is invalid before it can format it. This is a useful side effect: if a formatter tool shows an error instead of nicely indented output, you've just learned your JSON has a syntax problem, which you can now go fix.
Choosing an Indentation Size
Two spaces and four spaces are both common. Two spaces keeps deeply nested structures from marching too far to the right, which is helpful for JSON that mirrors deeply nested API resources. Four spaces can be easier to scan visually, especially for people coming from languages where four-space indentation is the norm (like Python). Neither is "more correct", pick one and stay consistent within a project, since inconsistent indentation makes diffs noisy for no benefit.
Tabs are also valid in JSON formatting tools, though they're less common for JSON specifically since JSON files are frequently viewed in browsers, terminals, and diff tools that may render tab width differently.
A Practical Workflow
- Paste the raw JSON into a formatter. If it comes from a network request, browser developer tools will often let you copy a response body directly.
- Check for a validation error. If the formatter can't produce output, it's telling you the JSON is malformed, look at the reported line and column.
- Choose your indentation. Two spaces is a reasonable default unless your project has an established convention.
- Copy or download the result. For quick debugging, copying is usually enough. For saving a fixture file or example payload, downloading is more convenient.
Our JSON Formatter follows exactly this flow: paste JSON, get pretty-printed output with a chosen indent size, and copy or download the result. It runs entirely in your browser, so nothing you paste is ever sent to a server, which matters if the JSON you're debugging contains real user data, API keys, or other information you'd rather not upload anywhere.
Formatting vs. Validating vs. Minifying
These three operations are related but distinct, and it's worth being precise about the difference:
- Formatting takes valid JSON and re-serializes it with indentation for readability. It changes whitespace only.
- Validating checks whether text conforms to the JSON specification, without producing any output, it just tells you yes or no, and where the problem is if the answer is no. See our guide on how to validate JSON for more detail.
- Minifying does the opposite of formatting: it strips all unnecessary whitespace to produce the smallest possible representation, which is what you'd want before sending JSON over a network. Our article comparing JSON formatter vs. JSON minifier covers when to use each.
Common Formatting Pitfalls
Even with a good formatter, a few issues come up repeatedly:
Trailing commas. JSON does not allow a trailing comma after the last item in an object or array, unlike JavaScript object literals, which do allow it. If you hand-write JSON by adapting JavaScript code, this is one of the most common mistakes.
Single quotes. JSON requires double quotes for strings and keys. Single quotes, which are valid in JavaScript, are not valid JSON.
Unquoted keys. Again, this is valid JavaScript but invalid JSON, every key must be a double-quoted string.
Comments. JSON has no comment syntax at all. If you need annotated configuration, you'll need a superset format like JSON5 or JSONC, or a different format like YAML or TOML.
If you run into any of these, our article on common JSON errors and how to fix them walks through each one with concrete examples and fixes.
Formatting Large JSON Files
Very large JSON payloads, think multi-megabyte API dumps or exported datasets, can be slow to format in a browser tab, since the entire string has to be parsed into memory before it can be re-serialized. For files in the tens of megabytes, a command-line tool (like jq on the command line) may be more practical than a browser-based formatter. For the vast majority of everyday JSON, API responses, configuration files, small to medium datasets, a browser tool is fast enough that the formatting happens as you type or paste.
Summary
Formatting JSON is a small operation with an outsized impact on how quickly you can read and debug data. It costs nothing in terms of the underlying data, the formatted and minified versions of a JSON document are functionally identical, but the readability difference for a human is enormous. Whether you're debugging an API, reviewing a config file, or writing documentation, a quick pass through a formatter is one of the fastest ways to make JSON easier to work with.