DiffViewer

A Git diff viewer for macOS

DiffViewer is an Electron-based application that provides an interface for viewing Git diffs between branches. Perfect for code reviews, understanding changes, and visualizing your development progress.

This was built after constantly running into problems reviewing changes using agent coding tools like Claude Code, Codex and Cursor.

Features

• Interface - UI focused on code changes
• Side-by-Side & Unified Views - Switch between diff viewing modes
• Smart File Filtering - Quickly find specific files in large changesets
• Auto-Refresh - Automatically updates when your repository changes
• Dark/Light Theme - Because y'all will demand it
• Commit History - View commits ahead of your target branch
• File Status Indicators - Badges for new, modified, and deleted files
• Performance - Optimized for large repositories and diffs
• Syntax Highlighting - Code highlighting powered by highlight.js

Quick Start

Option 1: Download the App (Recommended)

1. Go to Releases
2. Download the latest DiffViewer.dmg for macOS
3. Open the DMG and drag DiffViewer to your Applications folder
4. Launch DiffViewer and open any Git repository

Option 2: Run from Source

# Clone the repository
git clone https://github.com/yourusername/diffviewer.git
cd diffviewer

# Install dependencies
npm install

# Start the application
npm start

Development

Prerequisites

• Node.js 16+
• npm or yarn
• macOS (for native features)

Setup

# Install dependencies
npm install

# Run in development mode
npm run dev

# Build for production
npm run build

# Package as macOS app
npm run dist

Project Structure

diffviewer/
├── src/
│   ├── main.js          # Electron main process
│   ├── renderer.js      # Frontend application logic
│   ├── index.html       # Main window HTML
│   └── styles.css       # Application styles
├── assets/              # Icons and images
└── package.json         # Dependencies and scripts

How It Works

DiffViewer compares your current branch against a target branch (typically main or master) and shows:

1. File Changes - All modified, added, and deleted files
2. Diff Views - Line-by-line changes in side-by-side or unified format
3. Commit History - Commits that exist on your branch but not the target
4. Live Updates - Automatically refreshes when you make changes

Supported Git Operations

• Branch comparisons (feature-branch vs main)
• Automatic target branch detection (main ↔ master)
• Real-time repository watching
• Large diff handling with performance optimization

Contributing

Bring on your contributions yo!

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Make your changes and add tests if applicable
4. Commit your changes: git commit -m 'Add amazing feature'
5. Push to the branch: git push origin feature/amazing-feature
6. Open a Pull Request

Development Guidelines

• Use 2-space indentation
• Follow existing code style
• Test your changes thoroughly
• Update documentation as needed

Known Issues

• Very large files (>10MB) may load slowly
• Some Git operations might not trigger auto-refresh immediately

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• simple-git - Git operations in Node.js
• Electron - Cross-platform desktop apps
• highlight.js - Syntax highlighting