How to Compare Two PDF Files with Character-Level Diff in Browser

TLDR

Comparing document versions by reading line-by-line leads to missed edits in contract clauses, numerical schedules, and legal disclosures. Online PDF diff services often require uploading files to third-party servers. GINEXYS PDF Processor provides synchronized side-by-side PDF rendering with character-level diff highlighting, allowing you to compare two documents locally inside your web browser.

The Search Query: Local Synchronized PDF Comparison

Developers search for:

• "compare two pdf files side by side javascript browser"
• "character level pdf diff tool open source local"
• "visual pdf comparison synchronized scroll client side"

How Synchronized Viewport Lock Works

PDF Processor pairs two rendered canvas viewports side-by-side. When you scroll or zoom on the left pane, the right pane mirrors the movement automatically using normalized coordinate ratios.

// Synchronized viewport scroll handler in comparePanel.js
leftViewport.on('scroll', () => {
    const scrollRatioY = leftViewport.scrollTop / leftViewport.scrollHeight;
    const scrollRatioX = leftViewport.scrollLeft / leftViewport.scrollWidth;
rightViewport.scrollTop  = scrollRatioY * rightViewport.scrollHeight;     rightViewport.scrollLeft = scrollRatioX * rightViewport.scrollWidth; });

Rule of thumb: lock scroll viewports using normalized percentage ratios rather than pixel offsets when comparing documents with minor height differences.

Character-Level vs Word-Level Diff Modes

You can toggle between two diff granularities depending on your audit requirements:

// Diff calculation signature
import { computePdfDiff } from '../ui/comparePanel.js';
const stats = computePdfDiff(originalTextTokens, updatedTextTokens, {     mode: 'character', // 'character' or 'word'     ignoreWhitespace: true });
console.log(Additions: ${stats.additions.length}, Deletions: ${stats.deletions.length});

Highlight Rendering Over Page Coordinates

Extracted text tokens preserve bounding boxes ([x, y, w, h]). Additions are rendered in green (rgba(34,197,94,0.3)) and deletions in red (rgba(239,68,68,0.3)) directly over the document canvas.

Conclusion

Local character-level diffing delivers absolute precision for legal and financial audit workflows while keeping documents 100% private.