JSON Formatter

Format, minify or escape JSON, and edit the same value in a tree. Invalid JSON is reported with a line and column when the browser can say where.

Escape
Format
AaString #Number TBoolean NNull { }Object [ ]Array

A source on the left, a tree on the right

This page is a wide workbench for one JSON value. The left side is the text you paste. The right side is the same value as a tree you can collapse, search and edit. It formats, minifies and escapes. It does not guess a repair for broken JSON. Putting one sentence into a JSON string, without a whole document, is still JSON escape. A CSV round trip is JSON to CSV. YAML is JSON to YAML.

How to use it

  1. Paste into the left box, click Show Example, click Import, or drop a .json or .txt file on the left box. The status line shows the caret’s line and column, then the character count and the line count. Line numbers run beside the source and the tree, and follow the scroll. The Line numbers checkbox on the right is on by default and turns them off.
  2. Format pretty-prints with the indent you picked, 2 or 4. Minify makes one line. Sort keys is on the right. Tick it to rewrite object keys in order. Untick it to put the previous order back. Array order stays.
  3. Escape turns the text into one JSON string. If the text is valid JSON, Format-style indentation is escaped. Minified escape compresses first, then escapes. Unescape parses once. If that result is a string, you see the string, not a second parse.
  4. The tree follows the text. Click ▾ to collapse a node. Collapse on the toolbar closes the whole tree and the button becomes Expand. Expand opens everything and the button becomes Collapse.
  5. Search stays closed until you click Search. It then matches keys and values. Case sensitive and Fold unmatched are optional. Previous and next move through the hits. The path line under the tree is a JSONPath such as $.tags[0].
  6. Double-click a key or a value to edit it. Click a boolean to flip true and false. Hover a row and use + to add a node, × to delete it. Copy on the left and Copy Result on the right both take the left-hand text, and so does Export. Fullscreen fills the screen. A narrow window stacks the tree under the source.

What the parse will and will not do

Only JSON is accepted. A trailing comma, a single quote or a comment is an error. When the browser reports a position, the message includes the line and column. Duplicate keys keep the last one, which is what JSON.parse does. A number that is a whole Unix time in seconds or milliseconds shows your local time beside it. That hint is not written back into the JSON. More than 4000 nodes still format and minify, but the tree is skipped so the tab does not lock. Editing the tree rewrites the left side. A one-line source stays one line. A source with line breaks is written again at the selected indent. A very large integer can lose low digits in the browser. Keep those digits in a string if they all matter. The example is an object with the string Ada, a boolean, null, an array, and the timestamp 1700000000.

Where people use it

  • Reading a minified API response and folding the branches you do not need.
  • Changing one field in a fixture without hunting for the comma.
  • Escaping a JSON document so it can sit inside another string, then unescaping it.

Questions

It rejected a trailing comma.

The page accepts JSON, not JSON5. Remove the comma and any comments. The message points at a line and column when the browser provides them.

The tree disappeared on a huge file.

Above 4000 nodes the tree is not drawn. Format and minify still rewrite the left side. Cut the document down if you need the tree.

A number came back in quotes after I edited null.

A null can be replaced with null, true, false, a JSON number, or other text. Other text is stored as a string.