W3docs

Tools

JSON Code Formatter

Paste your JSON code and click Format to clean it up with Prettier. Tab size and (for JS/TS) trailing semicolons are configurable. Switch languages from the toolbar.

About the JSON formatter

This tool reformats JSON with consistent indentation, spacing, and quoting using Prettier — the same formatter many teams already run in their editors and CI. Paste minified or inconsistently indented JSON and click Format; the editor's content is replaced in place with the result, so there's a single pane rather than separate input and output panels. Formatting runs entirely in your browser: Prettier's standalone build and its parser plugins are pulled in with a dynamic import() only when you click Format, and the JSON you paste never leaves the page or touches a server.

Under the hood, the json parser id isn't a dedicated JSON grammar — it's Prettier's Babel parser paired with the estree printer, the same pipeline this site's JavaScript and TypeScript formatters use. That makes it more forgiving than strict JSON: trailing commas, unquoted keys, single-quoted strings, and // or /* */ comments are all accepted in the input and normalized into valid, double-quoted JSON in the output. Anything the parser genuinely can't make sense of — a missing brace, a stray comma, an unterminated string — throws a syntax error with a line and column instead, shown inline above the editor.

Reach for this when you're looking at a minified API response, a one-line config file, or JSON copied from browser devtools, and need it laid out before you can find the field you're after. It doubles as a quick validator, since unparseable input fails loudly rather than silently passing through. Tab width is configurable from 1 to 8 spaces; the semicolon toggle shown on the JavaScript and TypeScript formatters doesn't apply to JSON and is hidden on this page.

Examples

Short arrays and objects collapse to one linetext
// Input
{"tags":["html","css","js"],"count":3}

// This tool (tab size 2) — short arrays/objects stay on one line
{ "tags": ["html", "css", "js"], "count": 3 }

// JSON.stringify(data, null, 2) — always one item per line
{
  "tags": [
    "html",
    "css",
    "js"
  ],
  "count": 3
}

Prettier only wraps when content exceeds its print width (80 characters by default). JSON.stringify(data, null, 2) — the usual one-line replacement for this tool — always puts one array item per line no matter how short the array is.

Input doesn't have to be strict JSONtext
// Input — not valid per strict JSON (unquoted key, single quotes, trailing commas)
{a: 1, 'b': 'two', "c": [1, 2, 3,],}

// Output — normalized to strict, double-quoted JSON
{ "a": 1, "b": "two", "c": [1, 2, 3] }

The json parser id is Prettier's Babel parser, not JSON.parse — it tolerates JavaScript object-literal syntax on the way in but always prints valid, double-quoted JSON. Handy for cleaning up JSON-ish text copied from a console.log or a .js config file.

Invalid JSON fails with a line and columntext
// Input (missing closing brace)
{"a": 1, "b": 2

// Error shown inline — input itself is left untouched
Unexpected token, expected "," (1:16)
> 1 | {"a": 1, "b": 2
    |                ^

This is Prettier's own SyntaxError message, shown verbatim in the alert banner above the editor. The pasted text is left exactly as-is — nothing is cleared or partially reformatted when parsing fails.

Frequently asked questions

Is it safe to paste sensitive JSON into this formatter?

Yes — formatting runs entirely in your browser via Prettier's standalone build. Nothing you paste is sent to a server, logged, or stored anywhere.

Why does the formatter reject JSON that looks fine?

The tool parses your text before it can print it, so any structural problem — a missing comma, an extra closing brace, an unterminated string — throws a syntax error with the exact line and column instead of guessing at a fix. That message is shown verbatim in the banner above the editor, and your original input is left untouched.

Why did my array print on one line instead of one item per line?

Prettier only breaks an array or object onto multiple lines when it doesn't fit within its print width (80 characters by default). Short values like ["html", "css", "js"] stay inline — this is different from JSON.stringify(data, null, 2), which always puts one item per line regardless of length.

Does formatting sort or deduplicate keys?

No. Property order is preserved exactly as written, and duplicate keys are left in place rather than merged — the formatter only changes whitespace and quoting, not the structure of the data.

Can I format JSON that has comments or trailing commas?

Yes. The parser behind this tool is Prettier's Babel-based json parser, which is more lenient than strict JSON: it accepts trailing commas, unquoted keys, single-quoted strings, and // or /* */ comments, and normalizes all of it to valid, double-quoted JSON in the output.