How to Format JSON for Readability

Raw JSON is often compressed into a single unreadable line, or returned from an API with inconsistent indentation. Formatting (also called "pretty printing") adds consistent indentation and line breaks so the structure is immediately clear.

Here's how to format JSON for readability, why it matters, and when to use compact versus expanded formats.

What Does "Formatting" JSON Mean?

Formatting JSON means adding indentation and newlines to represent the document's hierarchy visually. Unformatted JSON often looks like this:

{"user":{"name":"Alice","age":30,"roles":["admin","editor"]}}

After formatting with 2-space indentation:

{
  "user": {
    "name": "Alice",
    "age": 30,
    "roles": [
      "admin",
      "editor"
    ]
  }
}

The data is identical. Formatting changes only whitespace, nothing else. Parsers don't care either way; formatted JSON is purely for human readers.

Why JSON Formatting Matters

Debugging API responses. When you're troubleshooting why an API call returned unexpected data, a wall of compressed JSON is nearly impossible to read. Formatting it instantly reveals the structure.

Code reviews. Config files and JSON stored in source control should be consistently formatted so differences in pull requests show meaningful changes, not just whitespace noise.

Documentation. JSON examples in docs should be formatted so readers can understand the structure at a glance without having to mentally parse it.

Learning a new API. When you're exploring an unfamiliar data structure, formatted JSON makes it much easier to understand what fields are available and how they're nested.

Choosing an Indentation Style

The two most common choices are 2 spaces and 4 spaces:

• 2 spaces is standard in JavaScript projects and is used by most formatters by default
• 4 spaces is common in Python projects and some style guides
• Tabs are occasionally used but less portable across editors

The choice doesn't affect parsing in any way; it's purely a style preference. Pick one and stick to it across your project.

Methods to Format JSON

Method 1: Online Formatter

For one-off formatting (especially when you've just copied JSON from an API response or a minified file), the JSON Formatter is the fastest option. Paste your JSON, choose your indentation level, and get the formatted output instantly.

Method 2: Browser Developer Tools

Browsers automatically format JSON when you navigate to a URL that returns it:

1. Open your API URL directly in a browser tab
2. Chrome, Firefox, and Safari display the JSON with syntax highlighting and collapsible nodes
3. Press Ctrl+U (or Cmd+U on Mac) to see the raw source

You can also use the Network tab in DevTools: click any API request, go to the Response tab, and the JSON is formatted automatically.

Method 3: VS Code

VS Code has JSON formatting built in:

• Format the whole file: Right-click → Format Document (Shift+Alt+F)
• Format a selection: Select JSON text → right-click → Format Selection

You can also configure Prettier to automatically format JSON files on save across your entire project.

Method 4: Command Line with jq

jq is a versatile JSON processor. To pretty-print a JSON file:

jq . input.json

This outputs the formatted JSON to the console. To save the output to a new file:

jq . input.json > output.json

Method 5: JavaScript

If you're working in a JavaScript or Node.js environment:

const formatted = JSON.stringify(JSON.parse(jsonString), null, 2);

JSON.stringify accepts three arguments: the value to serialize, a replacer (use null to include all fields), and the number of spaces for indentation.

Step-by-Step: Formatting with the Online Tool

1. Get your JSON. Copy it from an API response, a config file, or wherever it lives.

2. Paste into the formatter. Open the JSON Formatter tool and paste your content into the input area.

3. Choose your indentation. Select 2 spaces, 4 spaces, or tabs depending on your preference or project style.

4. Copy the output. The formatted JSON appears instantly. Copy it and paste it back into your file or documentation.

The formatter also validates your JSON as it formats: if there's a syntax error, it will report it before attempting to format.

When to Minify Instead

Formatted JSON is for humans. In production systems, you often want the opposite: minified JSON with all whitespace removed. This matters for:

• API payloads: smaller responses mean faster load times for users
• Storage: JSON stored in a database is more compact without whitespace
• Bundled config files: configuration shipped with a web app should be as small as possible

A JSON minifier takes formatted JSON and compresses it back into a single line. The resulting file is harder for humans to read but faster to transmit and parse.

As a general rule: format for development, minify for production.

Formatting vs. Validating

Formatting and validating are related but different:

• Validation checks whether your JSON is syntactically correct
• Formatting changes the visual presentation of valid JSON

A formatter can only work on valid JSON. If your document has a syntax error, the formatter will report it rather than attempt to format. Always validate first if you're unsure whether your JSON is correct, then format once it passes.

After Formatting

Once your JSON is formatted and readable, common next steps include:

• Validate it against a schema to check that the right fields are present with the right types
• Minify it when you're ready to deploy to production
• Convert it to another format like CSV for analysis in a spreadsheet