Diff Viewer

A diff viewer (or diff tool) is a utility that compares two pieces of text and highlights the differences between them. It analyzes both inputs line by line, identifying which lines were added, removed, or modified. Diff tools are essential in software development for code review, debugging, and version control workflows.

The concept of "diff" originates from the Unix diff command, first released in 1974 as part of AT&T's Unix. Modern diff tools build on the same core algorithms — primarily the Longest Common Subsequence (LCS) algorithm — to produce minimal, human-readable change sets. Tools like Git, GitHub, GitLab, and Bitbucket all use variations of diff algorithms to display code changes in pull requests and commits.

This online diff viewer runs entirely in your browser. It computes diffs using a JavaScript implementation of the LCS algorithm, with additional character-level diffing for modified lines to show exactly which parts of a line changed. No data is ever sent to any server.

There are two primary ways to display text differences, each with distinct advantages:

Unified Diff

Unified diff shows all changes in a single column. Removed lines are prefixed with - and added lines with +. Unchanged (context) lines appear without a prefix. This format is compact and widely used in command-line tools, patch files, and Git output (git diff). It is ideal when you want a concise overview of changes.

Side-by-Side Diff

Side-by-side diff places the original text on the left and the modified text on the right, aligned line by line. This makes it easy to visually scan changes and see the "before and after" simultaneously. Most code review platforms (GitHub, GitLab, Bitbucket, Azure DevOps) offer a side-by-side view as the default for pull request reviews.

• Code review — Compare two versions of a source file to understand what changed in a commit, pull request, or branch merge.
• Configuration auditing — Diff configuration files (YAML, JSON, INI, TOML) to find unintended changes between environments (dev, staging, production).
• Document comparison — Compare two versions of a contract, specification, or policy document to identify edits.
• API response debugging — Compare expected vs. actual API responses to locate discrepancies.
• Database migration verification — Diff SQL migration scripts or schema dumps to ensure changes are correct before running them.
• Merge conflict resolution — Paste the two conflicting versions to understand the differences before resolving a Git merge conflict.
• Log analysis — Compare log outputs from two test runs to find differences in behavior.

• Line-level diff — Compares text line by line using the Longest Common Subsequence (LCS) algorithm, the same family of algorithms used by Git and other professional diff tools.
• Character-level highlighting — Within modified lines, individual characters that changed are highlighted with inline markers, making it easy to spot small edits in long lines.
• Two view modes — Switch between unified diff (single column with +/- markers) and side-by-side diff (left/right panel comparison) with one click.
• Change statistics — See at a glance how many lines were added, deleted, and unchanged, along with the total line count.
• Swap panels — Instantly swap the original and modified text to reverse the comparison direction.
• Copy diff output — Export the diff result as a unified diff text format, suitable for sharing or pasting into issues and documentation.
• Sample data — Load a built-in sample to explore the tool's features without preparing your own test data.
• Keyboard shortcut — Press Ctrl+Enter (or ⌘+Enter) to compare instantly without reaching for the mouse.
• Resizable panels — Drag the divider between the original and modified panels to adjust their width.
• 100% client-side — All comparison happens in your browser. No data is ever sent to any server. Works offline after the initial page load.
• No dependencies — Built with vanilla HTML, CSS, and JavaScript. No frameworks, no build tools, no npm packages.

This diff viewer uses a two-pass approach to compute differences:

Pass 1: Line-Level Diff (LCS)

The tool splits both texts into lines and computes the Longest Common Subsequence (LCS) — the longest sequence of lines that appear in both texts in the same order. Lines present in the LCS are marked as "unchanged." Lines in the original but not in the LCS are "deleted," and lines in the modified text but not in the LCS are "added."

The LCS algorithm runs in O(m×n) time and space, where m and n are the line counts of the two inputs. For most practical inputs (up to a few thousand lines), this executes in milliseconds.

Pass 2: Character-Level Diff (Inline Highlighting)

When a deleted line is immediately followed by an added line (suggesting a modification rather than a pure addition/deletion), the tool runs a second LCS pass at the character level. This highlights exactly which characters within the line changed, making small edits (typo fixes, variable renames, parameter additions) immediately visible.

For very long lines (over ~700 characters), the character-level diff falls back to highlighting the entire line to avoid performance issues.