Text diff

Compare two versions of text or code line by line, see exactly what was added and what was removed, and copy the result as a unified diff patch.

Before

After

Ignore whitespace

Ignore case

2 added, 2 removed, 2 unchanged.

1 -export function Button({ label, tone }) {

2 - const classes = cn("rounded-lg px-4 py-2", tone);

1+export function Button({ label, tone = "primary", size = "md" }) {

2+ const classes = cn(buttonVariants({ tone, size }));

33 return <button className={classes}>{label}</button>;

44 }

patch.diffdiff

-export function Button({ label, tone }) {
-  const classes = cn("rounded-lg px-4 py-2", tone);
+export function Button({ label, tone = "primary", size = "md" }) {
+  const classes = cn(buttonVariants({ tone, size }));
   return <button className={classes}>{label}</button>;
 }

Questions

How is the difference worked out?+

By the longest common subsequence, the same idea git uses. Lines both sides share stay in place, so a change reads as a change rather than as everything after it having moved.

What do the two numbers on each row mean?+

The line number on each side. A removed line has only a left number and an added line only a right one, which is what makes it obvious where the two files stopped agreeing.

Can I paste the result into a pull request?+

Yes. The patch below the comparison is in unified format, so it renders as a diff anywhere markdown is read.

Text diff

Questions

Related tools

The tools are free. So is most of the library.