SnapToolbox
JSON Formatting Guide: How to Read, Write and Debug JSON
JSON整形ツールの使い方 — JSON (JavaScript Object Notation) is the universal language of data exchange on the web. Whether you're working with APIs, configuration files, or data exports, you'll encounter JSON constantly. This guide covers the fundamentals of JSON and how to work with it efficiently.
What Is JSON?
JSON is a lightweight, human-readable data format. It represents data as key-value pairs and ordered lists. Here's a simple example:
"name": "SnapToolbox",
"version": 2.0,
"free": true,
"tools": ["image-compressor", "json-formatter", "color-converter"]
}
JSON supports six data types: strings, numbers, booleans (true/false), null, objects (key-value pairs in curly braces), and arrays (ordered lists in square brackets).
Why Format JSON?
JSON from APIs and data sources is often "minified" — compressed into a single line to reduce file size. While efficient for machines, minified JSON is nearly impossible for humans to read:
Formatting (also called "pretty-printing") adds indentation and line breaks to reveal the structure:
"user": {
"id": 1,
"name": "Alice",
"roles": ["admin", "editor"],
"active": true
}
}
Common JSON Syntax Errors
JSON syntax is strict. A single mistake breaks the entire document. Here are the most frequent errors:
1. Trailing Commas
{ "name": "Alice", "age": 30, } ← Extra comma before closing brace is invalid
JSON does not allow trailing commas after the last item in an object or array.
2. Single Quotes Instead of Double Quotes
{ 'name': 'Alice' } ← Single quotes are not valid JSON
Both keys and string values must use double quotes in JSON.
3. Unquoted Keys
{ name: "Alice" } ← Keys must be quoted strings
4. Comments
JSON does not support comments. If you see // or /* */ in a JSON file, it's technically not valid JSON (some parsers accept it as an extension).
Using JSON in Practice
Working with APIs
Most REST APIs return JSON responses. When debugging an API integration, paste the raw response into a JSON formatter to see the data structure clearly before writing code to parse it.
Configuration Files
Many tools use JSON for configuration: package.json (Node.js), tsconfig.json (TypeScript), settings.json (VS Code), and many more. Formatting these files keeps them maintainable as they grow.
Data Import/Export
Databases, spreadsheet tools, and analytics platforms often export data as JSON. Format the output to understand the schema before importing it elsewhere.
Tip: When sharing JSON in documentation or bug reports, always format it first. Minified JSON is almost impossible to review and makes collaboration harder.
JSON vs. Related Formats
- JSON5: A superset of JSON that allows comments, trailing commas, and unquoted keys. Common in configuration files but not widely supported in APIs.
- YAML: More human-readable than JSON, widely used in DevOps (Docker Compose, Kubernetes). Indentation-sensitive — one wrong tab breaks everything.
- XML: The predecessor to JSON. More verbose, harder to read, but still used in some enterprise systems and document formats.
- CSV: Ideal for tabular data (spreadsheets). Not suitable for nested data structures.
Format and Validate JSON Instantly — Free
Paste any JSON into SnapToolbox's JSON Formatter to pretty-print, validate, and identify errors in seconds. Works entirely in your browser.
Open JSON FormatterSummary
JSON is a simple but powerful data format you'll work with constantly in modern development. Understanding the six data types, strict syntax rules (double quotes, no trailing commas, no comments), and using a formatter to read complex structures will save you hours of debugging time. Always validate JSON before parsing it programmatically to avoid runtime errors.