PDF Diff

Overview

PDF Diff is a web application that enables visual comparison of PDF documents. Built for creative and print production teams who need to verify changes between document versions, it renders PDFs side-by-side and highlights differences at the pixel level.

The Challenge

In print production and creative workflows, catching differences between PDF versions is critical:

• Text changes can be subtle but significant
• Color shifts might indicate printing issues
• Layout changes need verification before approval
• Manual comparison is time-consuming and error-prone

Existing tools were either expensive enterprise solutions or lacked the precision needed for professional use.

Solution

A lightweight, browser-based tool that:

• Renders PDFs entirely client-side (no server uploads)
• Compares pages visually at configurable resolutions
• Highlights differences with adjustable sensitivity
• Works offline as a PWA
• Handles large documents efficiently

Technical Implementation

PDF Rendering

Using Mozilla's PDF.js library for accurate rendering:

// Render PDF page to canvas at specified scale
const renderPage = async (pdf: PDFDocument, pageNum: number, scale: number) => {
  const page = await pdf.getPage(pageNum)
  const viewport = page.getViewport({ scale })

  const canvas = document.createElement('canvas')
  canvas.width = viewport.width
  canvas.height = viewport.height

  await page.render({
    canvasContext: canvas.getContext('2d'),
    viewport
  }).promise

  return canvas
}

Difference Detection

Pixel-by-pixel comparison with configurable thresholds:

• Convert pages to ImageData
• Compare RGB values with tolerance
• Generate difference overlay
• Highlight changed regions

State Management

Pinia stores manage:

• Document state (loaded PDFs, current pages)
• Comparison settings (sensitivity, overlay mode)
• UI preferences (zoom level, view mode)

Key Features

Side-by-Side View

Compare two PDF versions with synchronized scrolling and zoom.

Difference Overlay

Toggle between showing differences highlighted in red or as a blended overlay.

Page Navigation

Quick navigation with thumbnail strip and keyboard shortcuts.

Adjustable Sensitivity

Fine-tune the comparison threshold to ignore minor rendering differences.

PWA Support

Install as a desktop app for offline use. Documents never leave your device.

Technical Stack

• Nuxt 3 for SSG and optimal loading performance
• PDF.js 4.x for accurate PDF rendering
• Pinia for reactive state management
• Nuxt UI for consistent, accessible components
• Vitest for comprehensive testing
• Husky + lint-staged for code quality

Performance Considerations

PDF comparison is computationally intensive. Optimizations include:

• Web Workers for off-main-thread processing
• Canvas pooling to reduce memory churn
• Lazy loading of pages not in view
• Efficient diff algorithms for large documents

Results

• Processes 100+ page documents smoothly
• Zero server dependencies - complete privacy
• Sub-second comparison for typical documents
• Works on tablets for on-the-go review

Lessons Learned

1. Canvas operations are expensive - Batch operations and reuse canvases
2. PDF.js quirks - Different PDFs render differently; normalization helps
3. Memory matters in browser - Large PDFs can exhaust available memory quickly
4. UX over features - A simple, focused tool beats a complex one