ui/components/diff-view

Diff View

Diff viewer with unified and side-by-side modes, five visual variants (hairline, bare, dense, viewfinder, statusbar), orthogonal density and palette axes, an opt-in vertical scroll wrapper, and a consumer-filled status-bar slot. Renders as a <figure> with accessible-name resolution via aria-labelledby (figcaption) or aria-label fallback, and exposes keyboard hunk navigation (j/k + Escape).

mode="split" renders two independently scrolling panes and needs roughly ≥640px of container width to stay readable. On narrow or coarse-pointer viewports prefer mode="unified", which soft-wraps long lines by default there (see wrap) instead of turning the diff into a horizontal filmstrip.

Preview

tsx

1 import { DiffView } from "@/components/ui/diff-view";2 3 const patch = `--- a/src/utils/score.ts4 +++ b/src/utils/score.ts5 @@ -1,7 +1,10 @@6  import type { Review } from "../types"7 8 -export function calculateScore(review: Review): number {9 -  return review.findings.length * 1010 +export function calculateScore(review: Review, weights: Record<string, number>): number {11 +  return review.findings.reduce((total, finding) => {12 +    const weight = weights[finding.severity] ?? 113 +    return total + weight14 +  }, 0)15  }16 17  export function isPassingScore(score: number): boolean {18 `;19 20 export default function DiffViewDefault() {21   return <DiffView patch={patch} />;22 }23

Installation

$pnpm exec dgadd add ui/diff-view

[Installs to]src/components/ui/diff-view[Item]ui/diff-view

dgadd is not public on npm yet. Until the first release, pack @diffgazer/add from the repository and install that tarball into this app, which is what puts dgadd on pnpm exec.

UI components require Tailwind CSS v4. Local copy mode imports src/styles/styles.css; package mode uses @diffgazer/ui CSS once packages are available.

Usage

tsx

1 import { DiffView } from "@/components/ui/diff-view";2 3 const patch = `--- a/src/utils/score.ts4 +++ b/src/utils/score.ts5 @@ -1,7 +1,10 @@6  import type { Review } from "../types"7 8 -export function calculateScore(review: Review): number {9 -  return review.findings.length * 1010 +export function calculateScore(review: Review, weights: Record<string, number>): number {11 +  return review.findings.reduce((total, finding) => {12 +    const weight = weights[finding.severity] ?? 113 +    return total + weight14 +  }, 0)15  }16 17  export function isPassingScore(score: number): boolean {18 `;19 20 export default function DiffViewDefault() {21   return <DiffView patch={patch} />;22 }23

Examples

Minimal

Preview

tsx

1 import { DiffView } from "@/components/ui/diff-view";2 3 const patch = `@@ -5,3 +5,3 @@4  const config = {5 -  theme: "light",6 +  theme: "dark",7  }`;8 9 export default function DiffViewMinimal() {10   return <DiffView patch={patch} />;11 }12

Hairline

Preview

tsx

1 import { DiffView } from "@/components/ui/diff-view";2 3 const patch = `--- a/src/utils/score.ts4 +++ b/src/utils/score.ts5 @@ -1,7 +1,10 @@6  import type { Review } from "../types"7 8 -export function calculateScore(review: Review): number {9 -  return review.findings.length * 1010 +export function calculateScore(review: Review, weights: Record<string, number>): number {11 +  return review.findings.reduce((total, finding) => {12 +    const weight = weights[finding.severity] ?? 113 +    return total + weight14 +  }, 0)15  }16 17  export function isPassingScore(score: number): boolean {18 `;19 20 export default function DiffViewHairline() {21   return <DiffView patch={patch} variant="hairline" />;22 }23

Bare

Preview

tsx

1 import { DiffView } from "@/components/ui/diff-view";2 3 const patch = `@@ -5,3 +5,3 @@4  const config = {5 -  theme: "light",6 +  theme: "dark",7  }`;8 9 export default function DiffViewBare() {10   return <DiffView patch={patch} variant="bare" />;11 }12

Dense

Preview

tsx

1 import { DiffView } from "@/components/ui/diff-view";2 3 const patch = `--- a/src/utils/score.ts4 +++ b/src/utils/score.ts5 @@ -1,7 +1,10 @@6  import type { Review } from "../types"7 8 -export function calculateScore(review: Review): number {9 -  return review.findings.length * 1010 +export function calculateScore(review: Review, weights: Record<string, number>): number {11 +  return review.findings.reduce((total, finding) => {12 +    const weight = weights[finding.severity] ?? 113 +    return total + weight14 +  }, 0)15  }16 17  export function isPassingScore(score: number): boolean {18 `;19 20 export default function DiffViewDense() {21   return <DiffView patch={patch} variant="dense" mode="split" />;22 }23

