Visual Diff Merge

Introduction

Visual Diff Merge is a powerful web-based tool for comparing and merging text files and content. It provides a user-friendly interface for visualizing differences between versions of code, text files, or content from URLs, and offers intuitive merge capabilities.

Screenshots

Here are some screenshots of Visual Diff Merge in action:

Click on any screenshot to view it in fullscreen mode.

Key Features

• Multiple Operation Modes

  Support for four distinct modes: File Browser (server files), File Upload (local files), Text Compare (direct input), and URL Compare (web content).

• Intelligent Diff Algorithm

  Accurate difference detection with configurable context lines, whitespace handling, and case sensitivity options.

• Real-time Syntax Highlighting

  Automatic language detection and syntax highlighting powered by highlight.js with support for light and dark themes.

• Chunk-based Navigation

  Easily navigate between changes with next/previous buttons and visual indicators.

• Interactive Merge Tools

  Resolve conflicts by selecting chunks from either side or custom edits.

• Multiple Save Options

  Save merged content to original files or as new files with various options.

• Responsive Design

  Works on desktop and tablets with adaptive layout for different screen sizes.

• Customizable UI

  Extensive styling options and theme customization capabilities.

• Multilingual Support

  Built-in translations with easy extension to additional languages.

Quick Start

Option 1: Quick Setup with Pre-compiled Files

For a quick setup without needing to compile anything:

git clone https://github.com/migliori/visual-diff-merge.git

# Navigate to the project directory
cd visual-diff-merge

# Install PHP dependencies only
composer install --no-dev

All pre-compiled JavaScript and CSS files are already included in the dist/ directory, so you can start using the tool right away.

Option 2: Development Setup

If you want to modify the source code:

git clone https://github.com/migliori/visual-diff-merge.git

# Navigate to the project directory
cd visual-diff-merge

# Install all dependencies
composer install
npm install

# Compile assets for development
npm run compile-scss

For detailed setup instructions, refer to the Installation Guide.

After installation, you can use Visual Diff Merge in one of the four operation modes:

For a complete setup guide, see the Installation page.

Configuration

Visual Diff Merge is highly configurable through the api/config.php file. You can customize:

• Diff generation settings (context lines, whitespace handling, etc.)
• UI appearance and themes
• Default language and translations
• Security settings and allowed directories
• Debug settings and logging

For detailed configuration options, see the Customization page.

Getting Help

Visual Diff Merge is open-source software. If you need help or want to contribute:

• GitHub Repository: https://github.com/migliori/visual-diff-merge
• Issue Tracker: Report bugs or request features
• Documentation: This documentation is your comprehensive guide to Visual Diff Merge

Documentation Overview