build69
Sign inGet API key
build69  /  Components  /  Data Display  /  DiffViewer

DiffViewer

v1.0.1NewUpdated 18 Jul 2026

Dependency-free text diff viewer: line-level Myers (linear space) with word-level refinement inside changed line pairs. Unified (inline) and side-by-side (split) modes, collapsible unchanged context with keyboard-operabl

View source← Back to catalog

Preview

Live · 12 stories
InlineOpen ↗
▸Why this is recommendeddiffcompareauditversioning+4

DiffViewer — inline.

Recommended for+14
  • ✓Quotation / invoice revision review
  • ✓Audit-log detail panes
  • ✓Draft vs published content comparison
  • ✓Config or template change approval
Tags+6
diffcompareauditversioningchangestextmyersinline
Features+4
  • Myers linear-space line diff with word-level refinement
  • Inline (unified) and split (side-by-side) modes
  • Context folding with expandable unchanged-run separators
  • Controlled + uncontrolled fold expansion
  • Line numbers, +/- markers, added/removed counts
  • Focusable labelled scroll region (maxHeight)
  • Input capped at 20,000 lines per side with truncation notice
  • FieldDiff companion for audit-log field changes
  • Added/removed surfaces from success/danger soft tokens only
  • i18n: shared labels prop on DiffViewer + FieldDiff overrides every built-in string; line counts format via LocaleProvider (DEFAULT_DIFF_VIEWER_LABELS)
Not recommended for−2
  • ✕Rich-text visual diffing (renders plain text)
  • ✕Binary or image comparison
  • ✕Editing content (read-only display)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "DiffViewer" })

Usage

import { DiffViewer, FieldDiff } from '@/components/data-display/diff-viewer';

<DiffViewer oldValue={termsV1} newValue={termsV2} mode="split" context={3} maxHeight={360} />
<FieldDiff rows={[{ field: 'Due date', before: '2026-06-20', after: '2026-07-05' }]} />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
oldValue

Original text

stringyes
newValue

Updated text

stringyes
mode

Unified or side-by-side layout

'inline' | 'split'—
oldLabel

Header label for the original side

ReactNode—
newLabel

Header label for the updated side

ReactNode—
context

Unchanged lines kept around changes; longer runs fold

number—
showLineNumbers

Show line-number gutters

boolean—
maxHeight

Max height of the scrollable diff area

number | string—
size

Typography scale

'sm' | 'md'—
expandedFolds

Controlled expanded fold ids

number[]—
onExpandedFoldsChange

Fold expansion callback

(expanded: number[]) => void—
labels

Override built-in UI strings of DiffViewer AND FieldDiff (fold rows, truncation notice, region labels, sr line prefixes, FieldDiff headers/status badges/not set) for i18n; English defaults exported as DEFAULT_DIFF_VIEWER_LABELS. Counts format via LocaleProvider

Partial<DiffViewerLabels>—

Related

Platform docsAll componentsSource files