Video: Learn JSON in 10 Minutes — Web Dev Simplified. Embedded from YouTube in privacy-enhanced mode; all rights belong to the creator.
If you have ever opened an API response, a package.json file or an exported settings file, you've met JSON. JavaScript Object Notation was popularised by Douglas Crockford in the early 2000s as a lighter alternative to XML, and it has since become the lingua franca of web data. It is human-readable, maps naturally onto the data structures of almost every programming language, and is simple enough that its full grammar fits on a single page.
The six building blocks
Every JSON document is built from just six kinds of value:
| Type | Example | Notes |
|---|---|---|
| Object | {"name": "Ada"} | Unordered key/value pairs; keys must be double-quoted strings |
| Array | [1, 2, 3] | Ordered list of any values |
| String | "hello" | Double quotes only; escape with backslash |
| Number | 42, -3.14, 1e6 | No leading zeros, no NaN or Infinity |
| Boolean | true / false | Lowercase |
| Null | null | Represents “no value” |
Objects and arrays can nest to any depth, which is how JSON represents complex records such as an order with a customer, a list of line items and a shipping address.
The five mistakes that break JSON
- Trailing commas —
[1, 2, 3,]is valid JavaScript but invalid JSON. - Single quotes —
{'a': 1}must be{"a": 1}. - Unquoted keys —
{a: 1}is a JavaScript object literal, not JSON. - Comments — JSON has no comment syntax. Tools that allow them (like VS Code settings) use a variant called JSONC.
- Big numbers — integers beyond 253 lose precision in JavaScript. APIs often send IDs as strings for this reason.
Our JSON formatter reports each of these with the exact line and column.
JSON vs XML vs YAML
XML is more verbose but supports attributes, namespaces and schemas, so it persists in enterprise systems, office documents and RSS. YAML is a superset of JSON designed for humans to write: no braces, indentation-based, with comments — which is why Kubernetes and CI pipelines use it. JSON sits in the middle: strict enough for machines, readable enough for people, and supported natively by every browser. A good rule: exchange data in JSON, write configuration in YAML, and only choose XML when a standard demands it.
Working with JSON day to day
A few habits make JSON much easier to live with:
- Pretty-print before reading. Minified responses hide structure; formatting reveals it instantly.
- Sort keys before diffing. Two objects with identical data but different key order look completely different in a text diff.
- Use JSON Lines for logs. One JSON object per line (
.jsonl) streams and greps far better than one giant array. - Validate at the boundary. Parse and validate incoming JSON against a schema (JSON Schema, Zod, Pydantic) before it reaches business logic.
- Convert for non-developers. Stakeholders live in spreadsheets — convert arrays of objects to CSV with our JSON to CSV converter.
Security notes
Never use eval() to parse JSON — use JSON.parse, which can't execute code. Be careful about pasting API responses into online tools that upload them: responses often contain access tokens, emails and personal data. Everything on Tech.Tools runs locally in your browser for exactly this reason.
Try the tools
JSON Formatter & Validator
Beautify, minify, sort and validate JSON with exact error positions.
YAML ⇄ JSON Converter
Convert Kubernetes/CI YAML to JSON and back.
JSON ⇄ CSV Converter
Turn JSON arrays into spreadsheets and CSV into JSON.