Spot Every Difference, Pixel by Pixel
A visual comparison tool for designers and developers to quickly identify differences between images and videos.
- Slider Mode - Drag the slider to reveal differences between two images
- Side by Side Mode - View both images simultaneously for direct comparison
- Overlay Mode - Adjust opacity to blend before/after images for subtle difference detection
- Resolution Display - Shows image dimensions for both before and after versions
- Format Support - PNG, JPG, WebP, GIF, SVG
- Synchronized Playback - Both videos play in perfect sync
- Slider & Overlay Modes - Same comparison modes as images
- Frame-by-Frame Navigation - Step through videos one frame at a time
- Playback Speed Control - 0.5x, 1x, 2x speed options
- Keyboard Shortcuts - Space to play/pause, arrow keys to navigate
- Quick Access - Instantly reopen previous comparisons from history
- Thumbnail Previews - Visual preview of before/after for each comparison
- Persistent Storage - History survives browser refresh (Chrome/Edge)
- Filter by Type - Separate views for image and video comparisons
- Arrow Tool - Point out specific areas of interest
- Rectangle Tool - Highlight regions for discussion
- Circle Tool - Circle areas to draw attention
- Color Options - Multiple colors for different annotation purposes
- Easy Selection - Click to select and delete annotations
- Clear Annotations - Remove all annotations while keeping files loaded
- Re-annotate - Clear and start fresh without re-uploading files
- Zoom - Zoom in/out to inspect fine details (buttons or mouse wheel)
- Pan - Click and drag to move around the image/video
- Keyboard Support - Full keyboard navigation support
- Exit - Close current comparison and return to upload page
- Clear Annotations - Remove annotations without closing the comparison
- Quick Re-compare - Annotate multiple times without re-uploading files
- Design Review - Compare design iterations and spot changes
- QA Testing - Verify UI implementations match designs
- Version Control - Visualize changes between file versions
- Bug Reporting - Annotate and document visual issues
- Client Feedback - Share annotated comparisons with stakeholders
# Clone the repository
git clone https://github.com/DangJin/PixelDiff.git
# Navigate to the app directory
cd PixelDiff/app
# Install dependencies
pnpm install# Start the development server
pnpm devThe app will be available at http://localhost:5173
# Build the app
pnpm build
# Preview the production build
pnpm preview- Choose between Image or Video mode
- Upload your "Before" and "After" files
- Use Slider or Side by Side view to compare
- Add annotations to highlight differences
- Navigate with zoom and pan for detailed inspection
- Access recent comparisons from the history panel
| Shortcut | Action |
|---|---|
Space |
Play/Pause (Video) |
← / → |
Previous/Next frame (Video) |
V |
Select tool |
A |
Arrow tool |
R |
Rectangle tool |
C |
Circle tool |
Delete / Backspace |
Delete selected annotation |
- Chrome - Full support including history persistence
- Edge - Full support including history persistence
- Other browsers - Core features work, history may not persist
MIT