Put two versions side by side and see exactly what changed.
Paste text, drop two files or load the example — DiffCanvas lines the versions up row by row, marks the words that moved and lets you build a merged file, all inside this browser tab.
- lines added
- lines removed
- words changed inside a line
Two versions, side by side
Paste text into both panes, drop two files anywhere on this page, or load the example config below.
Both texts stay in this browser tab. DiffCanvas has no server to send them to — the comparison runs in your device's JavaScript engine.
How DiffCanvas reads a change
Word-level, not just line-level
When a line was edited rather than replaced, DiffCanvas compares the two lines against each other and highlights only the characters that actually moved. A renamed variable stops looking like a rewritten function, and a changed number in a long config line is impossible to miss.
Ignore exactly the noise you want to ignore
Trailing spaces, indentation, capitalisation and blank lines each have their own switch, and JSON-aware mode re-sorts keys and re-indents both sides before comparing. Your text is never modified — the options only change what counts as a difference.
Leave with a patch or a merged file
Copy the added or the removed lines on their own, export a standard unified .diff that git apply understands, or resolve the comparison hunk by hunk with Take original / Take changed and download the merged result.
A diff checker that stays in your browser
DiffCanvas is an online diff checker for text, code and configuration files. You paste or drop two versions and it lines them up row by row: lines that exist only on the left are marked as removed, lines that exist only on the right as added, and lines that were edited appear on both sides with the changed words highlighted. The side-by-side view keeps each version in its own column with synchronised scrolling; the inline view collapses them into the unified layout you already know from git diff and code review. Hunk navigation, a running count of added, removed and edited lines, and a map of every change along the right edge make it possible to work through a long comparison without losing your place.
Everything happens in the browser. Files you open are read with the File API and compared by JavaScript running on your own device — there is no upload endpoint, no database and no analytics, so the text of a contract, an API key or unreleased source never leaves the tab. That also means the page keeps working with the network switched off, and the comparison runs as fast as your machine does. Options for ignoring whitespace, case and blank lines, a JSON-aware mode that normalises key order and formatting before comparing, and export as a unified .diff patch or a merged file cover most of what people otherwise open a desktop merge tool for.
Guides & articles
How diffs work, why they fill up with noise, and how to read them faster.
How to read a diff: hunks, context lines and the unified format
The unified diff has only three kinds of row and one header worth decoding. Here is what @@ -18,7 +18,8 @@ means, why three lines of context are the default, and when a side-by-side view beats an inline one.
Whitespace, line endings and other invisible changes that pollute diffs
A file can look identical and still diff on every line. Carriage returns, trailing spaces, tabs, byte-order marks and Unicode look-alikes are the usual culprits — here is how to spot each one and how to stop it coming back.
Comparing JSON and config files semantically, not textually
Two configs can describe the same deployment and still differ on every line. Key order, indentation and quoting are text, not meaning — here is how to normalise them away, and where normalising becomes dangerous.
Frequently asked questions
Are my files or text uploaded anywhere?
No. DiffCanvas is a static page with no backend: files you open are read by your browser's File API and compared by JavaScript running on your own device. There is no upload endpoint, no database and no analytics script, so there is nowhere for the text to go. You can verify it by opening the network panel of your browser's developer tools while you compare — or by switching the network off and comparing anyway.
How large can the two files be?
Each side accepts a file up to 8 MB. Speed depends far more on how different the two texts are than on their size: two ten-thousand-line files with a handful of edits compare in a fraction of a second, while two long and almost entirely unrelated texts take much longer. If a comparison runs past eight seconds it stops with a message instead of freezing the tab, and a very long result is drawn up to the first 6,000 rows.
Can I compare PDFs, Word documents or images?
No — DiffCanvas compares text. If a dropped file contains NUL bytes it is refused with a message rather than shown as a screen of replacement characters. PDFs, .docx files, images and archives are binary containers: copy or export the text out of them first, then compare that text here.
Which languages get syntax colouring?
JSON, JavaScript and TypeScript, CSS, HTML and XML, Markdown, Python, YAML, SQL and shell scripts. The language is guessed from a dropped file's extension and can be changed at any time with the Language selector. The colouring comes from a small built-in tokeniser that works one line at a time, so a block comment or template literal spanning several lines is coloured only on the line where it starts.
What exactly do “Take original” and “Take changed” produce?
A merged file. It starts out identical to the Changed side; every hunk you switch to Take original is replaced by the Original lines, and unchanged text is carried through untouched. The result appears in a panel below the comparison and can be copied or downloaded. It is a two-way merge: DiffCanvas never writes a line that is not already in one of the two inputs.
Is the exported patch a real .diff file?
Yes. “Copy patch” and “Download .diff” produce a standard unified diff with --- and +++ file headers and @@ hunk headers, using the number of context lines currently selected (three when context is set to all lines). It applies with git apply or patch, provided no option has changed which lines are on screen — “ignore blank lines” and JSON-aware mode both rewrite the text being compared, and the tool says so underneath the result.
Do the ignore options change my text?
No. Ignoring trailing, leading or all whitespace, ignoring case and ignoring blank lines only change how lines are matched against each other — what you see in the panes, copy or download is the text you pasted. JSON-aware mode is the one exception and announces itself: it parses both sides, sorts every object key and re-indents with two spaces, so everything downstream works on that normalised form.
Can it do a three-way merge against a common ancestor?
No. DiffCanvas compares two versions, not three, and has no notion of a base revision or of conflict markers. For merging branches that share history, use git — it can look at the common ancestor and resolve most conflicts on its own. DiffCanvas is for the moment when you simply have two files in front of you and need to see what is different.
Does it work offline?
Once the page has loaded, yes. The diff engine, the fonts and the syntax colouring are all part of the page, and no request is made while you compare, switch views or export a patch. If you reload while offline your browser will serve the page from its own cache when it has it — there is no service worker doing anything clever behind your back.