Visual Diffing

The Platform provides powerful diffing tools to make visual reviews fast and accurate.

Comparison View

When viewing a pending visual, you'll see:

1. Before: The currently live, approved version
2. After: The new version from your latest commit
3. Diff Overlay: A generated image highlighting changed pixels

Diff Modes

Side-by-Side

View both versions next to each other for quick comparison.

Overlay

Toggle an overlay that highlights exactly which pixels changed:

• Green: Added pixels
• Red: Removed pixels
• Yellow: Changed pixels

Swipe

Drag a slider across the image to compare before/after interactively.

Diff Sensitivity

The diff engine sensitivity is configured in your local docsync.config.json:

{
  "diffing": {
    "threshold": 0.1
  }
}

Understanding Diffs

False Positives

Some changes may not be meaningful:

• Anti-aliasing differences across platforms
• Timestamp or date changes
• Animation frame differences

True Positives

Catch important changes:

• Layout shifts
• Missing elements
• Color changes
• Typography updates

Diff Percentage

Each changed visual shows a diff percentage—the proportion of pixels that changed:

• < 1%: Minor change (often safe to approve)
• 1-5%: Noticeable change (review carefully)
• > 5%: Significant change (detailed review needed)