Code Diff
- Added2
- Removed0
- Changed1
- Unchanged6
| Change | Left line | Left content | Change | Right line | Right content |
|---|---|---|---|---|---|
| 1 | <!DOCTYPE html> | 1 | <!DOCTYPE html> | ||
| 2 | <html> | 2 | <html> | ||
| 3 | <body> | 3 | <body> | ||
| Changed from | 4 | <h1>Hi</h1> | Changed to | 4 | <h1>Hello</h1> |
| Added | 5 | <p>Welcome to W3Docs</p> | |||
| 5 | <p>This is very minimal 'hello world' HTML document.</p> | 6 | <p>This is very minimal 'hello world' HTML document.</p> | ||
| Added | 7 | <div>This is a new code!</div> | |||
| 6 | </body> | 8 | </body> | ||
| 7 | </html> | 9 | </html> |
About the code diff tool
Code Diff compares two blocks of text or code line by line and highlights what changed — lines added, lines removed, and lines edited in place — plus the exact words that changed within an edited line. Paste your two versions into the First text and Second text panes; the comparison recomputes on every keystroke, so there's no Compare button to click. Switch between a Split view that lines both versions up in columns, and a Unified view that lists a removed line directly above its replacement, closer to how git diff prints changes in a terminal.
The diff is computed with a longest-common-subsequence (LCS) algorithm — the same family used by Python's difflib.SequenceMatcher and the classic Unix diff command — rather than a third-party package, keeping the page dependency-free. It walks both texts and classifies each line as equal, insert, delete, or replace; a delete run and an insert run that sit next to each other get merged into a single replace so the two columns stay aligned. A second LCS pass runs only on replace lines, tokenizing each into words, whitespace, and punctuation, so just the token that changed is highlighted — not the entire line.
Reach for it when you need to see exactly what differs between two versions of a snippet, a config file, or rendered HTML/CSS — before opening a PR, before overwriting a file, or after a teammate or an AI tool rewrites something and you want to know precisely what moved. Everything runs client-side in your browser; nothing you paste is sent to a server, logged, or stored. The algorithm holds an O(n×m) table in memory, so it's sized for snippet- and file-level comparisons: a few hundred lines run comfortably, while multi-thousand-line pastes will slow down.
Examples
function greet(name) {
- console.log("Hello " + name);
+ console.log(`Hello, ${name}!`);
}First text held the console.log("Hello " + name) version; Second text changed only that line to a template string. This four-line transcript is exactly what the Copy diff button copies to the clipboard: two leading spaces mark unchanged context, -/+ mark the removed and added line.
First text: <h1>Hi</h1>
Second text: <h1>Hello</h1>The line-diff marks this whole line replace, but the word-diff pass inside it only flags Hi and Hello — the surrounding <h1> and </h1> tokens are identical on both sides and stay unhighlighted.
First text: const name = "Alice";
Second text: const name = "ALICE";
Default compare: 1 line marked "changed"
Ignore whitespace only: still "changed" (case differs)
Ignore whitespace + ignore case: "No differences"Both options only change which lines count as equal — the panes still display your original text, spacing included. Turn off the toggles and the same two lines are flagged replace again.
Frequently asked questions
Does Code Diff work like git diff?
Conceptually, yes — both compute a line-level diff with a longest-common-subsequence style algorithm and classify each line as unchanged, added, removed, or changed. This tool runs entirely in your browser on two pasted blocks of text rather than on git objects, and its Copy diff output uses +/- line markers for readability only — there are no ---/+++ file headers or @@ hunk lines, so it isn't a patch file you can feed to git apply.
Is my code sent to a server?
No. The comparison runs entirely client-side in your browser; nothing typed or pasted into either box is transmitted, logged, or stored anywhere — refresh the page and both inputs are gone.
Why is only one word highlighted instead of the whole line?
Every line marked changed also runs through a second, word-level diff that tokenizes it into words, whitespace, and punctuation, then highlights only the tokens that actually differ. On a single line longer than 400 tokens — a minified bundle on one line, for example — that step is skipped and the whole line is highlighted instead, to keep typing responsive.
What exactly does Ignore whitespace do?
It collapses runs of whitespace to a single space and trims both ends of each line before the two sides are compared — so const x = 1; and const x = 1; count as equal. Only the comparison changes; the panes still display your original spacing. Combine it with Ignore case and lines that differ solely in spacing or capitalization stop being flagged entirely.
How large a file can I compare?
The diff engine keeps an O(n×m) table in memory, so it's built for snippet- and file-sized comparisons rather than whole large codebases — a few hundred lines is comfortable. Pasting two multi-thousand-line files still works, but gets noticeably slower since both memory and compute scale with the product of the two lengths.
Related tools
Paste two snippets and see the differences highlighted line by line. Useful for spotting changes between versions of HTML, CSS, JavaScript, or any other plain text.