Diff Viewer

theme.tstypescript+2−1

Original: complete design token configuration and historical palette notes

1	export const theme = {
2	name: "default",
3	contrast: 4.5,

4	};

Updated

1	export const theme = {
2	name: "bamboo",
3	contrast: 4.5,
4	focusContrast: 3,
5	};

Installation

bunx --bun shadcn@latest add @sui/diff-viewer

Install with the shadcn CLI or use the shared @workspace/ui package. Follow the installation guide to configure the registry, load styles, and choose import aliases.

Usage

import { DiffViewer } from "@workspace/ui/components/diff-viewer";

<DiffViewer
  oldCode={'const enabled = false;'}
  newCode={'const enabled = true;'}
  filename="settings.ts"
  lang="typescript"
/>;

The viewer starts with old and new code in side-by-side panes. Its view controls switch to a unified list. Added and removed lines retain distinct colors and line numbers. oldTitle, newTitle, and filename customize the headings. The comparison operates on lines rather than individual character changes.

Old and new sources are highlighted independently so multiline strings and comments keep each version's own syntax context. Unified unchanged lines use the new source context; split columns retain their respective source context.

Split headings stay on one line and truncate long titles, with the full text available on hover, so unequal headings cannot shift code rows. The first example pairs a long and short heading for narrow-screen comparison.

Use maxHeight to limit the scrolling viewport. The viewport is reachable with Tab and supports keyboard scrolling with a visible theme-colored focus ring.

Streaming revisions

Use status="streaming" while newCode is being assembled and "complete" when it finishes. It follows content near the bottom, pauses after you scroll away, and resumes when you return. The example appends a local JSON revision. Copying is disabled in this example with copyable={false}.

settings.jsonjson+15−2

Before

1	{
2	"name": "default",
3	"enabled": false













4	}

After

1	{
2	"name": "rose",
3	"enabled": true,
4	"item1": 1,
5	"item2": 2,
6	"item3": 3,
7	"item4": 4,
8	"item5": 5,
9	"item6": 6,
10	"item7": 7,
11	"item8": 8,
12	"item9": 9,
13	"item10": 10,
14	"item11": 11,
15	"item12": 12,
16	"version": 2
17	}

Copying and localization

The copy action copies newCode, not a patch or the old version. Highlighting is asynchronous and falls back to plain readable lines when it fails. The surrounding theme is used unless theme is provided. Translate labels for the two versions, view controls, status, and copy feedback.

API reference

Prop	Type	Default / behavior
`oldCode`, `newCode`	`string`	Required source versions.
`oldTitle`, `newTitle`	`string`	Optional version headings.
`filename`	`ReactNode`	Optional file heading.
`lang`	`string`	`"typescript"`.
`theme`	`"light" \| "dark"`	Follows surrounding theme.
`status`	`"streaming" \| "complete"`	`"complete"`.
`maxHeight`	`number`	`280` pixels.
`copyable`	`boolean`	`true`; copies new code.
`labels`	`Partial<DiffViewerLabels>`	English labels.
`glass`	`boolean`	`false`.

The module exports DiffViewerProps and DiffViewerLabels. The line comparison uses jsdiff.