Code Diff Viewer

What a diff tells you, and how it is computed

A diff answers one question: what changed between two versions of a text? Naively comparing line one to line one, line two to line two, and so on falls apart the moment a line is inserted, because every line after it shifts and appears "changed" even though it is identical. A real diff has to find the longest sequence of lines the two versions share, and treat everything else as inserted or deleted. This viewer uses Myers' diff algorithm, the same approach Git uses, which computes the shortest edit script — the minimum set of insertions and deletions needed to turn the old text into the new one. The result is the smallest, most readable change set rather than a noisy line-by-line mismatch.

How the algorithm finds the minimal change

Myers' algorithm models the comparison as finding the shortest path through a grid: moving diagonally means two lines match (no edit), moving right means deleting a line from the old version, moving down means inserting a line into the new one. It explores edit distances in increasing order — first checking whether zero edits suffice, then one, then two — and stops the instant it reaches the end, which guarantees the fewest edits. The tool then backtracks through the recorded search to reconstruct the exact sequence of equal, inserted, and deleted lines. A final pass pairs up a deletion immediately followed by an insertion and labels them a change, so a line you merely edited shows as an old/new pair rather than an unrelated remove-then-add.

Split view versus unified view

The viewer offers two layouts of the same diff. Split view places the old version on the left and the new on the right, side by side, with deletions highlighted red on the left, insertions green on the right, and matching lines aligned across both columns — ideal for seeing a change in context. Unified view interleaves everything in one column, prefixing each line with a space for unchanged, - for removed, and + for added, which is the format you see in code review tools and patch files. A running tally at the top counts added and removed lines so you can gauge the size of a change at a glance.

A worked example

Compare these two functions. The old code is:

• function greet(name) {
• console.log('Hello ' + name);
• return true;
• }

The new code changes the signature, the message, and the return value. Myers' algorithm recognises that the opening and closing braces are unchanged and anchors on them, so it does not flag the whole block. The two altered middle lines are detected as a deletion immediately followed by an insertion, so the change-pass marks them as changed — the old return true; shows red on the left and the new return name; shows green on the right, perfectly aligned, instead of being scattered as four unrelated edits.

The "Copy Patch" output

Clicking Copy Patch produces a standard unified diff, the same format git diff emits and patch consumes. It begins with --- old and +++ new headers, then groups nearby changes into hunks. Each hunk carries a header like @@ -1,4 +1,4 @@, where the numbers give the starting line and line count in the old and new files respectively, and includes three lines of surrounding context above and below the changes so the patch can be applied reliably even if the file has shifted slightly. You can paste this directly into a patch file, a code review comment, or a chat message.

Practical uses and tips

• Review your own edits before committing. Paste the original and your modified version to see exactly what you touched — a fast way to catch a stray change.
• Compare config files or environments. Diffing two .env, YAML, or JSON files surfaces the one setting that differs between staging and production.
• Proofread document revisions. The algorithm is line-based, so it works on prose, not just code — useful for spotting edits between two drafts.
• Load files instead of pasting. Each side has a "Load File" option that reads a local text file directly into the editor.
• Keep meaningful line breaks. Because the diff compares whole lines, two versions that differ only in where lines wrap will show large diffs; format both sides consistently for the cleanest result.

Privacy

The entire comparison — the Myers algorithm, the highlighting, and the patch generation — runs in your browser using JavaScript. Neither the text you paste nor the files you load are uploaded anywhere; the tool keeps working with your network disconnected. That makes it safe to diff proprietary source code, private configuration, or confidential documents without them ever leaving your machine.