How to Format JSON: A Complete Guide with Examples

Why Format JSON?

When you receive JSON from an API or read a configuration file, the data is often minified — all on one line with no spaces. This is efficient for传输 but terrible for readability. JSON formatting (also called "beautifying" or "pretty-printing") adds proper indentation and line breaks to make the structure clear.

Manual Formatting vs Tools

Manual Formatting

You could format JSON by hand, adding spaces and newlines, but this is:

• Error-prone — one misplaced comma breaks everything


• Time-consuming — especially for large files


• Unnecessary — free tools do it instantly

Using Online Tools

Our JSON Formatter tool handles everything in your browser:

• Paste your raw JSON


• Click "Format" for readable output


• Click "Minify" for compressed output


• Validation errors are highlighted instantly

Understanding Indentation

The standard indentation is 2 spaces, but some teams prefer 4 spaces or tabs:

// 2 spaces (most common)
{
  "name": "John",
  "address": {
    "city": "NYC"
  }
}
// 4 spaces
{
    "name": "John",
    "address": {
        "city": "NYC"
    }
}

Common JSON Formatting Issues

1. Trailing Commas

// ❌ Invalid — trailing comma
{
  "name": "John",
  "age": 30,
}
// ✅ Valid
{
  "name": "John",
  "age": 30
}

2. Single Quotes

// ❌ Invalid — JSON requires double quotes
{
  'name': 'John'
}
// ✅ Valid
{
  "name": "John"
}

3. Comments

// ❌ Invalid — JSON doesn't support comments
{
  "name": "John", // user name
  "age": 30
}
// ✅ Valid (use a description field instead)
{
  "name": "John",
  "name_description": "user name",
  "age": 30
}

4. Unquoted Keys

// ❌ Invalid — keys must be in double quotes
{
  name: "John"
}
// ✅ Valid
{
  "name": "John"
}

Minification: When and Why

Minified JSON removes all unnecessary whitespace, reducing file size. This is important for:

• API responses — smaller payload = faster transfer


• Production config files — save bandwidth


• Embedded systems — limited storage

// Formatted (89 bytes)
{
  "name": "John",
  "age": 30,
  "city": "NYC"
}
// Minified (37 bytes)
{"name":"John","age":30,"city":"NYC"}

Best Practices

• Always validate before using JSON in production
• Use consistent indentation — pick 2 or 4 spaces and stick with it
• Sort keys alphabetically for configuration files (easier to find)
• Minify for production, format for development
• Use a linter like eslint-plugin-json to catch errors early

Conclusion

Proper JSON formatting improves readability, reduces errors, and makes debugging easier. Use our free JSON Formatter to instantly format, validate, and minify your JSON data — all in your browser, no signup required.