JSON Formatter: A Beginner's Tutorial (With Real Examples)
JSON is everywhere, but minified JSON is unreadable. Learn to format, validate and understand JSON in under ten minutes.
Daniel Osei
Software Engineer & Developer Tools
JSON — JavaScript Object Notation — is how most of the web talks to itself. APIs return it, config files are written in it, and apps read it. The catch: machines love minified JSON, but humans find it unreadable.
What JSON looks like
JSON stores data as key-value pairs, grouped into objects (curly braces) and arrays (square brackets). A minimal API response:
{"id":42,"name":"ToolCraft","tags":["tools","blog"],"stats":{"tools":24,"posts":20}}The structure is obvious when you can see it, but minified it is a wall of text. That is exactly what a formatter fixes.
Step 1 — Paste and validate
Paste the JSON into the JSON Formatter. The moment you paste, it checks whether the text is valid. Valid JSON parses cleanly; invalid JSON points to the exact spot where the parser gave up.
Step 2 — Pretty-print
Click "Pretty". Each level of nesting gets its own indentation, so the hierarchy becomes visible at a glance. What was one dense line becomes a readable tree:
{
"id": 42,
"name": "ToolCraft",
"tags": ["tools", "blog"],
"stats": { "tools": 24, "posts": 20 }
}Step 3 — Read the structure
Two habits make any JSON legible: read the keys first, then trace one path end-to-end. The collapsible tree in the tool lets you hide entire branches — invaluable for API responses that run to hundreds of lines.
The most common errors
| Error | What it looks like | Fix |
|---|---|---|
| Trailing comma | {"a":1,} | Remove the comma after the last item |
| Unquoted key | {a: 1} | Wrap keys in double quotes: "a" |
| Single quotes | {'a':1} | JSON requires double quotes only |
| Comments | {/* hi */} | JSON has no comments — remove them |
A trailing comma after the final item is the single most common reason valid-looking JSON fails to parse. The tool highlights it instantly.
Is JSON the same as JavaScript?
Close, but not identical. JSON is a text format with its own strict rules — no functions, no comments, no trailing commas, double quotes only.
Why is my JSON invalid when it looks fine?
Check for trailing commas, single quotes, or a missing closing brace. Paste it into the formatter and read the highlighted location.
Can JSON be formatted differently?
Yes — 2 spaces, 4 spaces and tabs are all common. ToolCraft uses 2 spaces, the de facto standard for most projects.
Written by Daniel Osei
Daniel builds developer tools and writes about JavaScript, JSON and everything that lives in the terminal.
Tools used in this article
JSON Formatter
PopularPretty-print, validate and minify JSON — securely in your browser.
Encode and decode URLs, query strings and components.
Encode text to Base64 and decode it back — with UTF-8 support.
Related articles
JSON Formatter vs Minifier: When to Use Each
Both transform JSON — one for humans, one for machines. Here is when each matters and why the difference is not cosmetic.
URL Encoding, Explained: What %20 Actually Is
The "%" codes in URLs are not corruption — they are a precise language. Here is how percent-encoding works and when it matters.
