Diff

A diff viewer component for Ink 5 showing text differences with add/remove colouring. Supports unified and side-by-side (split) modes. Zero external dependencies — implements a simple LCS-based diff algorithm inline.

Install

npm install @matthesketh/ink-diff

Peer dependencies: ink >= 5.0.0, react >= 18.0.0

Usage

import React from 'react';
import { render } from 'ink';
import { DiffViewer } from '@matthesketh/ink-diff';

const oldText = `function greet() {
  return "hello";
}`;

const newText = `function greet() {
  return "hello, world";
}`;

render(
  <DiffViewer
    oldText={oldText}
    newText={newText}
    oldLabel="before"
    newLabel="after"
  />
);

Props

Prop	Type	Default	Description
oldText	string	(required)	The original text
newText	string	(required)	The updated text
mode	'unified' | 'split'	'unified'	Display mode
context	number	3	Lines of context around changes
oldLabel	string	-	Label for the old text (e.g. “before”)
newLabel	string	-	Label for the new text (e.g. “after”)
maxHeight	number	-	Maximum number of lines to display

Modes

Unified

Shows all lines in a single column with + (green) for additions and - (red) for removals. Line numbers for both old and new files shown on the left.

Split

Two columns side by side. Removed lines highlighted red on the left, added lines highlighted green on the right.

Exports

• DiffViewer — the React component
• DiffViewerProps — TypeScript interface for props
• diffLines(oldLines, newLines) — the underlying diff algorithm
• applyContext(lines, context) — filter diff output to context lines
• DiffLine — type for diff result entries

License

MIT