How to Format JSON Online — A Complete Guide

JSON (JavaScript Object Notation) is the most widely used data format in modern development — APIs return it, config files use it, databases store it. But raw JSON is often minified into a single unreadable line. This guide covers everything you need to know about formatting JSON quickly and correctly.

What Does Formatting JSON Mean?

Formatting JSON — also called beautifying or pretty-printing — adds indentation and line breaks to make the structure visually clear. It does not change the data in any way. The following two JSON strings are identical:

// Minified (hard to read)
{"user":{"name":"Alice","age":28,"roles":["admin","editor"]}}

// Formatted (easy to read)
{
  "user": {
    "name": "Alice",
    "age": 28,
    "roles": ["admin", "editor"]
  }
}

The formatted version is essential for debugging API responses, reviewing config files, and understanding unfamiliar data structures.

How to Format JSON Online

The fastest way to format JSON is to paste it into an online formatter. DevToolHeaven's JSON Formatter runs entirely in your browser — no data is sent to any server.

1. Paste your raw or minified JSON into the input panel
2. Choose your indentation (2 spaces, 4 spaces, or tab)
3. Click Format — or it formats automatically as you type
4. Copy the formatted output or use Sort Keys to alphabetize properties

Common JSON Errors and How to Fix Them

If your JSON is invalid, the formatter shows the exact line and column of the error. Here are the most common mistakes:

1. Trailing commas

// Invalid
{"name": "Alice", "age": 28,}
//                          ^ trailing comma

JSON does not allow a comma after the last item. Remove it.

2. Single quotes instead of double quotes

// Invalid
{'name': 'Alice'}

// Valid
{"name": "Alice"}

3. Unquoted keys

// Invalid (JavaScript object syntax, not JSON)
{name: "Alice"}

// Valid
{"name": "Alice"}

4. Comments

Standard JSON does not support comments. If your file uses // comment or /* comment */ syntax (common in tsconfig.json and similar files), it is JSONC format — use the Permissive mode in the validator to strip comments before formatting.

Choosing the Right Indentation

The indentation style does not affect the data — it is purely a formatting preference:

• 2 spaces — the JavaScript/TypeScript/web standard. Used by Prettier by default.
• 4 spaces — common in Python, Java, and C# projects.
• Tab — respects each reader's preferred tab width in their editor.

Formatting JSON in Code

When you need to format JSON programmatically:

JavaScript / Node.js

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

Python

import json
formatted = json.dumps(data, indent=2)

Command line (jq)

cat data.json | jq .
# or
echo '{"name":"Alice"}' | jq .

When to Format vs Minify

Format JSON when you are reading, editing or debugging it. Minify JSON when you are sending it over a network or storing it in production — smaller payloads mean faster API responses and lower bandwidth costs.

A useful workflow: keep your source JSON formatted in your repository, then minify it automatically during your production build.