@trupdf/compare
Document compare — text + visual diff, plus the side-by-side and
overlay React workspaces (exported from @trupdf/core).
Text diff
import { diffWords, diffLines, changesOnly } from '@trupdf/compare';
const segments = diffWords('hello world', 'hello brave new world');
// [{ type: 'equal', text: 'hello' }, { type: 'insert', text: ' brave new' }, …]
changesOnly(segments); // strips equal segmentsdiffWords uses a custom token map so word boundaries align cleanly;
diffLines operates per-line for page-by-page outputs.
diffPositionedText(leftTokens, rightTokens) diffs position-carrying
tokens so changes can be highlighted at their exact page coordinates.
Visual diff
import { visualDiff, computeHighlightMask, composeImageOverlay } from '@trupdf/compare';
const out = visualDiff(leftCanvas, rightCanvas, {
threshold: 4,
contextOpacity: 0.15,
});
document.body.appendChild(out);Pixel-XOR with luminance-aware colouring:
- Blue — present only in
a(removed) - Red — present only in
b(added) - Greyscale low-opacity — unchanged
Throws on dimension mismatch.
computeHighlightMask produces a per-region change mask instead of a
composited canvas; composeImageOverlay blends both renders into one
tinted overlay canvas for the overlay view.
React surfaces (in @trupdf/core)
| Export | Purpose |
|---|---|
ComparePanel | Legacy single-panel compare |
CompareWorkspace | Full compare mode UI (mode="compare" on DocViewer) |
SideBySideCompare | Two synced viewers with per-page text/visual highlights |
OverlayCompare | Single viewport blending both documents |
useSyncedViewers / useSyncedScroll | Keep two engines' page/zoom/scroll in lockstep |
useCompareHighlights | Visual-diff highlight state for a synced pair |
useCompareTextHighlights / useCompareTextOverlay / useCompareOverlay | Text-diff + overlay state hooks |
License gate
Every diff entry point calls gate.require('compare').