Format JSON Locally Before Debugging an API Response
When an API returns a minified JSON blob, reading it in your browser is painful. Here is a practical approach to format, validate, and inspect JSON with browser-side processing.
Introduction
When you copy an API response from a network inspector or a log file, it usually arrives as a single long line. Reading nested structures that way is slow and error-prone. You have to scroll sideways, squint at commas, and mentally reconstruct the hierarchy.
A JSON formatter turns that blob into readable output. The public tool is designed to process input in your browser based on the current implementation. Avoid pasting sensitive JSON unless you have reviewed the implementation and your own data handling requirements.
This is useful for API debugging, config file cleanup, webhook payload inspection, and any time you need to understand a JSON document quickly.
Real-world scenario
You are debugging a Stripe webhook response. The raw payload is a single line:
{"id":"evt_123","object":"event","type":"customer.subscription.updated","data":{"object":{"id":"sub_456","customer":"cus_789","status":"active","amount":1500,"currency":"usd"}},"created":1780034567}You paste this into a JSON formatter. Two seconds later you see:
{
"id": "evt_123",
"object": "event",
"type": "customer.subscription.updated",
"data": {
"object": {
"id": "sub_456",
"customer": "cus_789",
"status": "active",
"amount": 1500,
"currency": "usd"
}
},
"created": 1780034567
}Now you can read the structure without horizontal scrolling. You can see the subscription amount is 1500 cents, the status is active, and the customer ID is cus_789.
What the tool does
The JSON formatter takes a JSON string and rewrites it with consistent indentation. If the JSON is invalid, it tells you where the syntax error is. After formatting, you can also minify it back to a compact form if that is what you need.
The key operations are:
- Format: Parse and pretty-print with two-space indentation
- Minify: Remove whitespace to produce compact output
- Validate: Check syntax and report errors
- Inspect: See the root type and key count
Example input and output
Input (copied from an API response):
{"name":"widget","price":29.99,"in_stock":true,"tags":["sale","new"]}Output (formatted):
{
"name": "widget",
"price": 29.99,
"in_stock": true,
"tags": [
"sale",
"new"
]
}Output (minified):
{"name":"widget","price":29.99,"in_stock":true,"tags":["sale","new"]}Common mistakes
Pasting JavaScript object literals instead of JSON. JSON requires double-quoted keys and string values. JavaScript object literal syntax allows single quotes, unquoted keys, and trailing commas. If you paste something like { name: 'widget' }, the formatter rejects it because it is not valid JSON.
Fix: Convert the source format to valid JSON first, or use a JSON-to-JavaScript converter before formatting.
Mixing up formatting and validation intent. Formatting does not fix invalid JSON. If the input has a syntax error, formatting fails and shows the error position. That is actually useful — it tells you the API response or config file has a problem you need to fix at the source.
Using a formatter as a debugging substitute for a proper inspection tool. For large API responses with deeply nested arrays, a formatter shows the structure but does not let you extract specific values. For that, a JSONPath extractor is a better next step.
Tool limits
The formatter works entirely in your browser. Very large JSON files (say, over 5 MB) can slow down the browser tab because the entire document has to be held in memory and rewritten. For multi-megabyte payloads, a command-line tool or a local editor may feel faster.
Standard JSON does not support comments. If your config file has // comment or /* block comment */ lines, the validator rejects them. Some configuration formats (like JSONC) allow comments, but this tool validates against standard JSON only.
Next steps
After formatting JSON, you may need to:
- CSV to JSON Converter — convert spreadsheet exports to JSON for the same formatting workflow
- JSON Path Extractor — extract specific values from a large JSON document
- JSON to YAML Converter — convert JSON to YAML for config file workflows
- XML Formatter — format XML responses from older APIs
Final practical note
Keep a JSON formatter open in a browser tab when you are working with APIs or config files. When you hit a response that is hard to read, paste it, format it, and copy the cleaned version into your ticket, note, or test file. The workflow takes seconds and avoids misreading a value in a minified blob.