The team behind OnlineTools4Free — building free, private browser tools.
Published Apr 1, 2026 · 7 min read · Reviewed by OnlineTools4Free
Code Diff: How to Compare Files & Find Changes
What Is a Diff?
A diff (short for difference) shows the changes between two versions of a file. It highlights what was added, removed, or modified, making it easy to see exactly what changed without reading both files in their entirety. Diff tools are foundational to software development — every code review, version control operation, and merge conflict resolution depends on them.
The concept dates back to the Unix diff command created in the early 1970s. It compares two files line by line and produces a minimal set of changes needed to transform one file into the other. Modern diff tools add syntax highlighting, side-by-side views, and inline annotations, but the core algorithm remains similar.
Diffs are everywhere in development workflows. Git stores changes as diffs between commits. Pull request reviews display diffs to show what code a developer is proposing to merge. Deployment pipelines compare configuration files to detect unintended changes. Even non-code contexts use diffs — comparing contracts, legal documents, and content drafts.
Reading Diff Output
The most common diff format is the unified diff, used by Git and most modern tools. It looks like this:
--- a/utils.js
+++ b/utils.js
@@ -10,7 +10,8 @@
function calculateTotal(items) {
let total = 0;
- for (let i = 0; i < items.length; i++) {
- total += items[i].price;
+ for (const item of items) {
+ const price = item.price * (1 - item.discount);
+ total += price;
}
return total;
}
Here is how to read it:
- --- and +++: The file names.
---is the old version,+++is the new version. - @@: The hunk header showing line numbers.
-10,7means starting at line 10 in the old file, showing 7 lines.+10,8means starting at line 10 in the new file, showing 8 lines. - Lines starting with -: Removed from the old version (shown in red in most tools).
- Lines starting with +: Added in the new version (shown in green).
- Lines starting with a space: Unchanged context lines shown for reference.
In this example, a traditional for loop was replaced with a for-of loop, and a discount calculation was added. The diff makes the intent clear at a glance.
Diff View Modes
Modern diff tools offer several view modes to suit different situations:
Side-by-side: The old version appears on the left and the new version on the right. Matching lines are aligned horizontally. Added lines show a blank on the left; removed lines show a blank on the right. This mode is excellent for reviewing changes because you can compare old and new code simultaneously.
Inline (unified): Both versions appear in a single column. Removed lines are shown in red above the corresponding added lines in green. This mode uses less horizontal space and is better for narrow screens or when changes are small.
Word-level diff: Instead of highlighting entire lines, this mode highlights the specific words or characters that changed within a line. Extremely useful when a long line has a small change — without word-level highlighting, you have to visually scan the entire line to find the modification.
Split diff: Some tools show the diff split by function or section rather than by file position. This groups related changes together even if they are scattered across the file.
Effective Code Comparison
Getting the most out of diff tools requires some technique:
Ignore whitespace: Formatting changes (re-indentation, trailing spaces, line ending differences) can produce enormous diffs that obscure the actual code changes. Most diff tools have an option to ignore whitespace differences. Use it when reviewing logic changes; disable it when formatting consistency matters.
Ignore moved code: If a block of code is moved from one location to another within the same file, a basic diff shows it as a deletion at the old location and an addition at the new location. Advanced tools detect moved blocks and display them as relocations rather than separate add/delete operations.
Context lines: The number of unchanged lines shown around each change affects readability. More context helps you understand where a change occurs but makes the diff longer. Three lines of context (the Git default) is usually sufficient; increase it when reviewing complex changes in unfamiliar code.
Compare specific sections: When a file has many changes, focus on one section at a time. Many diff tools let you expand and collapse unchanged sections, or jump between changed hunks.
Diff Algorithms
Different algorithms produce different diff outputs for the same pair of files. The choice of algorithm affects how "clean" and readable the diff appears:
- Myers algorithm: The default in Git. It finds the shortest edit script — the minimum number of additions and deletions to transform one file into the other. It produces compact diffs but sometimes groups changes in counterintuitive ways.
- Patience diff: Prioritizes matching unique lines (lines that appear exactly once in each file), then fills in the gaps. It often produces more readable diffs when code blocks are moved or when there are many similar lines. Enable it in Git with
git diff --patience. - Histogram diff: An evolution of patience diff that handles files with many duplicate lines better. It is the default in some Git configurations and generally produces clean, readable diffs.
Compare Code Online
Our Diff Checker provides a clean, visual way to compare two pieces of text or code. Paste the original and modified versions, and see the differences highlighted instantly. The tool supports side-by-side and inline views, syntax highlighting for common languages, and word-level change detection.
Use it for code review outside of Git, comparing configuration files, checking document revisions, or any situation where you need to spot differences between two text blocks quickly and accurately.
Code Diff Checker
Compare two code blocks side by side with syntax-aware diff and line numbers.
OnlineTools4Free Team
The OnlineTools4Free Team
We are a small team of developers and designers building free, privacy-first browser tools. Every tool on this platform runs entirely in your browser — your files never leave your device.
