JSON Formatter — Why Formatting JSON Matters and How It Works

JSON formatters add whitespace and indentation to minified JSON to make it human-readable. They also validate the JSON as they format — if the JSON is invalid, the formatter reports where the error is. For anyone working with APIs, this is one of the most-used tools in the browser.

Use the JSON Formatter to format, validate, and explore JSON interactively.

What a JSON formatter does

Minified JSON (what APIs typically send):

{"user":{"id":42,"name":"Alice","email":"alice@example.com","roles":["admin","editor"],"metadata":{"createdAt":"2026-01-15T10:30:00Z","lastLogin":"2026-05-11T08:12:34Z"}}}

Formatted JSON (what a formatter produces):

{
  "user": {
    "id": 42,
    "name": "Alice",
    "email": "alice@example.com",
    "roles": [
      "admin",
      "editor"
    ],
    "metadata": {
      "createdAt": "2026-01-15T10:30:00Z",
      "lastLogin": "2026-05-11T08:12:34Z"
    }
  }
}

The formatted version is 283 characters vs 186 characters — 52% larger. For API payloads, minification saves bytes in transit. For humans reading the data, formatting saves time.

What JSON formatters also do: validation

A JSON formatter parses the input before formatting it. If the input is invalid JSON, the parser reports the error and refuses to format. This makes the formatter a JSON validator at the same time.

Common validation errors that formatters catch:

• Missing quotes around keys: {name: "Alice"} — keys must be quoted strings
• Trailing commas: {"a": 1, "b": 2,} — no trailing commas allowed in JSON
• Single quotes: {'name': 'Alice'} — JSON requires double quotes
• Undefined values: {"value": undefined} — not valid JSON
• Comments: {"name": "Alice" // comment} — JSON has no comment syntax
• Unescaped control characters: newlines or tabs in string values must be escaped as \n, \t

How JSON parsing works

A JSON formatter is built around a JSON parser. The parser implements the JSON grammar (RFC 8259):

value = object | array | string | number | true | false | null

object = '{' (string ':' value (',' string ':' value)*)? '}'
array  = '[' (value (',' value)*)? ']'
string = '"' (char)* '"'
number = integer ('.' fractional)? (exponent)?

The parser processes the input character by character, building an in-memory tree representation (object, array, string, number, boolean, or null values). Once the tree is built, the formatter traverses it to produce the indented output.

If the parser hits an unexpected character, it throws a parse error with the position (line number + column) where the error occurred.

Indentation options

Most formatters offer indentation control:

• 2 spaces (JavaScript/JSON convention, used by JSON.stringify(data, null, 2))
• 4 spaces (Python convention, used by json.dumps(data, indent=4))
• Tabs (preferred for accessibility — tab width is user-configurable)

The JSON Formatter defaults to 2-space indentation. Tab indentation is available for projects that use tabs.

JSON formatting in code

JavaScript

// Parse and pretty-print:
const minified = '{"name":"Alice","age":30}';
const obj = JSON.parse(minified);
const formatted = JSON.stringify(obj, null, 2);
console.log(formatted);
/*
{
  "name": "Alice",
  "age": 30
}
*/

// Key sorting (useful for diffs):
const sorted = JSON.stringify(obj, Object.keys(obj).sort(), 2);

// Minify:
const minified2 = JSON.stringify(obj);

Python

import json

minified = '{"name": "Alice", "age": 30}'
obj = json.loads(minified)

# Pretty-print:
formatted = json.dumps(obj, indent=2)
print(formatted)
# {
#   "name": "Alice",
#   "age": 30
# }

# Sorted keys (useful for version control):
formatted_sorted = json.dumps(obj, indent=2, sort_keys=True)

# Compact (minify):
compact = json.dumps(obj, separators=(',', ':'))

CLI (jq)

jq is a command-line JSON processor — more powerful than a simple formatter:

# Pretty-print:
echo '{"name":"Alice"}' | jq .

# Extract a field:
echo '{"name":"Alice","age":30}' | jq '.name'
# "Alice"

# Filter array:
echo '[{"name":"Alice","admin":true},{"name":"Bob","admin":false}]' | jq '[.[] | select(.admin)]'
# [{"name":"Alice","admin":true}]

# Format a file:
cat response.json | jq .

JSON formatting use cases

API debugging

When testing REST APIs (in Postman, curl, or browser DevTools), response bodies are often minified. Paste the response into a formatter to navigate the structure.

# curl with formatted output:
curl -s https://api.example.com/users/1 | jq .

Git diffs on JSON files

Minified JSON committed to a repository produces unreadable diffs — a single changed key shows as one massive line change. Formatted JSON in version control makes diffs meaningful.

.gitattributes to auto-format on diff:

*.json diff=json

.git/config to add json diff driver:

[diff "json"]
    textconv = python3 -c "import json,sys; print(json.dumps(json.load(sys.stdin), indent=2))"

Configuration file editing

package.json, tsconfig.json, .eslintrc.json, launch.json — these are human-edited files that should always be formatted. Most editors format on save automatically. For one-off edits, paste into the formatter.

JSON schema validation

A formatter tool can go beyond syntax checking and validate JSON against a JSON Schema definition — checking that required fields exist, types are correct, and values are within allowed ranges. The JSON Formatter validates JSON syntax; for schema validation, a separate JSON Schema validator is needed.

JSON vs JSON5 vs JSONC

JSON (RFC 8259): strict, no comments, no trailing commas, double quotes only. Machine-generated and machine-consumed.

JSON5: a superset that allows comments, trailing commas, single quotes, unquoted keys. Used in some configuration files (package.json5). Not a web standard.

JSONC (JSON with Comments): used in VS Code’s settings.json, tsconfig.json. Supports // and /* */ comments. Parsed by VS Code’s custom parser.

Standard JSON parsers reject JSON5 and JSONC. If you’re debugging JSONC (like tsconfig.json), strip comments before parsing.

Pretty-printing JSON in browsers

Browser DevTools: Chrome, Firefox, and Edge’s Network tab automatically pretty-print JSON responses when you inspect a request’s “Response” body. The “Preview” tab shows the parsed tree with collapsible nodes.

Browser extension: JSON Formatter extensions (Chrome Web Store) apply formatting to any raw JSON file opened directly in the browser (e.g., navigating to https://api.example.com/data.json).

The JSON Formatter tool

The JSON Formatter processes your JSON in the browser — your data never leaves your device. It highlights errors with the line and column number, supports both format and validate modes, and offers copy and download options for the formatted output.

Related tools

• JSON Formatter — format and validate JSON
• JSON Diff — compare two JSON objects
• YAML to JSON — convert YAML configuration to JSON