JSON Formatter

Practical Example

Paste a one-line API response or JSON log to format it with indentation and locate syntax errors such as missing commas or unmatched quotes. You can also minify validated JSON before storing it in a config file.

What is a JSON Formatter?

JSON (JavaScript Object Notation) is a lightweight text format for storing and transmitting data. Originally proposed by Douglas Crockford in 2001, it was later standardized as ECMA-404 and RFC 8259. Its human-readable and machine-parsable structure makes it the de facto standard data interchange format across web development, used in REST API responses, configuration files, database documents, message queue payloads, and more.

A JSON formatter converts compressed or unformatted JSON data into a readable form by applying indentation and line breaks. This is particularly useful when API responses come as a single compressed line or when you need to understand the structure of a configuration file. Conversely, the Minify feature removes all whitespace and line breaks to minimize data transfer size, helping reduce network bandwidth and improve response times.

This tool uses the browser's built-in JSON.parse() and JSON.stringify() methods. Your input data is never sent to a server, and it is completely cleared from memory when you close the page. You can safely validate and format JSON containing authentication tokens, API keys, or personal information.

How to Use

1. Paste your JSON data into the left input area.
2. The JSON syntax is automatically validated as you type, with the result shown above the input.
3. Click Beautify to format the JSON with 2-space indentation in the output panel.
4. Click Minify to compress the JSON into a single line with no whitespace.
5. Use the Copy Result button to copy the output to your clipboard.

Practical Use Cases

The JSON formatter is useful across various stages of the development workflow. Below are common real-world scenarios.

API Debugging — When you copy REST API or GraphQL responses from browser DevTools, they are typically compressed with no whitespace. Formatting them makes it easy to understand the response structure and quickly spot missing fields or incorrect data types.

Configuration File Management — When editing project configuration files like package.json, tsconfig.json, or .eslintrc.json, a syntax error can cause the entire build to fail. Validating with this tool before committing helps catch errors early.

Data Transformation & Migration — When exporting or importing documents from JSON-based databases like MongoDB, Elasticsearch, or Firebase, visually inspecting the data structure is essential. Formatting the JSON and reviewing field structures helps reduce migration errors.

Production Optimization — When including local JSON files in a frontend bundle, removing whitespace with the Minify feature can reduce file sizes by 20–30% on average. This is especially effective for translation files (i18n) and static data files.

Team Communication — When backend developers share API specs or QA engineers report test results, properly formatted JSON greatly improves readability and reduces communication overhead.

JSON Syntax Rules

JSON follows simple but strict syntax rules. Understanding these rules will help you prevent most validation errors.

Data Types — JSON supports six data types. Strings must be wrapped in double quotes ("); single quotes (') are not allowed. Numbers include integers and floating-point values, and leading zeros (e.g., 007) are not permitted. Booleans (true, false) and null must be lowercase only. Objects use curly braces {} and arrays use square brackets [].

Key Rules — Object keys must be double-quoted strings. Unlike JavaScript object literals, unquoted keys ({name: "value"}) are not valid JSON.

No Trailing Commas — Placing a comma after the last element in an array or object causes a parse error. While JavaScript allows trailing commas, the JSON standard forbids them. For example, {"a": 1, "b": 2,} is invalid.

No Comments — JSON does not support comments (// or /* */). If you need comments in configuration files, consider extended formats like JSON5, JSONC, or YAML.

JSON vs Other Data Formats

While JSON is the most widely used format for web development, other formats may be more suitable depending on your use case.

Compared to XML, JSON has a simpler structure, smaller file sizes, and better compatibility with JavaScript. However, XML provides namespaces, schema validation, and XSLT transformations that enterprise environments often require. XML is still used in SOAP-based legacy system integrations.

YAML is indentation-based, making it more human-readable, and supports comments. It is commonly used in configuration files for Docker Compose, Kubernetes, and GitHub Actions. However, it is sensitive to indentation errors and carries security risks from arbitrary code execution when parsing untrusted sources.

Protocol Buffers (protobuf) and MessagePack are binary serialization formats that offer much smaller sizes and faster parsing speeds than JSON. They are used instead of JSON in microservice internal communication and high-performance environments. gRPC adopts protobuf as its default message format.

Decoding Parser Error Messages

JSON errors tell you where parsing failed, not why. Here are the most common messages and their usual causes.

Unexpected token < is the classic API-debugging case: the server returned a 401/404/500 HTML page and the client tried to parse it as JSON. The fix is in the request, not the JSON.

When Your "JSON" Contains Comments

Config files sometimes arrive with // comments — that is JSONC (VS Code settings) or JSON5, not standard JSON. Standard parsers, including this tool, treat comments as errors, so strip them before pasting. If you need annotations in API payloads, the convention is a dedicated key like "_comment". Full syntax rules are covered in the JSON data handling guide.

Frequently Asked Questions