json
{"name":"DevToolsHub","tools":[{"name":"JSON Formatter","url":"/json-formatter"},{"name":"Base64","url":"/base64"}],"active":true}
And turns it into this:
json

{
  "name": "DevToolsHub",
  "tools": [
    {
      "name": "JSON Formatter",
      "url": "/json-formatter"
    },
    {
      "name": "Base64",
      "url": "/base64"
    }
  ],
  "active": true
}
Why Formatting Matters
Find errors faster — malformed JSON is immediately obvious when you can see the structure
Compare responses — formatted JSON makes side-by-side comparison of API outputs easy
Share readable snippets — formatted JSON is easier to paste into documentation, issues, or PRs
Debug configurations — many cloud and DevOps tools (Terraform, Kubernetes, AWS) output JSON
Common JSON Mistakes to Watch For
1. Trailing Commas
JavaScript allows trailing commas in objects and arrays. JSON does not. This is one of the most common sources of parse errors:
json

// Invalid JSON (trailing comma)
{
  "name": "DevToolsHub",  ✗ remove this comma
}
2. Unquoted Keys
In JavaScript, object keys can be unquoted identifiers. JSON requires all keys to be wrapped in double quotes:
json

// Invalid JSON (unquoted key)
{ name: "DevToolsHub" }

// Valid JSON
{ "name": "DevToolsHub" }
3. Single Quotes Instead of Double Quotes
JSON only allows double quotes ("). Single quotes (') are not valid, even though many programming languages accept them for string literals.
4. Undefined or NaN Values
JSON supports null, true, and false, but not undefined or NaN. These values cause JSON.stringify() to silently drop keys or convert them to null.
javascript

JSON.stringify({ a: undefined, b: NaN, c: Infinity });
// → "{"b":null,"c":null}"   ← 'a' disappeared entirely!
JSON Formatting Best Practices
Use 2-Space Indentation
The standard for JSON formatting is 2-space indentation. It provides enough visual structure without wasting horizontal space. Some tools default to 4 spaces — configure them to use 2 for consistency with most API documentation.
Validate Before You Use
Always validate JSON before feeding it to your application. A good JSON formatter with validation catches errors immediately and shows you exactly where the problem is. This saves hours of debugging.
Compress for Production
When sending JSON over the wire, use the compression mode to strip all whitespace. JSON.stringify(value) (without spacing arguments) produces compressed output. A typical API response shrinks by 30-50% when compressed — saving bandwidth and improving load times.
Watch Out for Deeply Nested Structures
JSON parsers typically have a nesting depth limit (often around 100-200 levels). If you are working with highly nested data — like OpenAPI specs or complex configuration files — be aware that extremely deep structures can cause parse errors in some environments.
Real-World Debugging Scenario
Imagine you are debugging a payment API that returns this error response:
plaintext

HTTP 400
{"status":"error","code":"INVALID_PAYLOAD","message":"Validation failed","details":[{"field":"amount","error":"must be a positive number"},{"field":"currency","error":"must be one of: USD, EUR, GBP"}]}
Instead of squinting at that mess, paste it into a formatter:
json

{
  "status": "error",
  "code": "INVALID_PAYLOAD",
  "message": "Validation failed",
  "details": [
    {
      "field": "amount",
      "error": "must be a positive number"
    },
    {
      "field": "currency",
      "error": "must be one of: USD, EUR, GBP"
    }
  ]
}
Immediately you can see: two fields failed validation (amount and currency). The fix is obvious. This is the kind of insight that formatted JSON gives you in seconds versus minutes.
Putting It All Together
Whether you are a seasoned backend engineer or a frontend developer learning the ropes, mastering JSON formatting is a foundational skill. The next time you copy a curl response, paste it into a JSON formatter before trying to read it. Your eyes — and your debugging efficiency — will thank you.
If you found this guide useful, check out DevToolsHub for more free online developer tools. All tools run locally in your browser — your data never leaves your device.