Viewfinder

Preview

tsx

1 import { DiffView } from "@/components/ui/diff-view";2 3 const patch = `--- a/src/utils/score.ts4 +++ b/src/utils/score.ts5 @@ -1,7 +1,10 @@6  import type { Review } from "../types"7 8 -export function calculateScore(review: Review): number {9 -  return review.findings.length * 1010 +export function calculateScore(review: Review, weights: Record<string, number>): number {11 +  return review.findings.reduce((total, finding) => {12 +    const weight = weights[finding.severity] ?? 113 +    return total + weight14 +  }, 0)15  }16 17  export function isPassingScore(score: number): boolean {18 `;19 20 export default function DiffViewViewfinder() {21   return <DiffView patch={patch} variant="viewfinder" />;22 }23

Status bar

Preview

tsx

1 import { DiffView } from "@/components/ui/diff-view";2 import { Kbd } from "@/components/ui/kbd";3 4 const patch = `--- a/src/utils/score.ts5 +++ b/src/utils/score.ts6 @@ -1,7 +1,10 @@7  import type { Review } from "../types"8 9 -export function calculateScore(review: Review): number {10 -  return review.findings.length * 1011 +export function calculateScore(review: Review, weights: Record<string, number>): number {12 +  return review.findings.reduce((total, finding) => {13 +    const weight = weights[finding.severity] ?? 114 +    return total + weight15 +  }, 0)16  }17 18  export function isPassingScore(score: number): boolean {19 `;20 21 export default function DiffViewStatusbar() {22   return (23     <DiffView24       patch={patch}25       variant="statusbar"26       // statusBar is a headless slot — the consumer owns styling and content.27       statusBar={28         <div className="flex items-center justify-between gap-4">29           {/* The diff palette anchors are inherited from the DiffView root, so the30               summary counters carry the same add/remove signal as the rows. */}31           <span className="flex items-center gap-2">32             <span className="font-bold text-(--diff-color-add)">+5</span>33             <span className="font-bold text-(--diff-color-remove)">−2</span>34             <span>· 1 hunk</span>35           </span>36           <span className="flex items-center gap-2">37             <Kbd size="sm">j</Kbd>38             <Kbd size="sm">k</Kbd>39             <span>navigate</span>40           </span>41         </div>42       }43     />44   );45 }46

Palette: Okabe–Ito

Preview

tsx

1 import { DiffView } from "@/components/ui/diff-view";2 3 const patch = `--- a/src/utils/score.ts4 +++ b/src/utils/score.ts5 @@ -1,7 +1,10 @@6  import type { Review } from "../types"7 8 -export function calculateScore(review: Review): number {9 -  return review.findings.length * 1010 +export function calculateScore(review: Review, weights: Record<string, number>): number {11 +  return review.findings.reduce((total, finding) => {12 +    const weight = weights[finding.severity] ?? 113 +    return total + weight14 +  }, 0)15  }16 17  export function isPassingScore(score: number): boolean {18 `;19 20 export default function DiffViewPaletteOkabeIto() {21   return <DiffView patch={patch} palette="okabe-ito" />;22 }23

Max height (V-scroll)

Preview

tsx

1 import { DiffView } from "@/components/ui/diff-view";2 3 const patch = `--- a/src/server/review-pipeline.ts4 +++ b/src/server/review-pipeline.ts5 @@ -1,29 +1,44 @@6 -import { parseDiff } from "@/lib/diff"7 -import type { Review, Finding } from "../types"8 +import { parseDiff, annotateWordDiff } from "@/lib/diff"9 +import type { Review, Finding, ReviewOptions } from "../types"10 +import { loadRules } from "./rules"11 12 -export async function runReview(patch: string): Promise<Review> {13 +export async function runReview(patch: string, options: ReviewOptions = {}): Promise<Review> {14 +  const rules = await loadRules(options.rulesPath)15    const parsed = parseDiff(patch)16    const findings: Finding[] = []17 18    for (const file of parsed.files) {19 -    for (const hunk of file.hunks) {20 -      for (const change of hunk.changes) {21 -        if (change.type !== "add") continue22 -        if (change.content.includes("TODO")) {23 -          findings.push({24 -            file: file.newPath,25 -            line: change.newLine,26 -            severity: "warning",27 -            message: "TODO comment in added code",28 -          })29 -        }30 -      }31 -    }32 +    const fileFindings = await reviewFile(file, rules)33 +    findings.push(...fileFindings)34    }35 36 -  return { findings, score: findings.length }37 +  return { findings, score: scoreFindings(findings, rules) }38  }39 40 -export function isPassingScore(score: number): boolean {41 -  return score < 542 +async function reviewFile(file: ParsedFile, rules: Rule[]): Promise<Finding[]> {43 +  const results: Finding[] = []44 +  for (const hunk of file.hunks) {45 +    const annotated = annotateWordDiff(hunk.changes)46 +    for (const change of annotated) {47 +      if (change.type !== "add") continue48 +      for (const rule of rules) {49 +        const hit = rule.check(change.content)50 +        if (!hit) continue51 +        results.push({52 +          file: file.newPath,53 +          line: change.newLine,54 +          severity: rule.severity,55 +          message: hit.message,56 +        })57 +      }58 +    }59 +  }60 +  return results61 +}62 +63 +function scoreFindings(findings: Finding[], rules: Rule[]): number {64 +  return findings.reduce((total, finding) => {65 +    const weight = rules.find((r) => r.id === finding.ruleId)?.weight ?? 166 +    return total + weight67 +  }, 0)68  }69 `;70 71 export default function DiffViewMaxHeight() {72   return <DiffView patch={patch} maxHeight="240px" />;73 }74

Split mode

Preview

tsx

1 import { DiffView } from "@/components/ui/diff-view";2 3 const patch = `--- a/src/utils/score.ts4 +++ b/src/utils/score.ts5 @@ -1,7 +1,10 @@6  import type { Review } from "../types"7 8 -export function calculateScore(review: Review): number {9 -  return review.findings.length * 1010 +export function calculateScore(review: Review, weights: Record<string, number>): number {11 +  return review.findings.reduce((total, finding) => {12 +    const weight = weights[finding.severity] ?? 113 +    return total + weight14 +  }, 0)15  }16 17  export function isPassingScore(score: number): boolean {18 `;19 20 export default function DiffViewSplit() {21   return <DiffView patch={patch} mode="split" />;22 }23

Line numbers

Preview

tsx

1 import { DiffView } from "@/components/ui/diff-view";2 3 const patch = `--- a/src/utils/score.ts4 +++ b/src/utils/score.ts5 @@ -1,7 +1,10 @@6  import type { Review } from "../types"7 8 -export function calculateScore(review: Review): number {9 -  return review.findings.length * 1010 +export function calculateScore(review: Review, weights: Record<string, number>): number {11 +  return review.findings.reduce((total, finding) => {12 +    const weight = weights[finding.severity] ?? 113 +    return total + weight14 +  }, 0)15  }16 17  export function isPassingScore(score: number): boolean {18 `;19 20 export default function DiffViewLineNumbers() {21   return (22     <div className="flex w-full min-w-0 flex-col gap-4">23       {/* Numbers ship on: the product addresses every finding as file:line. */}24       <DiffView patch={patch} />25       <DiffView patch={patch} mode="split" />26       {/* Opting out is the rarer case, so it is the explicit one. */}27       <DiffView patch={patch} showLineNumbers={false} />28     </div>29   );30 }31

File stat

Preview

tsx

1 import { DiffView } from "@/components/ui/diff-view";2 3 const patch = `--- a/src/utils/score.ts4 +++ b/src/utils/score.ts5 @@ -1,5 +1,8 @@6  import type { Review } from "../types"7 8 -export function calculateScore(review: Review): number {9 -  return review.findings.length * 1010 +export function calculateScore(review: Review, weights: Record<string, number>): number {11 +  return review.findings.reduce((total, finding) => {12 +    const weight = weights[finding.severity] ?? 113 +    return total + weight14 +  }, 0)15  }16 `;17 18 export default function DiffViewStat() {19   return (20     <div className="flex w-full min-w-0 flex-col gap-4">21       {/* The counts are on by default; the path yields width before they do. */}22       <DiffView patch={patch} />23       <DiffView patch={patch} stat={false} />24     </div>25   );26 }27

Wrapping long lines

Preview

tsx

1 import { DiffView } from "@/components/ui/diff-view";2 3 const patch = `--- a/src/utils/score.ts4 +++ b/src/utils/score.ts5 @@ -1,4 +1,4 @@6  import type { Review } from "../types"7 8 -export function calculateScore(review: Review): number {9 +export function calculateScore(review: Review, weights: Record<string, number>, fallbackWeight = 1): number {10  }11 `;12 13 export default function DiffViewWrap() {14   return (15     <div className="flex w-full min-w-0 max-w-md flex-col gap-4">16       {/* Long lines soft-wrap with a 2ch hanging indent, so the gutter still17           reads as a column and there is nothing to drag sideways. */}18       <DiffView patch={patch} wrap />19       {/* The same diff as a filmstrip, for comparison. */}20       <DiffView patch={patch} wrap={false} />21     </div>22   );23 }24

Before / after compare

Preview

tsx

1 import { DiffView } from "@/components/ui/diff-view";2 3 const before = `import type { Review } from "../types"4 5 export function calculateScore(review: Review): number {6   return review.findings.length * 107 }8 9 export function isPassingScore(score: number): boolean {10   return score >= 7011 }`;12 13 const after = `import type { Review } from "../types"14 15 export function calculateScore(review: Review, weights: Record<string, number>): number {16   return review.findings.reduce((total, finding) => {17     const weight = weights[finding.severity] ?? 118     return total + weight19   }, 0)20 }21 22 export function isPassingScore(score: number): boolean {23   return score >= 7024 }`;25 26 export default function DiffViewCompare() {27   return <DiffView before={before} after={after} mode="split" />;28 }29

Header caption with a custom accessible name

Preview

tsx

1 import { DiffView } from "@/components/ui/diff-view";2 3 const patch = `--- a/src/utils/score.ts4 +++ b/src/utils/score.ts5 @@ -1,7 +1,10 @@6  import type { Review } from "../types"7 8 -export function calculateScore(review: Review): number {9 -  return review.findings.length * 1010 +export function calculateScore(review: Review, weights: Record<string, number>): number {11 +  return review.findings.reduce((total, finding) => {12 +    const weight = weights[finding.severity] ?? 113 +    return total + weight14 +  }, 0)15  }16 17  export function isPassingScore(score: number): boolean {18 `;19 20 export default function DiffViewWithHeader() {21   return <DiffView patch={patch} aria-label="Score helper diff" mode="split" showLineNumbers />;22 }23

API Reference

DiffView

Name	Type	Default	Description
patch	string	—	Unified diff string.
before	string	—	Old text. Pair with `after` to let DiffView compute the diff via LCS. The LCS table is capped at 250,000 cells (about 499 lines per side), past which the comparison degrades to a whole-file rewrite; supply `patch` or `diff` for larger inputs.
after	string	—	New text. Pair with `before`.
diff	ParsedDiff	—	Pre-parsed diff data, useful when displaying one file out of a multi-file parseDiff() result.
variant	"hairline" \| "bare" \| "dense" \| "viewfinder" \| "statusbar"	"hairline"	Visual variant. "hairline" (default) is the dashboard-safe bordered look. "bare" removes chrome and renders a 2px left rule; the figcaption is suppressed. "dense" tightens typography and adds visible number-column dividers. "viewfinder" renders four bracketed corners. "statusbar" reveals the bottom statusBar slot.
density	"compact" \| "default" \| "comfortable"	"default" (or "compact" when variant="dense")	Vertical density. Surfaces as data-density on the figure. Orthogonal to variant; variant="dense" defaults this to "compact" unless overridden.
palette	"default" \| "okabe-ito"	"default"	Color palette for added/removed rows. "okabe-ito" overrides --diff-color-add/--diff-color-remove with a colorblind-safe pair. Surfaces as data-diff-palette on the figure.
mode	"unified" \| "split"	"unified"	Inline unified view or side-by-side split panes (Old / New).
showLineNumbers	boolean	true (false when variant="bare")	Renders line-number gutters. Surfaces as data-line-numbers on the rows container. On by default because every finding in this domain is addressed as file:line; the numbers are user-select: none, so copying a diff still yields clean code.
stat	boolean	true	Renders the +adds −removes readout at the end of the figcaption. A diff with no add/remove changes renders nothing either way.
wrap	boolean	CSS-owned: wraps under 40rem or on coarse pointers	Soft-wraps long code lines with a hanging indent instead of scrolling them horizontally. Leave unset to keep the responsive default.
disableWordDiff	boolean	false	Disables intra-line word-level highlighting on added/removed rows.
maxHeight	string	—	CSS length applied to an opt-in vertical scroll wrapper. When set, the rows container gets a fixed max-height and a y-axis scrollbar via the --diff-view-max-h CSS variable.
statusBar	ReactNode	—	Headless bottom slot rendered when variant="statusbar". Fill with whatever your app needs (diff stats, Kbd hints, actions). Omit to suppress the slot entirely.
label	string	"Diff output"	Fallback accessible name applied as aria-label when no native ARIA name or figcaption names the figure (variant="bare" or a patch without paths).
regionLabel	string	"Unified diff" / "Split diff"	Accessible name for the focusable inner rows region. Defaults to "Unified diff" in unified mode and "Split diff" in split mode.
oldSideLabel	string	"Old"	Accessible name for the split-mode old side group.
newSideLabel	string	"New"	Accessible name for the split-mode new side group.
emptyLabel	string	"No changes"	Text for the role="status" empty state when the diff has no hunks.
addedLineLabel	string	"Added: "	Screen-reader-only prefix announced before each added line.
removedLineLabel	string	"Removed: "	Screen-reader-only prefix announced before each removed line.
className	string	—	Additional class names merged onto the root <figure>.
ref	Ref<HTMLElement>	—	Ref to the root <figure> element.

Data attributes

Attribute	Applies to	Values	Description
data-state	[data-row]	"added" \| "removed" \| "context" \| "hunk" \| "empty"	Per-change row state used for row tint, marker color, and hunk styling.
data-word	word-diff spans	"added" \| "removed"	Marks intra-line changed slices for strong-tier word highlighting.
data-variant	DiffView	"hairline" \| "bare" \| "dense" \| "viewfinder" \| "statusbar"	Visual chrome variant on the figure.
data-density	DiffView	"compact" \| "default" \| "comfortable"	Vertical density axis on the figure.
data-diff-palette	DiffView	"default" \| "okabe-ito"	Palette axis that can override diff add/remove color anchors.
data-mode	DiffView	"unified" \| "split"	Rendering mode serialized on the root figure.
data-line-numbers	DiffView rows	"true" \| "false"	Whether the rows container renders visible line-number gutters.
data-highlighted	hunk rows	present when active	Marks the currently keyboard-highlighted hunk.
data-wrap	DiffView	"on" \| "off", absent when CSS owns the default	Forces or opts out of soft wrapping for long code lines.
data-empty	DiffView empty band	present when the diff has no hunks	Enables the hatched empty-state material.
data-max-h	DiffView	present when maxHeight is set	Enables the vertical scroll wrapper styling.

CSS variables

Name	Default	Description
--diff-view-max-h	component-defined	CSS length used by the optional vertical scroll wrapper.
--diff-hatch	component-defined	Shared 135° hatch used by both the unmatched split-pane filler and the empty band.
--diff-color-add	component-defined	Diff-only anchor color for added-line tints.
--diff-color-remove	component-defined	Diff-only anchor color for removed-line tints.
--diff-color-hunk	component-defined	Diff-only anchor color for hunk-header tints.

Accessibility

Keyboard Navigation

When the rows container is focused, j moves to the next hunk and k moves to the previous one, while Home and End jump to the first and last hunk instead of scrolling the container natively. Navigation does not wrap. Escape clears the active hunk. The active hunk is highlighted with an inset ring and announced via an aria-live region.

Key	Action
j	Moves to the next hunk.
k	Moves to the previous hunk.
Home	Jumps to the first hunk.
End	Jumps to the last hunk.
Escape	Clears the active hunk highlight.

Notes

Requires @diffgazer/keys (package mode)

DiffView's keyboard hunk navigation (j/k + Escape) imports from the required @diffgazer/keys peer. Package consumers must install @diffgazer/keys with @diffgazer/ui; packages are not yet published to npm, so until the first release install both from locally packed tarballs. Importing @diffgazer/ui/components/diff-view without keys fails at module load with an error naming the missing @diffgazer/keys package. Copy/dgadd consumers do not need the package — copy mode rewrites the keyboard hooks to local source.

Variants

variant="hairline" (default) is the dashboard-grade safe default with a 1px soft border. variant="bare" removes all chrome and renders a 2px left rule that turns accent on hover; the figcaption is suppressed. variant="dense" tightens typography and adds visible dividers between number columns for Gerrit/Reviewable-style review density. variant="viewfinder" renders four bracketed corners for the diff family-consistent inspection language. variant="statusbar" renders a hairline top + content + an optional consumer-filled bottom slot. All variant chrome is driven by [data-variant] selectors in diff-view/diff-view.css.

Inputs

DiffView accepts one of three inputs: a unified diff string (`patch`), before/after raw text (`before`+`after`, computed via LCS), or pre-parsed data (`diff: ParsedDiff`). For multi-file diffs use parseDiff() externally and render one DiffView per file with the `diff` prop.

Accessible Name

Precedence: explicit `aria-labelledby` > explicit `aria-label` > figcaption (when a file label can be derived and variant !== "bare") > `label` prop > "Diff output". An explicit ARIA name leaves the visible figcaption in place but suppresses its generated aria-labelledby. variant="bare" suppresses the figcaption, so `label` becomes the figure name unless native ARIA props override it.

Line States

Each change row exposes a semantic row state on a data-row span. Row tints, marker color, and the strong-tier word-diff overlay derive from public data attributes and diff-only CSS variables, so no inline styles are emitted.

Density and Palette

density ("compact" | "default" | "comfortable") and palette ("default" | "okabe-ito") are orthogonal axes that compose with any variant. variant="dense" defaults density to "compact"; pass an explicit `density` to override. palette="okabe-ito" swaps to a colorblind-safe pair via --diff-color-add/--diff-color-remove overrides on the figure.

Word Diff

Intra-line word highlighting is enabled by default — changed slices on add/remove rows are wrapped in <span data-word="added|removed"> and tinted with the strong-tier overlay. Disable per-line word annotation with `disableWordDiff`.

Wrapping

Long code lines soft-wrap with a 2ch hanging indent instead of scrolling sideways: the gutter and marker stay pinned to the first visual line, and the row tint paints the full wrapped height. The default is owned by CSS — containers under 40rem and coarse pointers wrap, wider pointer-fine containers keep the filmstrip — so a phone gets wrapping without the consumer knowing the prop exists. Pass `wrap` or `wrap={false}` to force either state; the prop surfaces as data-wrap="on" / "off" and its absence is what hands the decision to CSS. Wrapping is pure geometry: no colors, no motion, and copy still yields the original line because text-indent is not copied.

File Stat

The figcaption ends with a `+adds −removes` readout parsed from the hunks, matching how the product writes change size everywhere else. It is on by default (`stat={false}` opts out) and renders nothing for a diff with no add/remove changes. At any width the PATH truncates and the stat does not: an ellipsised path is honest, "+7 −" is a lie. A visually-hidden sibling carries "N additions, N deletions" so the figure's accessible name reads as prose instead of punctuation.

Empty State

A diff with no hunks renders its role="status" band on the same 135° hatch an unmatched split pane uses, with the label knocked out on top — one material for absence across the whole component. variant="bare" keeps the plain label, and forced-colors falls back to a dashed GrayText border.

Vertical Scroll

Pass a CSS length to `maxHeight` to opt into a vertical scroll wrapper around the rows container. The figure sets the --diff-view-max-h CSS variable and `data-max-h`; the shared CSS pins the scroll wrapper height and renders a thin scrollbar. Horizontal scroll still works per-row independently.

Status Bar Slot

variant="statusbar" reveals a headless bottom slot the consumer fills via the `statusBar` prop. The primitive deliberately ships no hard-coded kbd hints, no stats summary, and no copy — render whatever your app needs (diff stats, Kbd hints, action buttons). When `statusBar` is omitted the slot is not rendered at all.

Standalone Utilities

The pure diff functions (parseDiff, computeDiff, resolveDiffInput) and types (ParsedDiff, DiffHunk, DiffChange, ChangeType, DiffInput) are re-exported from the same module so consumers can compose with the primitive or use the diff utilities standalone.

Source

Install via CLI: pnpm exec dgadd add ui/diff-view. Keyboard hooks are included as standalone copies. For the full experience, use --integration keys.

Highlighted source loads after this disclosure opens. Browse the source repository.

Diff View

Installation

Usage

Examples

Minimal

Hairline

Bare

Dense

Viewfinder

Status bar

Palette: Okabe–Ito

Max height (V-scroll)

Split mode

Line numbers

File stat

Wrapping long lines

Before / after compare

Header caption with a custom accessible name

API Reference

DiffView

Data attributes

CSS variables

Accessibility

Keyboard Navigation

Notes

Requires @diffgazer/keys (package mode)

Variants

Inputs

Accessible Name

Line States

Density and Palette

Word Diff

Wrapping

File Stat

Empty State

Vertical Scroll

Status Bar Slot

Standalone Utilities

Source

View component source (26 files)