viewer.csslab.dev

Diff Checker

Compare two texts side by side, with the changed words highlighted inside each line.

What is a diff?

A diff is the set of changes that turns one version of a text into another: which lines were added, which were removed, and which were edited. Version control systems compute one on every commit; this tool computes the same thing for two blocks of text you paste, without needing a repository.

Lines are aligned side by side, and within a line that was edited only the words that actually changed are highlighted — so a single altered character in a long line is visible immediately instead of requiring you to compare the two lines by eye. Comparison runs entirely in your browser, which matters when the two things you are comparing are a production config and a staging one.

diff — compare files line by line
POSIX.1-2024, diff utility

Features

Word-level highlighting inside changed lines
Most comparison tools mark the whole line as different. This one runs a second pass within each edited pair and marks only the words that differ, which is the difference between spotting a change and hunting for it.
JSON-aware comparison
Turn on Compare as JSON and both sides are parsed, key-sorted, and re-serialised before comparing. Two API responses that differ only in key order or indentation come out identical, leaving just the real value changes.
Ignore whitespace or case
Reformatting noise — re-indentation, trailing spaces, a case change in a header — can be excluded so that only meaningful edits remain.
Only changes view
Collapse the identical lines away. On a long file, scrolling thousands of unchanged lines to find the three that moved is the most common waste of time in a comparison tool.
Nothing is uploaded
The comparison is computed in JavaScript on your own device. Config files, logs, and query results can be compared without sending either side to a server.

How to use

  1. 1

    Paste both versions

    Put the original on the left and the changed version on the right.

  2. 2

    Turn on JSON mode if both sides are JSON

    This sorts keys and normalises formatting first, so only real value differences show up.

  3. 3

    Filter out the noise

    Ignore whitespace or case when a reformat has muddied the result.

  4. 4

    Read the highlighted words

    Removed text is marked in red on the left, added text in green on the right, with the changed words highlighted inside each line.

Two identical-looking Korean strings that are not equal

Unicode can encode the same Korean syllable two ways: as one precomposed code point (NFC, 한 = U+D55C) or as its component jamo (NFD, U+1112 U+1161 U+11AB). They render identically and compare as different. macOS historically normalised filenames to NFD while Windows and Linux use NFC, so text that made the round trip through a Mac can differ from its origin in every syllable while looking untouched on screen.

This comparison is byte-faithful and will report those lines as changed, which is correct — they are different strings. If the difference you care about is meaning rather than encoding, normalise both sides first: String.prototype.normalize("NFC") in JavaScript, unicodedata.normalize in Python. The same trap catches full-width versus half-width Latin, and combining accents in European text.

Frequently asked questions

How do I compare two JSON files?

Paste one on each side and turn on Compare as JSON. Both are parsed and re-serialised with sorted keys before comparing, so differences in key order, indentation, or whitespace disappear and only genuine value changes remain.

Why do two identical-looking files show as completely different?

Usually line endings. A file saved on Windows ends lines with CRLF and one saved on Unix with LF, so every line differs even though the visible text is the same. This tool normalises line endings before comparing, so that particular false alarm does not happen here.

Is my text uploaded to a server?

No. The comparison runs in your browser and this page has no backend. Both sides stay on your device, which is why it is safe to compare a production configuration against a staging one.

Can it compare code?

Yes — it compares any plain text line by line, so source files, logs, CSV exports, and configuration all work. It does not parse the language, so it will not tell you that two blocks are semantically equivalent, only that the text differs.

What does the word-level highlighting actually do?

When a line on the left pairs with a line on the right, a second comparison runs within that pair at word granularity. Only the differing words are shaded, rather than the whole line, which makes a one-character change in a long line immediately visible.

Is there a size limit?

There is no hard limit, but comparison is quadratic in the worst case, so very large inputs — hundreds of thousands of lines — will make the page slow. For files that size, a local diff tool is the better instrument.

Specifications this follows

Related tools