JSON Formatter and Validator: Beautify and Minify

What JSON Is

JSON, short for JavaScript Object Notation, is a lightweight text based data interchange format. It was popularised by Douglas Crockford in 2001, standardised as ECMA-404 in 2013 and later as IETF RFC 8259 in 2017. Despite being derived from JavaScript, JSON is language independent and supported by libraries in every mainstream programming language.

JSON became the default serialisation format for web APIs largely because it mirrors the native data structures of most dynamic languages. A JSON document is built from six types: string, number, boolean, null, array and object. Objects are unordered sets of key value pairs, arrays are ordered lists, and values can nest arbitrarily. This simplicity is a feature. Where XML brought namespaces, attributes, mixed content and schemas, JSON offered a flat, predictable shape that matched how developers already thought about data.

Today JSON drives REST APIs, GraphQL responses, package manifests like package.json, VS Code settings, Kubernetes manifests, and countless config files. Understanding how to read, format and validate JSON is a core skill for anyone building software.

How It Works

A JSON formatter parses the input string into an in-memory tree using the host language JSON parser, in this case the browser native JSON.parse. Once parsed, the tree is re-serialised with JSON.stringify. Pretty printing passes an indent argument to stringify so that each level gets its own indented line. Minification passes no indent so the output is the most compact form.

Worked example: the input {"name":"Ali","age":25,"skills":["JS","HTML"]} becomes, when beautified with 2 spaces indent:

{
  "name": "Ali",
  "age": 25,
  "skills": [
    "JS",
    "HTML"
  ]
}

Validation uses the same parser. If parsing fails, the browser engine reports the exact character offset of the error, which this tool displays verbatim so you can jump to the problem spot.

How to Use This Tool

Paste your JSON into the Input JSON box.
Choose an indent width: 2 spaces, 4 spaces or tab.
Click Beautify to pretty print or Minify to compact.
Use Validate for a syntax check without reformatting.
Review the status banner, which shows the exact parse error if any.
Copy the output or clear and try again.

Common Use Cases

API debugging: Beautify a terse response from a REST endpoint to inspect fields.
Config file cleanup: Standardise indentation across package.json or tsconfig.json.
Diff preparation: Minify both sides before diffing so whitespace noise disappears.
Payload size optimisation: Minify before transmission to cut bandwidth.
Teaching and documentation: Pretty print example payloads for clearer code samples.
Fixing malformed exports: Validate to find the exact comma, quote or brace that broke parsing.

Common Mistakes

Trailing commas after the last element of an array or object. Strict JSON forbids them.
Using single quotes for keys or strings. JSON requires double quotes.
Including // or /* */ comments. Comments are not part of JSON.
Unquoted object keys like {name: "Ali"}. Keys must be double-quoted strings.
Duplicate keys in the same object. RFC 8259 marks this as undefined behaviour.

JSON5 and JSONC

Two popular supersets of JSON address the strict quoting and comment rules. JSON5 allows single quotes, unquoted keys, trailing commas, line comments and hexadecimal numbers. It is used by Babel and many config tools. JSONC is Microsoft's variant that permits block and line comments while keeping other JSON rules. VS Code uses JSONC for its settings.json. Both require a dedicated parser because the native browser JSON.parse rejects their extensions.

If you are editing configuration files, prefer the format the tool documents for itself. For data transmission over APIs, stick to strict JSON so any receiver can parse it with no extra library.

Important Never paste production secrets such as API keys or JWTs into unknown online formatters. This tool runs entirely in your browser, but many competing sites log submissions on the server. Verify the Network tab if you work with sensitive payloads.

Privacy

Formatting, minifying and validating happen in your browser using JSON.parse and JSON.stringify. No request is ever made with your JSON content.

Frequently Asked Questions

What is JSON?

JSON stands for JavaScript Object Notation. It is a lightweight text format for structured data defined by Douglas Crockford in 2001 and standardised as ECMA-404 and RFC 8259. It supports strings, numbers, booleans, null, arrays and objects.

How is JSON different from XML?

JSON is terser, maps naturally to JavaScript and most other language data types, and parses faster. XML supports attributes, comments and schema validation out of the box, which JSON lacks.

Is there a maximum JSON size?

The spec does not set a limit. In practice browsers can parse tens of megabytes without issue, but very large payloads should be streamed with a library like oboe.js rather than parsed in one call.

Is there a limit to nested depth?

JavaScript JSON.parse supports nesting up to the engine stack limit, typically 1000 to 10000 levels. For safety keep nesting under a few hundred.

What is the difference between JSON and JSON5?

JSON5 is a superset that allows comments, trailing commas, single quotes and unquoted keys. It is popular for config files but is not supported by native JSON.parse. JSONC is a similar variant used by Microsoft tools.

Does pretty print make my JSON bigger?

Yes. Indentation and line breaks add bytes. A pretty printed file can be 20 to 60 percent larger than the minified version. Use pretty for debugging and minified for transmission.

Is my JSON sent anywhere?

No. Parsing and formatting happen entirely in your browser with the native JSON.parse and JSON.stringify methods. Nothing is uploaded.