What is JSON?
JSON (JavaScript Object Notation) is the universal standard for data exchange on the web. Invented by Douglas Crockford in the early 2000s, it has become the backbone of modern web development.
You'll encounter JSON in:
- REST APIs: Nearly every web API returns JSON responses
- Configuration files: package.json, tsconfig.json, .eslintrc
- Databases: MongoDB, CouchDB, and NoSQL databases store JSON documents
- Local storage: Web apps store data as JSON strings
Properly formatted JSON is easier to read, debug, and maintain. This tool helps you beautify compressed JSON from APIs, validate JSON syntax before using it, and minify JSON for smaller file sizes in production.
Understanding JSON Syntax Rules
JSON is strict about syntax. Here are the rules that trip up most developers:
- Keys must be double-quoted:
{"name": "John"}is valid,{name: "John"}is not - Strings must use double quotes:
"hello"works,'hello'fails - No trailing commas:
{"a": 1, "b": 2,}is invalid - No comments allowed: Unlike JavaScript, JSON doesn't support // or /* */
- Numbers can't have leading zeros:
007is invalid, use7
When this tool reports "Invalid JSON," check these common issues first. The error message will point you to the exact line and character where parsing failed.
When to Use 2-Space vs 4-Space Indent
Indentation is about readability and file size. Here's when to use each:
2 spaces (recommended for web development):
- Smaller file sizes - saves bandwidth on API responses
- Standard in JavaScript/TypeScript projects (matches popular style guides)
- Better for deeply nested structures - less horizontal scrolling
- Used by npm, Prettier, and most modern tools
4 spaces (recommended for configuration files):
- More readable for simple, shallow structures
- Common in Python and Java ecosystems
- Better for non-developers reviewing configs
- Matches traditional code formatting standards
Tab character: Some teams prefer tabs for accessibility - users can set their preferred tab width in their editor.
Formatting vs Minifying: When to Use Each
Format/Beautify when you need to:
- Debug API responses or find specific values
- Edit configuration files manually
- Review data in pull requests or code reviews
- Document examples in README files
Minify when you need to:
- Reduce payload size for API responses
- Store JSON in databases or localStorage efficiently
- Embed JSON in HTML or JavaScript files
- Optimize for production deployment
A typical JSON payload can be reduced by 20-40% through minification by removing whitespace and newlines.