Developer Tools

What these developer tools cover

Both tools in this category work on JSON, and between them they cover the two things you usually need from a document you did not write: making it readable, and working out how it differs from another one.

The formatter pretty-prints, minifies and validates. When the parse fails it names the line and column and shows the offending line, rather than reporting a character offset you would have to count to. The compare tool goes further and diffs two documents structurally.

Structural diff versus text diff

A text diff on two JSON files answers the wrong question. Two documents can hold identical data and still disagree on every line, because one is indented with tabs and the other with spaces, or because the keys were serialised in a different order. A line-based diff calls that a rewrite; a structural comparison calls it no change.

The compare tool parses both sides into data and then walks that data, so what comes back is a list of properties — each with its full path, the value on each side, and whether it was added, removed, changed or changed type. That is also what makes merging possible: once a difference is a property rather than a region of text, you can accept or reject it on its own.

• Reading, tidying or validating one document — JSON Formatter.
• Finding what differs between two documents, and merging individual changes — JSON Compare & Merge.

What runs where

Both tools parse in your browser. Nothing you paste or open is uploaded, which matters for the common case of a config file or an API response that contains credentials or customer data.

The compare tool accepts JavaScript and TypeScript object literals as well as JSON, and it reads them with a parser rather than executing them. There is no eval anywhere in that path: a file whose values come from calling a function is reported as containing dynamic expressions, with the position, instead of being run to find out what the values would be.