Developer Tools

JSON Formatter & Validator โ€” Format, Minify, and Explore JSON

Format, prettify, minify, and validate JSON instantly. Explore parsed JSON in an interactive tree view. Sort keys, copy, download โ€” all in your browser.

1 line
๐Ÿ”’Your JSON never leaves your browser โ€” all formatting and validation runs locally in JavaScript.

What Is JSON?

JSON (JavaScript Object Notation) is a lightweight data-interchange format that is easy for humans to read and write, and easy for machines to parse and generate. It is built on two structures: a collection of name/value pairs (objects, written as { "key": "value" }) and an ordered list of values (arrays, written as ["a", "b", "c"]). JSON supports six data types: strings, numbers, booleans (true/false), null, objects, and arrays.

JSON has become the universal language of APIs. REST APIs, GraphQL responses, webhook payloads, browser localStorage, configuration files (package.json, tsconfig.json), and cloud service schemas all use JSON. Understanding how to quickly read and validate JSON is an essential skill for every developer.

Common JSON Errors and How to Fix Them

The JSON specification is strict โ€” a single misplaced character makes the entire document invalid. The most common errors are:

How to Format and Validate JSON

  1. Paste or type your JSON into the input editor. The validator runs automatically and shows a green banner for valid JSON, or a red banner with the exact error message for invalid JSON.
  2. Click Format / Prettify to produce indented, human-readable JSON in the output panel. Choose 2 spaces, 4 spaces, or tabs from the Indent dropdown.
  3. Click Minify to collapse the JSON to a single line โ€” ideal for reducing payload size in API requests.
  4. Switch to Tree view to explore the structure interactively. Click any object or array to expand or collapse it.

FAQ

Frequently Asked Questions

Why is my JSON invalid?

The most common JSON errors are: trailing commas after the last item in an object or array ({"a":1,} is invalid), single quotes instead of double quotes ("key" must be "key" not 'key'), unquoted keys ({key: 1} is invalid JSON even though it is valid JavaScript), and the use of undefined, NaN, or functions which JSON does not support. This tool shows the exact error from your browser's JavaScript engine, including the position of the first invalid character.

What does "prettify" or "format" JSON mean?

Formatting (prettifying) JSON adds whitespace โ€” newlines and indentation โ€” to make the structure visually clear and easy to read. API responses often arrive minified (all on one line) to reduce bandwidth. This tool expands minified JSON into a readable form with your choice of 2-space, 4-space, or tab indentation. The data is unchanged โ€” only whitespace is added.

What does "minify" JSON mean?

Minifying JSON removes all unnecessary whitespace โ€” spaces, newlines, and tabs โ€” producing the most compact valid representation. This is useful when sending JSON in API request bodies or embedding it in source code where file size matters. The tool's Minify button computes the smallest valid JSON string from your input.

What does the tree view show?

The tree view renders your parsed JSON as a collapsible visual hierarchy. Objects ({}) and arrays ([]) show a toggle arrow โ€” click to expand or collapse them. Values are colour-coded: strings appear in amber, numbers in blue, booleans in orange, and null in red. This makes it easy to explore deeply nested API responses without counting braces manually.

What does "sort keys" do?

Sorting keys recursively alphabetises all object keys at every level of nesting before formatting. This is useful for comparing two JSON objects to spot differences, for normalising output from different API versions, or for producing canonical JSON where key order is deterministic. Array element order is never changed โ€” only object keys are sorted.

Related Tools

โ† All tools