TPTruPDF

@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 segments

diffWords 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)

ExportPurpose
ComparePanelLegacy single-panel compare
CompareWorkspaceFull compare mode UI (mode="compare" on DocViewer)
SideBySideCompareTwo synced viewers with per-page text/visual highlights
OverlayCompareSingle viewport blending both documents
useSyncedViewers / useSyncedScrollKeep two engines' page/zoom/scroll in lockstep
useCompareHighlightsVisual-diff highlight state for a synced pair
useCompareTextHighlights / useCompareTextOverlay / useCompareOverlayText-diff + overlay state hooks

License gate

Every diff entry point calls gate.require('compare').