How to Format JSON Online: Step-by-Step Tutorial

Unformatted JSON is one of the most common frustrations in web development. Whether you're debugging an API response, editing a configuration file, or reviewing a webhook payload, a JSON formatter saves time and prevents errors.

Why Format JSON?

Minified JSON looks like this:

{"user":{"id":42,"name":"Alice","roles":["admin","editor"],"active":true}}

After formatting, it's readable and debuggable:

{
  "user": {
    "id": 42,
    "name": "Alice",
    "roles": ["admin", "editor"],
    "active": true
  }
}

Step-by-Step: How to Format JSON Online

1. Open the tool — Visit the JSON Formatter. No account or download needed.
2. Paste your JSON — Copy JSON from an API response, log file, or config and paste it into the Input field.
3. Click Format (Pretty) — Instantly see your JSON with proper indentation (2 spaces by default).
4. Validate if needed — Click Validate to check syntax. The tool highlights exactly where any errors are.
5. Copy or minify — Copy the formatted output or click Minify to compress it for production use.

Real-World Use Cases

1. Debugging REST API Responses

When testing an API with curl or Postman, the response is often minified. Paste it into the formatter to inspect nested objects:

# Raw API response (hard to read)
{"status":"ok","data":{"items":[{"id":1,"title":"Item A"},{"id":2,"title":"Item B"}],"total":2,"page":1}}

# After formatting — easy to inspect structure
{
  "status": "ok",
  "data": {
    "items": [
      {"id": 1, "title": "Item A"},
      {"id": 2, "title": "Item B"}
    ],
    "total": 2,
    "page": 1
  }
}

2. Validating package.json or tsconfig.json

A single misplaced comma can break your Node.js project. Run your config files through the validator before committing:

# Common JSON error — trailing comma
{
  "scripts": {
    "build": "tsc",
    "test": "jest",  <-- trailing comma causes parse error
  }
}

3. Minifying JSON for Production APIs

Remove whitespace before embedding JSON in API responses or storing it in databases to reduce payload size:

# Before minify: 120 bytes
{
  "config": {
    "timeout": 30,
    "retries": 3
  }
}

# After minify: 38 bytes
{"config":{"timeout":30,"retries":3}}

Common Mistakes to Avoid

• Trailing commas — JSON doesn't allow trailing commas (unlike JavaScript). {"a": 1,} is invalid.
• Single quotes — JSON requires double quotes for strings. {'key': 'value'} is invalid.
• Unquoted keys — Unlike JavaScript objects, JSON keys must always be in double quotes.
• Comments — JSON has no comment syntax. Remove // ... or /* ... */ before parsing.

Related Tools

• JSON to CSV Converter — Convert JSON arrays to spreadsheet format
• Base64 Encoder — Encode JSON strings for API headers
• JWT Decoder — Inspect Base64-encoded JSON in JWT tokens