JSON diff viewer

A React component in Beamline's Data & tables category.

Two versions of a JSON value compared as one tree: added keys marked +, removed ones struck through with −, changed values read old → new, unchanged keys folded into a count you can open; array items are matched by their id (not their place) so a reorder is not a hundred changes, a summary counts each kind, and the next and previous change are one key away; only the rows in view are drawn.

Use it for

Reviewing what changed in a configuration, a feature flag set, a record's history or a webhook payload between two versions.
An audit log entry or an agent's proposed change to structured settings, before it is applied.

Not for

Text or code changes line by line (file-diff).
Rows of a table about to change (diff-table).
Reading one JSON value (json-viewer).

Anatomy

toolbar: the summary (+ added, − removed, ~ changed, in words for assistive tech), Only changes switch, previous / next change, Copy path
tree: rows with a sign gutter (+ − ~), key, the value (changed: old struck → new), twisty for branches, a count of changes on a modified branch
unchanged keys of a branch folded into one row (“12 unchanged”) that opens them
footer: the active row's path

Variants

0: arrayKey: match array items by a field (default id when every item has one) or by place
1: only changes: unchanged keys folded (default) or shown
2: labels for the two sides: Before / After by default

States

no differences (said in words)
a branch added or removed whole (one row, opens to its contents)
a value whose type changed (object → string)
large values (virtualised)

Keyboard

The tree is one tab stop: ↑ ↓ move, → opens, ← closes or goes to the parent, Home / End
n and Shift+N (or the buttons) go to the next and previous change, opening the way to it
p copies the active row's path

Motion

Moving to a change scrolls it into view and its row lights once; opening a branch fades its rows in; the summary counts morph when the inputs change. Nothing moves at rest.

Props

Prop	Type	Default	Description
`before / after` (required)	`unknown`	—	The two versions.
`arrayKey`	`string \| ((item: unknown) => string) \| false`	—	How array items are matched; false matches by place.
`onlyChanges / defaultOnlyChanges / onOnlyChangesChange`	`boolean`	—	Fold unchanged keys. Default true.
`labels`	`{ before?: string; after?: string }`	—	Names of the two sides, used in the summary and spoken values.
`rootName`	`string`	—	What paths start with. Default $.
`height / maxHeight`	`number \| "fill" / number`	—	As json-viewer.
`aria-label` (required)	`string`	—	What is compared: "Billing settings".
`className / classNames / style`		—

Dependencies

@tanstack/react-virtual, lucide-react

Import

import { JsonDiffViewer } from "@/components/json-diff-viewer/json-diff-viewer";

Get it

JSON diff viewer is part of Beamline: 200+ components and 50+ complete screens for React that your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 launch price, one payment, no subscription, lifetime updates, one licence for your whole team. Get Beamline · Connect your agent