About this tool
What Is a JSON Formatter?
A JSON formatter takes raw, minified JSON data and restructures it with proper indentation and line breaks to make it human-readable. Most API responses arrive as a single compressed line of text to minimize bandwidth. While efficient for network transmission, this format makes debugging nearly impossible for developers.
A formatter parses the JSON string into an object, then re-serializes it with configurable indentation (typically 2 or 4 spaces). This process also validates the syntax — if the JSON is malformed, the parser throws an error identifying the exact location of the problem.
Common JSON Syntax Errors
JSON (JavaScript Object Notation) follows strict ECMA-404 rules that differ from JavaScript object literals:
Trailing commas are the most frequent error. {"name": "John" } is invalid JSON. Remove the comma after the last property.
Single quotes are not allowed. {'name': 'John'} is valid JavaScript but invalid JSON. All strings must use double quotes: {"name": "John"}.
Unquoted keys are invalid. {name: "John"} works in JavaScript but fails JSON.parse(). Keys must be double-quoted: {"name": "John"}.
Comments are not supported. {"name": "John" // user name} will fail parsing. JSON has no comment syntax.
Undefined and NaN are not valid JSON values. Use null instead of undefined, and stringify special numbers before encoding.
JSON vs. XML in API Responses
JSON dominates modern REST APIs due to its compact syntax and native JavaScript compatibility. XML remains in use for SOAP web services, RSS feeds, and enterprise systems (healthcare HL7, financial FIX protocol).
| Feature | JSON | XML |
|---|---|---|
| Syntax | Key-value pairs with brackets | Opening/closing tags |
| File size | Smaller (no closing tags) | Larger (verbose tags) |
| Parsing | Native JSON.parse() | Requires DOM parser |
| Data types | String, number, boolean, null, array, object | Everything is a string |
| Human readability | Good with formatting | Verbose but structured |
| Use cases | REST APIs, web apps, mobile | SOAP, RSS, enterprise systems |
Debugging API Responses Effectively
When debugging a failing API integration, formatting the response is your first diagnostic step:
- Check the HTTP status code before examining the body. A 401 means authentication failed — the response body is secondary to fixing your credentials.
- Format the response to see the full structure. Minified JSON hides nested objects and arrays that may contain error details.
- Look for error objects. Most APIs return errors in a standard format:
{"error": {"code": 400, "message": "Invalid parameter"}}— but this structure varies by API. - Compare expected vs. actual schemas. Format both the documentation example and your actual response side-by-side to spot missing fields or type mismatches.
Minification for Production
Minification removes all whitespace, line breaks, and indentation from JSON, reducing file size by 20-60% depending on nesting depth. This is important for:
- API request bodies: Smaller payloads reduce upload time, especially on mobile networks.
- Configuration files stored in databases: Minified JSON uses less storage space.
- WebSocket messages: High-frequency messages benefit from smaller payloads.
- LocalStorage and cookies: Browser storage has strict size limits (5-10MB for localStorage, 4KB for cookies).
Important: minification does not change the data — it only removes formatting whitespace. The parsed result is identical.
Practical Usage Examples
Formatting Minified JSON
{"users":[{"id":1,"name":"Alice"},{"id":2,"name":"Bob"}]}
Formatted with 2-space indent, showing the nested array structure clearly.Catching a Syntax Error
{"name": "John", "age": 30 }
Error: "Unexpected token } in JSON at position 28" — trailing comma detected.Step-by-Step Instructions
Step 1: Copy Your API Response. Use your browser DevTools Network tab, Postman, cURL, or any HTTP client to copy the raw response body.
Step 2: Paste Into the Input Field. The tool auto-detects whether the data is JSON, XML, or HTML based on the opening characters ({ for JSON, < for XML/HTML).
Step 3: Select Indentation Style. Choose 2-space, 4-space, or tab indentation. 2-space is the JavaScript community standard; 4-space is common in Python and Java projects.
Step 4: Check the Validation Status. The formatter parses the data using standard JSON.parse() or XML parsing. If the syntax is invalid, it reports the exact error message and character position.
Step 5: Copy or Minify. Copy the beautified output for debugging, or use the minified output to reduce payload size before sending data over the network.
Core Benefits
Instant Syntax Error Detection: Catches common JSON errors like trailing commas, single-quoted strings, missing brackets, and unescaped characters. Reports the exact error position.
JSON, XML, and HTML Support: Handles all three major API response formats. Auto-detection identifies the format from the opening character, or you can force a specific mode.
Client-Side Processing: Your API response data — including sensitive tokens, user data, and proprietary payloads — never leaves your browser. All parsing happens in local JavaScript.
One-Click Minification: Compress beautified JSON back to a single line for network transmission. Useful for reducing payload size in POST requests and configuration files.
Standard-Compliant Parsing: Uses native JSON.parse() which enforces strict ECMA-404 compliance — double-quoted keys, no trailing commas, no comments, no undefined values.
Frequently Asked Questions
JSON is a text-based data interchange format with strict syntax rules: all keys must be double-quoted, no trailing commas, no comments, no undefined values, and no functions. A JavaScript object is a runtime data structure that allows single quotes, unquoted keys, comments, functions, and trailing commas. JSON.parse() only accepts valid JSON, not JavaScript object syntax.
Remove the comma after the last element in any object or array. For example, change {"name": "John", "age": 30 } to {"name": "John", "age": 30}. Most code editors can highlight trailing commas, and our formatter will report the exact character position of the error.
The ECMA-404 JSON specification strictly requires double quotes for all strings and keys. Single quotes are a JavaScript convenience, not part of the JSON standard. If your data source generates single-quoted JSON, you need to transform it to double quotes before parsing.
Yes. This formatter processes all data entirely in your browser using JavaScript. No data is sent to any server, stored in any database, or logged anywhere. Your API tokens, user data, and proprietary payloads remain completely private.
Minification removes all unnecessary whitespace, line breaks, and indentation from JSON, producing the most compact representation possible. The data content is identical — only formatting is removed. This reduces payload size by 20-60% depending on nesting depth, which is important for network transmission and storage efficiency.
The formatter processes data in your browser memory, so it can handle files up to several megabytes without issues on modern devices. For very large files (50MB+), performance depends on your device RAM and browser. The minified output preview is truncated at 750 characters for display, but the full data is parsed and validated.
Select "XML" from the format type dropdown, or paste XML content starting with < and the formatter will auto-detect it. The formatter adds proper indentation to XML tags, making nested element hierarchies readable. It handles self-closing tags, attributes, and CDATA sections.
The JavaScript and web development community standard is 2 spaces. Python, Java, and .NET communities typically use 4 spaces. Tabs are preferred by Go developers and some accessibility advocates (tabs allow customizable visual width). Choose whichever matches your project style guide.
No. The JSON specification does not support comments of any kind — neither / single-line nor / multi-line /. If you need comments in configuration files, consider using JSONC (JSON with Comments, supported by VS Code), JSON5, YAML, or TOML instead.
This error means JSON.parse() encountered a character it did not expect at that position. Common causes include trailing commas, single quotes instead of double quotes, unquoted property names, or JavaScript-specific values like undefined or NaN that are not valid in JSON.