Preview Updated 2026-05-10

JsonDiff

Line-level LCS diff between two JSON values; tinted by add / del / eq, like git diff.

Basic usage

CfJsonDiff runs JSON.stringify on left / right to produce two multi-line strings, then computes a longest-common-subsequence diff.

Added line: green background, + prefix
Removed line: red background, - prefix
Common line: transparent background, prefix

Suited to config version comparison, audit diffs, and API response replay.

1 {
2-  "name": "ChuFix",
3-  "version": "0.1.0",
4+  "name": "ChuFix UI",
5+  "version": "0.2.0",
6   "features": [
7     "theme",
8-    "density"
9-  ]
10+    "density",
11+    "i18n"
12+  ],
13+  "beta": false
14 }

<CfJsonDiff :left="left" :right="right" />

<CfJsonDiff left={left} right={right} />

Hide line numbers

Line numbers are on by default. In embedded docs or comment threads they can be noisy — turn them off and keep just the diff text.

 {
   "user": {
     "id": "u_001",
-    "plan": "free"
+    "plan": "pro",
+    "renewedAt": "2026-05-01"
   },
   "settings": {
-    "theme": "dark",
+    "theme": "light",
     "density": "comfortable"
   }
 }

<CfJsonDiff :left="before" :right="after" :line-numbers="false" />

<CfJsonDiff left={before} right={after} lineNumbers={false} />

Sizes

Three font sizes consistent with the rest of the JSON family.

size = sm

1 {
2   "id": 1,
3-  "status": "pending"
4+  "status": "approved",
5+  "approvedBy": "admin"
6 }

size = md

1 {
2   "id": 1,
3-  "status": "pending"
4+  "status": "approved",
5+  "approvedBy": "admin"
6 }

size = lg

1 {
2   "id": 1,
3-  "status": "pending"
4+  "status": "approved",
5+  "approvedBy": "admin"
6 }

<CfJsonDiff :left="left" :right="right" size="sm" />
<CfJsonDiff :left="left" :right="right" size="md" />
<CfJsonDiff :left="left" :right="right" size="lg" />

<CfJsonDiff left={left} right={right} size="sm" />
<CfJsonDiff left={left} right={right} size="md" />
<CfJsonDiff left={left} right={right} size="lg" />

API

Prop	Type	Default	Description
`left`	`unknown`	`—`	Old value, rendered as removed lines
`right`	`unknown`	`—`	New value, rendered as added lines
`lineNumbers`	`boolean`	`true`	Show line numbers
`bordered`	`boolean`	`true`	Border
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Font size
`className`	`string`	`—`	Forwarded to root `<pre>`

Type exports:

type DiffOp = 'eq' | 'add' | 'del';
interface DiffLine { op: DiffOp; text: string; depth: number; }