JSON Formatter & Diff

A JSON formatter is a developer tool that takes raw, minified, or unstructured JSON and rewrites it with consistent indentation, line breaks, and key alignment so the structure is readable by humans. It does not modify the data itself, only the presentation, which makes missing brackets, trailing commas, and quote mismatches easy to spot at a glance.

This JSON formatter also runs a structural diff between two payloads. Paste an original on the left and a modified version on the right, and the tool walks both trees, highlights added, removed, and changed keys, and lets you copy the JSON path to any node. QA engineers, backend developers, and API integration teams use it whenever they need to compare two webhook payloads, regression-test a serializer, or audit a config drift.

Why use a JSON formatter and diff?

• Catch malformed payloads instantly. Formatted JSON makes missing brackets, trailing commas, and unescaped quotes jump out the moment the document is rendered, so you find the bug before the parser does.
• Compare API responses precisely. The diff highlights every added, removed, and changed key with its full JSON path, which is faster than scrolling two side-by-side text blobs.
• Standardize JSON for code review. Both inputs are reformatted with two-space indentation, sorted into a predictable layout, and ready to paste into a pull request without noisy whitespace deltas.
• Copy paths in one click. Click any diff row to copy the dotted JSON path ($.user.address.zip) and use it directly in jq, JSONPath queries, or assertion libraries.
• Stay private by default. All formatting and diffing happens in your browser. The payloads never reach a server, so production secrets in headers or tokens stay on your machine.

How to use the JSON formatter and diff

1. Paste your original payload into the Original textarea on the left.
2. Paste the modified payload into the Modified textarea on the right.
3. Click Format above either pane to pretty-print that side with two-space indentation.
4. Scroll the diff panel to inspect added (green), removed (red), and changed (amber) keys.
5. Use the Filter keys box to narrow the diff by path, then click any row to copy the JSON path to your clipboard.

A minimal example:

{ "user": { "id": 12, "email": "a@example.com", "active": true } }

becomes:

{
  "user": {
    "id": 12,
    "email": "a@example.com",
    "active": true
  }
}

JSON syntax reference

JSON, defined in RFC 8259 and ECMA-404, supports six value types. The formatter accepts any of them at the root, including a bare string or number, even though most APIs use objects or arrays.

The strict spec also rejects trailing commas, single-quoted strings, unquoted keys, comments, and hex literals. If your input uses any of those, fix them first, or run the source through a JSON5 parser before pasting.

How the diff algorithm works

The diff walks both trees in parallel from the root path $. For every key that exists in both objects, it recurses into the value. If a key appears only on the left, it is marked removed. If a key appears only on the right, it is marked added. When both sides have a primitive value at the same path and the values differ, the row is marked changed and both old and new values are shown.

Arrays are compared positionally, so reordering an array changes every index. If your data is set-like, sort both sides before diffing. Object key order is irrelevant; the formatter normalizes traversal.

// Original
{ "name": "Ada", "tags": ["admin"] }
 
// Modified
{ "name": "Ada", "tags": ["admin", "owner"], "team": "core" }
 
// Diff output
+ $.tags.1   "owner"
+ $.team     "core"

Common use cases

• QA engineers comparing webhook payloads. Drop the captured payload from staging on the left and production on the right to find the field that broke a downstream consumer.
• Backend developers reviewing serializer output. Paste the JSON your service emits before and after a refactor to confirm only intended fields changed.
• Frontend developers debugging API responses. Format the response body from DevTools to read nested data quickly, then copy the path to a problem field.
• DevOps engineers auditing config drift. Diff two package.json, Helm values, or Terraform state snapshots to see exactly which keys moved.
• Tech writers documenting API contracts. Reformat sample payloads so example blocks in docs stay consistent across endpoints.

JSON formatter vs alternatives

Frequently asked questions

Is this JSON formatter safe to use with sensitive data?

Yes. The JSON formatter runs entirely in your browser using the native JSON.parse API. The original and modified payloads are never sent to a server, logged, or cached remotely, so API keys, tokens, and PII in your inputs stay on your machine. Closing the tab clears the state.

What is the difference between a JSON formatter and a JSON validator?

A JSON formatter rewrites valid JSON with readable indentation. A JSON validator only checks whether the input conforms to the JSON grammar and reports the line and character of any error. This tool does both, since it cannot format invalid input. For schema-level checks (required fields, types), use a JSON Schema validator instead.

Why does my diff show every array element as changed?

The diff compares arrays positionally by index, so inserting one item at the start shifts every later element and marks each as changed. If your data is set-like, sort both arrays by a stable key before pasting. For order-independent comparisons, run the arrays through sort_by(.id) in jq first.

Can I diff two large JSON files?

Yes, up to a few megabytes per side. The tool parses both payloads and renders every diff row in the DOM, so files in the tens of megabytes range can freeze the tab on older devices. For very large diffs, pre-filter to the subtree you care about and paste that.

What does the $ in the diff path mean?

The $ is JSONPath notation for the root of the document. A path like $.user.address.zip reads as “the zip key inside address inside user at the root.” You can paste these paths directly into jq with a small syntax change (.user.address.zip) or into any JSONPath library.

Does the formatter support JSON5 or JSON with comments?

No. The parser follows RFC 8259 strictly, which rejects comments, trailing commas, unquoted keys, and single quotes. If your input is JSON5 or JSONC, strip those features first or convert with a dedicated JSON5 parser before pasting.

Why does formatting fail silently sometimes?

The Format button is a no-op when the textarea contents are not valid JSON. This is intentional, so partial input is not destroyed mid-typing. If formatting does nothing, the input has a syntax error somewhere, usually a trailing comma or an unescaped quote inside a string.

Can I export the diff as a report?

Not directly. The diff renders as plain text rows, so you can select all and copy into a Markdown table, an issue tracker, or a Slack message. For automated reporting, the open-source json-diff  CLI emits structured output you can pipe to a file.

Related tools

• JSON Validator: Check JSON syntax and pinpoint the exact line of any error.
• JSON Minifier: Strip whitespace and compress JSON to its smallest form.
• JSON Compare: Deep-compare two JSON objects with a structured diff view.
• YAML Formatter: Pretty-print and validate YAML configuration files.