JSON is the data format the modern web runs on — API responses, config files, log entries, database documents. Read it minified and your eyes glaze over; read it formatted and the structure is obvious. A JSON formatter pretty-prints, minifies, and validates so you can work with the data instead of fighting the syntax.

This guide covers what a formatter does, common JSON pitfalls, and the small details that catch developers out.

What a JSON Formatter Does

  • Pretty-print — Indent and line-break for readability
  • Minify — Remove whitespace for transport efficiency
  • Validate — Catch syntax errors and report location
  • Tree view — Collapsible structure for large documents
  • Sort keys — Alphabetical ordering for diffing

Common Use Cases

  • Inspecting API responses during development
  • Validating config files before deployment
  • Comparing two JSON documents (diff after sorting)
  • Cleaning up JSON copied from logs
  • Reducing payload size before sending over the wire
  • Reading webhook payloads from third-party services

JSON Syntax Rules

  • Keys must be double-quoted strings
  • Values: string, number, boolean, null, array, object
  • No trailing commas
  • No comments (use JSON5 or JSONC if you need them)
  • No single quotes around strings
  • Strings use double quotes; escape internal quotes
  • UTF-8 encoding

Common Errors

  • Trailing comma — {"a": 1,} is invalid
  • Single quotes — {'a': 1} is invalid; use double
  • Unquoted keys — {a: 1} is JavaScript, not JSON
  • Missing comma — Between array or object items
  • Unescaped backslash or quote in string
  • NaN or Infinity — Not valid JSON; use null or string
  • Comments — // or /* */ break parsers

Formatting Conventions

  • Two-space indent is common; four-space also acceptable
  • Tabs work but are less portable
  • Consistent quote style (always double in JSON)
  • Sort keys alphabetically for diffing
  • One value per line for arrays of objects

When to Minify

  • API responses sent to clients
  • Configuration embedded in built artifacts
  • Data passed in URL parameters
  • Storage where every byte costs

Minification typically reduces size 20–40% depending on indentation.

When to Pretty-Print

  • Local config files committed to git
  • Documentation examples
  • Anything a human will read
  • Debugging API responses

JSON Variants

  • JSONC — JSON with comments; VS Code uses for config
  • JSON5 — Trailing commas, comments, unquoted keys
  • NDJSON — Newline-delimited; one JSON object per line; streaming
  • JSON-LD — Linked data for SEO and structured content

Common Pitfalls

  • Numbers losing precision. JavaScript numbers can't represent integers above 2^53; use strings for IDs
  • Date format inconsistency. Use ISO 8601 strings
  • Null vs missing. Distinguish between key absent and key set to null
  • Key ordering. JSON spec doesn't guarantee order; don't rely on it
  • Deeply nested without indentation. Unreadable; format it
  • BOM at start. Byte order mark breaks some parsers

Security Notes

  • Never use eval() to parse JSON; use JSON.parse() or equivalent
  • Validate structure with schema (JSON Schema, Zod, etc.) before trusting
  • Large JSON can DoS parsers; set size limits
  • JSON injection in URLs requires proper encoding

Quick Tips

  • Format before reading; minify before sending
  • Sort keys when comparing two documents
  • Use strings for IDs that might exceed 2^53
  • Validate against a schema for any external input
  • Stick to standard JSON unless you control both ends

Use the JSON Formatter on Popupnote

The JSON Formatter on Popupnote provides a clean tool for pretty-printing, minifying, and validating JSON — for developers debugging APIs, inspecting webhooks, or cleaning up data. The tool runs in your browser without any account required.