JSON Formatter: Debug Your API Responses Like a Pro
A JSON formatter makes messy API responses readable. Learn how Toolblip's JSON formatter works, what makes a good formatter, and how to debug JSON errors quickly.
You know the pain. You open a fetch response in your browser DevTools and see:
{"id":1,"name":"Product","price":29.99,"in_stock":true,"tags":["electronics","sale","new"],"metadata":{"weight_kg":0.5,"dimensions":{"width":10,"height":20,"depth":5}}}
All on one line. Good luck finding the bug.
A JSON formatter solves this — it takes your compressed JSON and turns it into something a human can actually read. This guide covers what makes a formatter useful, what features to look for, and how to debug JSON errors faster.
What Is a JSON Formatter?
A JSON formatter takes minified or poorly-structured JSON and pretty-prints it with:
- Proper indentation (usually 2 or 4 spaces per level)
- Consistent spacing between key-value pairs
- Syntax highlighting so you can distinguish strings from numbers from booleans
- Line breaks between top-level keys
The same tool usually doubles as a JSON validator — it tells you whether your JSON is actually valid, and pinpoints the exact character where an error occurs.
Why JSON Goes Wrong
Trailing Commas
JavaScript allows trailing commas, but JSON does not:
{
"name": "Product",
"price": 29.99, ← valid JS, invalid JSON
}
Single Quotes
JSON requires double quotes for all keys and string values. Single quotes are a syntax error:
{
'name': 'Product' ← invalid JSON
}
Unquoted Keys
JavaScript object notation allows unquoted keys, but JSON requires them:
{
name: "Product" ← valid JS, invalid JSON
}
Comments
JSON has no comment syntax. If you paste something like:
{
// This is the product name
"name": "Product"
}
That will fail validation.
The Anatomy of a Good JSON Formatter
1. Syntax Highlighting
Strings, numbers, booleans, null, and keys should each be a different color. This makes it dramatically faster to scan a large response:
{ ← punctuation (white/gray)
"id": 1, ← key (cyan), number (orange)
"name": "Product", ← key (cyan), string (green)
"in_stock": true, ← key (cyan), boolean (blue)
"price": null ← key (cyan), null (red)
}
2. Error Pinpointing
When JSON is invalid, the formatter should tell you:
- Which line and column the error is on
- What the error is ("Unexpected character at position 42")
- A visual indicator showing exactly where the parser choked
This is the difference between spending 20 minutes hunting for a missing quote and spending 20 seconds.
3. Collapsible Tree View
For deeply nested JSON (API responses often are), a tree view that lets you collapse and expand nodes is essential:
{
"data": {
"users": [ ← [2 items] — click to expand
{ ... },
{ ... }
]
}
}
4. Query/Path Navigation
Some formatters let you query the JSON using JSONPath or a simple dot-notation accessor:
data.users[0].name
→ "John Doe"
This is incredibly useful for finding a specific value in a large response without manually expanding every level.
Common JSON Errors and How to Fix Them
Error: "Unexpected end of JSON input"
This usually means a string was never closed:
// What you pasted:
{"name": "Product}
// What JSON expects:
{"name": "Product"}
Fix: Check for unclosed strings, missing quotes, or truncated data.
Error: "Unexpected token"
Could be a trailing comma, single quotes, or an invalid character:
// This:
{"name": "Product",}
// JSON expects no trailing comma:
{"name": "Product"}
Error: "Expected property name or }"
Often means a comma where there shouldn't be one:
{"name": "Product",,} ← double comma
Error: "Invalid escape sequence"
You used a backslash that JSON doesn't recognize:
// This:
{"path": "C:\Users\name"}
// JSON requires escaped backslashes:
{"path": "C:\\Users\\name"}
JSON Formatter Use Cases
1. Debugging API Responses
The most common use case. You're building a frontend against an API and something's breaking. The API returns a 200 with JSON, but your code fails to parse it. Pop it in a formatter to see what's actually coming back.
2. Comparing Two JSON Objects
Copy two JSON payloads side by side. Look for differences in structure, missing keys, or unexpected values. Useful when debugging why a newer API version behaves differently.
3. Config File Validation
Your tsconfig.json, .eslintrc, or package.json is rejecting the JSON parser. Paste it in to find the typo.
4. Learning API Structures
When you're exploring a new API and want to understand the response shape. Formatter + tree view gives you a quick map of everything available.
How to Validate JSON in JavaScript
The native JSON.parse() method is the simplest validator:
function isValidJSON(str) {
try {
JSON.parse(str);
return true;
} catch (e) {
return false;
}
}
To get the error message and position:
function parseJSON(str) {
try {
return { success: true, data: JSON.parse(str) };
} catch (e) {
return {
success: false,
error: e.message,
position: e.message.match(/position (\d+)/)?.[1],
};
}
}
JSON vs JavaScript Objects
A common source of confusion: JSON is a string format. It's not the same as a JavaScript object.
// This is a string — valid JSON
const jsonString = '{"name": "Product", "price": 29.99}';
// This is a JavaScript object — NOT JSON
const jsObject = { name: "Product", price: 29.99 };
// You can't send a JS object over HTTP — it must be serialized:
JSON.stringify(jsObject); // → '{"name":"Product","price":29.99}'
// And to parse an incoming JSON string:
JSON.parse(jsonString); // → { name: 'Product', price: 29.99 }
Pretty-Printing in JavaScript
Native pretty-print without a library:
const obj = JSON.parse(jsonString);
const pretty = JSON.stringify(obj, null, 2); // 2-space indent
const compact = JSON.stringify(obj); // minified
Try It Now
The JSON Formatter on Toolblip validates, formats, and highlights your JSON in real-time as you type. It pinpoints errors to the exact character and lets you explore nested structures with a collapsible tree view.
JSON formatter tools are deceptively simple — they seem like a commodity, but a good one with fast validation, clear error messages, and a tree view will save you hours of debugging time over the course of a project.
Toolblip Team
Writing about developer tools, web performance, and the tools that make building faster.