Diff

Line-level diff viewer with both unified and side-by-side (split) layouts. The diff is computed with a built-in LCS algorithm — no dependencies — and exposed as render parts you style yourself.

Features

Example

import { Diff } from '@wire-ui/react'
 
<Diff.Root oldValue={before} newValue={after}>
<Diff.Stats>
{({ additions, deletions }) => (
  <div>+{additions} −{deletions}</div>
)}
</Diff.Stats>
<Diff.Unified>
{({ line }) => (
  <div>{line.oldLine} {line.newLine} {line.content}</div>
)}
</Diff.Unified>
</Diff.Root>

import { Diff } from '@wire-ui/react'
 
const gutter = 'inline-block w-8 select-none px-2 text-right text-[#9ca3af]'
 
function lineClass(type) {
  if (type === 'insert') return 'bg-green-50 text-green-900'
  if (type === 'delete') return 'bg-red-50 text-red-900'
  return 'text-[#374151]'
}
 
function sign(type) {
  if (type === 'insert') return '+'
  if (type === 'delete') return '-'
  return ' '
}
 
<div className="w-full max-w-xl overflow-hidden rounded-[8px] border border-black bg-white font-mono text-xs">
  <Diff.Root oldValue={before} newValue={after}>
    <Diff.Unified>
      {({ line }) => (
        <div className={`flex whitespace-pre px-1 ${lineClass(line.type)}`}>
          <span className={gutter}>{line.oldLine ?? ''}</span>
          <span className={gutter}>{line.newLine ?? ''}</span>
          <span className="px-2">{sign(line.type)}</span>
          <span>{line.content}</span>
        </div>
      )}
    </Diff.Unified>
  </Diff.Root>
</div>

Split layout

Diff.Split pairs deletes and inserts into side-by-side rows. Each row provides an optional left (old) and right (new) DiffLine — either may be absent when one side has no counterpart.

<Diff.Split>
  {({ left, right }) => (
    <div className="grid grid-cols-2 divide-x divide-[#e5e7eb]">
      <div className={left ? lineClass(left.type) : 'bg-[#fafafa]'}>
        {left?.oldLine} {left?.content}
      </div>
      <div className={right ? lineClass(right.type) : 'bg-[#fafafa]'}>
        {right?.newLine} {right?.content}
      </div>
    </div>
  )}
</Diff.Split>

Styling

Diff ships no styles. Diff.Unified wraps each line in a data-diff-line element carrying data-type, and Diff.Split wraps each row in a data-diff-row element carrying data-left / data-right. Style the line/row wrappers — or branch on line.type inside the render function — to color insertions and deletions.

[data-diff-line][data-type="insert"] { background: #f0fdf4; }
[data-diff-line][data-type="delete"] { background: #fef2f2; }

Using data attributes

Diff.Unified renders a <div data-diff-view="unified"> whose children carry data-diff-line and data-type. Diff.Split renders a <div data-diff-view="split"> whose children carry data-diff-row, data-left, and data-right.

[data-diff-view="split"] [data-left="delete"]  { background: #fef2f2; }
[data-diff-view="split"] [data-right="insert"] { background: #f0fdf4; }

Root props

Root also accepts all standard div attributes (className, id, …).

Unified props

Split props

Stats props

Types

type DiffLineType = 'equal' | 'insert' | 'delete'
 
interface DiffLine {
  type: DiffLineType
  content: string   // line text, no trailing newline
  oldLine?: number  // 1-based line in the old text (absent for inserts)
  newLine?: number  // 1-based line in the new text (absent for deletes)
}
 
interface DiffRow {
  left?: DiffLine   // old side
  right?: DiffLine  // new side
}
 
interface DiffStats {
  additions: number
  deletions: number
}

Data attributes

Accessibility

Diff renders plain div elements with no interactive behavior — it is a presentational viewer. Provide your own semantics (for example, a caption naming the file being compared) when embedding it in a larger UI.