Loading…

Diff Viewer

A diff you can style, and accept or reject hunk by hunk.

Data
2 files
1 npm package
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add diff-viewer

npm packages installed: diff.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

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

Examples

Every example the tests run, live and operable, side by side.

Default
Split
With Toolbar
Agent Proposal
Collapsed Context
Without Word Detail
No Changes
Wipe Entrance
Collapse Rejected

API

Generated from the component's own types, so a prop cannot appear here without existing.

<DiffViewer>

Prop	Type	Default
`hunks` (required)	`DiffHunk[]`	—
`label` (required) Names the diff — usually the path of the file being changed.	`string`	—
`collapseRejected` Collapse a rejected hunk's lines. Its header and controls stay, so the decision can still be reversed, and the header says the lines are hidden.	`boolean`	`false`
`decisions` Per-hunk decisions, keyed by hunk id. Controlled.	`Record<string, HunkDecision>`	—
`entrance` Entrance for added lines. `wipe` draws each one in along the reading direction, a line after the other; context and removed lines were already there and do not move.	`"none" \| "wipe"`	`"none"`
`onDecision`	`(hunkId: string, decision: HunkDecision) => void`	—
`view`	`"unified" \| "split"`	`"unified"`
`children`	`ReactNode`	—

Plus every attribute of <div> except children.

<DiffViewerToolbar>

Prop	Type	Default
`onViewChange` (required)	`(view: "unified" \| "split") => void`	—
`view` (required)	`"unified" \| "split"`	—

Plus every attribute of <div> except onChange.

Accessibility

A semantic table, not a grid. role="grid" would promise cell-by-cell arrow navigation that does not exist here and makes no sense for reading code. Every row states added, removed or unchanged in text, because a plus sign and a green tint are not information — a diff read aloud without it is just the same file twice. Line numbers are aria-hidden: they orient a sighted reader, and announcing two numbers before every line makes the diff unlistenable. Changed words are marked with mark elements so they survive as structure, and the empty half of a split pair is hidden rather than read as a blank line of code. The optional wipe entrance is visual only — every row is in the DOM and its kind text is never clipped from assistive technology. With collapseRejected, a rejected hunk's lines are inert and hidden, its header says so in words, and Accept stays available so the decision can be reversed.

Quality

Measured from the source and its tests at build time.

All scores

9/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — fails
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

hunks

DiffHunk[]

—

label

Names the diff — usually the path of the file being changed.

string

—

collapseRejected

Collapse a rejected hunk's lines. Its header and controls stay, so the decision can still be reversed, and the header says the lines are hidden.

boolean

false

decisions

Per-hunk decisions, keyed by hunk id. Controlled.

Record<string, HunkDecision>

—

entrance

Entrance for added lines. wipe draws each one in along the reading direction, a line after the other; context and removed lines were already there and do not move.

"none" | "wipe"

"none"

onDecision

(hunkId: string, decision: HunkDecision) => void

—

view

"unified" | "split"

"unified"

children

ReactNode

—

Prop

Type

Default

onViewChange

(view: "unified" | "split") => void

—

view

"unified" | "split"

—

1		−	Removed: export async function loadWorkspace(id: string) {
2		−	Removed: const response = await fetch(`/api/workspaces/${id}`);
	1	+	Added: export async function loadWorkspace(id: string, signal?: AbortSignal) {
	2	+	Added: const response = await fetch(`/api/workspaces/${id}`, { signal });
	3	+	Added: if (!response.ok) {
	4	+	Added: throw new WorkspaceError(response.status);
	5	+	Added: }
3	6		Unchanged: const workspace = await response.json();
4	7		Unchanged: return workspace;
5	8		Unchanged: }
6	9		Unchanged:
7	10		Unchanged: export function formatSeats(count: number) {
8		−	Removed: return count + " seats";
	11	+	Added: return count === 1 ? "1 seat" : `${count} seats`;
9	12		Unchanged: }

1		−	Removed: export async function loadWorkspace(id: string) {
2		−	Removed: const response = await fetch(`/api/workspaces/${id}`);
	1	+	Added: export async function loadWorkspace(id: string, signal?: AbortSignal) {
	2	+	Added: const response = await fetch(`/api/workspaces/${id}`, { signal });
	3	+	Added: if (!response.ok) {
	4	+	Added: throw new WorkspaceError(response.status);
	5	+	Added: }
3	6		Unchanged: const workspace = await response.json();
4	7		Unchanged: return workspace;
5	8		Unchanged: }
6	9		Unchanged:
7	10		Unchanged: export function formatSeats(count: number) {
8		−	Removed: return count + " seats";
	11	+	Added: return count === 1 ? "1 seat" : `${count} seats`;
9	12		Unchanged: }