Diff Checker

Compare two text inputs and visualize differences with color-coded highlighting.

CompareDiffHighlight
2removed
2added
Original81 chars
Modified108 chars
Diff Output
function greet(name) {
return "Hello, " + name;
}
console.log(greet("World"));
function greet(name) {
return `Hello, ${name}!`;
}
const result = greet("DevTools"); console.log(result);

All diff comparison happens locally in your browser — your data never leaves your device.

Diff Checker compares an Original and a Modified text line by line and highlights what changed: removed lines in red, added lines in green, unchanged lines in the neutral colour. The diff updates as you type, so you can paste two versions of a config file, a function or a paragraph and see the changes immediately.

The comparison is an exact, character-for-character line diff using the jsdiff library. A line that differs only by a trailing space or a change in capitalisation is reported as changed, which is what you usually want when reviewing code or configuration.

You can switch between a Side-by-side view (original on the left, modified on the right) and an Inline view that lists removals and additions in sequence with - and + markers, similar to a unified diff. A counter above the inputs shows how many removed and added blocks were found.

If you want to ignore case or whitespace differences, use Text Compare, which runs the same line diff with those options. For JSON documents where key order and formatting should not matter, the JSON compare tool is a better fit.

  1. Paste the older version into the Original box and the newer version into the Modified box.
  2. Read the Diff Output panel below; red lines were removed, green lines were added.
  3. Toggle between Side-by-side and Inline to change the layout of the inputs and the diff.
  4. Click Swap to reverse the direction of the comparison, or Clear to empty both inputs.

  • Exact line-by-line diff that recalculates on every keystroke
  • Side-by-side and Inline (+/-) view modes
  • Colour coding for removed, added and unchanged lines
  • Count of removed and added change blocks
  • Swap button to reverse Original and Modified
  • Character counts for both inputs
  • Comparison runs locally in your browser

Changed config value

Original:
PORT=3000
LOG_LEVEL=info

Modified:
PORT=3000
LOG_LEVEL=debug

Inline diff:
  PORT=3000
- LOG_LEVEL=info
+ LOG_LEVEL=debug

The unchanged line stays neutral; the edited line appears once as removed and once as added.

Refactored function

Original:
return "Hello, " + name;
console.log(greet("World"));

Modified:
return `Hello, ${name}!`;
const result = greet("DevTools");
console.log(result);

Both original lines are marked removed and the three new lines added, giving one removed block and one added block.

Whitespace-only change

Original:
if (ok) {

Modified:
if (ok)  {

An extra space is enough to flag the line as changed. Use Text Compare with Ignore Whitespace if that should not count.

Every line shows as changed

The two inputs use different indentation (tabs vs spaces, or 2 vs 4 spaces), or one side is minified onto a single line.

Normalise indentation and formatting on both sides first, or use Text Compare with Ignore Whitespace to check whether the content itself differs.

The last line is reported as changed even though it looks identical

One input ends with a newline and the other does not, so the final lines differ.

Add or remove the trailing newline so both inputs end the same way.

Texts look different but the tool says they are identical

The difference is invisible, or you are comparing the same text twice.

Check that you pasted the intended versions; the diff is exact, so any changed character, including whitespace, would be reported.

How is Diff Checker different from Text Compare?

Both use the same line-based diff and offer Side-by-side and Inline views. Diff Checker always compares the text exactly as entered. Text Compare adds Ignore Case and Ignore Whitespace options, an Identical/Different status, and counts changes in lines rather than blocks.

Does it highlight the changed characters within a line?

No. The diff works on whole lines, so a one-character edit marks the entire line as removed and re-added. Put long lines on separate lines first if you need finer detail.

What do the removed and added numbers mean?

They count contiguous blocks of changes, not individual lines. Three consecutive new lines count as one added block.

Can I compare minified code or JSON?

Minified input is usually a single line, so any change marks the whole thing as different. Format it first with the JSON formatter or CSS formatter, then compare the formatted versions.

Is the text I paste stored anywhere?

No. The diff is computed in your browser and nothing is sent to a server.