Code Compare
Side-by-side diff for any two code blocks.
What is Code Compare?
A code compare tool takes two source-code snippets, aligns them line by line, and highlights every line that was added, removed, or changed. It is a line-based diff, the same model git diff uses, rendered for two pasted snippets instead of files in a repository. The output is a numbered patch that preserves indentation and lets you read both versions in one place.
Developers and reviewers reach for a code compare tool when two snippets disagree and the source of truth is not yet in version control. Typical inputs are a draft refactor against the current implementation, a bug report’s “before and after” snippet, or an LLM rewrite against the original function.
Why use Code Compare?
- Review changes outside a Git workflow. Diff two pasted snippets the way Git would, even when the code lives in a chat message or an issue thread.
- Compare AI suggestions to your code. Drop the original and the LLM rewrite side by side to see which lines moved, which were renamed, and which silently disappeared.
- Audit drift between similar files. A side-by-side diff exposes copy-pasted helpers that diverged over time.
- Stay private with proprietary source. The diff runs entirely in your browser, so internal source code is never uploaded to a server.
How to use Code Compare
- Paste the first snippet into the Original code textarea on the left.
- Paste the second snippet into the Modified code textarea on the right.
- Read the numbered Diff panel below, which renders both inputs as one merged patch.
- Identify changes by color: green for added, red for removed, amber for changed, gray for unchanged context.
- Select rows and copy them into a pull request comment or an issue.
Diff algorithm
The code compare tool uses a line-based longest common subsequence (LCS) diff, the same family that powers diff and git diff. LCS finds the longest sequence of lines that appears in both inputs in the same order and labels every other line as added, removed, or changed. The Myers algorithm is the O(ND) LCS implementation git diff uses by default.
One difference from raw Git: when a removed and an inserted line align on the same row and look like a tweak, the row is marked changed and rendered in amber. Whitespace is significant, so a re-indent shows up as a real change.
Visual conventions
Each diff row carries one color and one symbol so a printed or screenshot diff still reads correctly without the color cues.
| Type | Color | Prefix | Meaning |
|---|---|---|---|
| Added | Green | + | Only in the modified snippet. |
| Removed | Red | − | Was in the original, deleted. |
| Changed | Amber | ~ | Present on both sides, content differs. |
| Unchanged | Gray | | Identical in both snippets, shown as context. |
Example diff
A small TypeScript refactor that adds a type, renames a local, and inserts a guard clause:
- export function getUser(id) {
+ export function getUser(userId: string): User | null {
+ if (!userId) return null;
- const u = db.users.find({ id });
+ const user = db.users.find({ id: userId });
- return u;
+ return user ?? null;
}The first and fourth changes are paired removals and additions because the line shape changed substantially. The signature line is reported as changed because most of the original characters survived, so a viewer can scan one amber row.
Common use cases
- Backend developers reviewing pre-PR refactors. Diff a local function against the version in
mainto confirm the rewrite preserves behavior. - Frontend developers comparing AI rewrites. Paste the original component and the LLM suggestion to spot silent prop renames and removed branches.
- QA engineers attaching diffs to bug reports. Capture the working and broken snippets, diff them, and paste the result into the ticket.
- On-call engineers reading hotfix patches. Inspect a proposed change in a chat window before it lands in production.
Frequently asked questions
Is the code compare case-sensitive?
Yes. The diff treats User and user as different identifiers, so a casing change in a variable or type name is reported as a changed line. There is no case-insensitive mode, because most programming languages are case-sensitive.
Does it ignore whitespace?
No. A re-indent or a different bracket style is reported as a change. If you only care about logic, run both snippets through the same formatter (Prettier, Black, gofmt) before pasting.
Can I compare two files?
The tool reads from two textareas, not file uploads. Open both files in your editor, select all, and paste each into the matching pane. For very large files, prefer the diff or git diff --no-index command on disk.
Are my snippets uploaded anywhere?
No. The code compare tool runs entirely in the browser. Both snippets stay in memory in your tab and are never sent to a server, written to disk, or logged. Closing the tab clears them, which makes the tool safe for proprietary or pre-release code.
What is the maximum input size?
A few hundred kilobytes per side renders smoothly. Multi-megabyte snippets can slow the tab because every diff row is rendered into the DOM. For very large diffs, narrow each side to the function you actually need to review.
Does it know my programming language?
The line diff is language-agnostic, so it works the same for JavaScript, Python, Go, Rust, SQL, YAML, shell, or any other text-based source. Syntax-aware diffing is out of scope for a paste-and-compare tool.
Related tools
- Text Compare - Compare two blocks of plain text with line and word modes.
- String Diff - Character-level diff for two short strings.
- XML Compare - Diff two XML documents line by line.
- JSON Compare - Deep-compare two JSON objects with a structured diff view.
Related tools
ShotMark captures what you do here, in one click.
The traces, payloads, and tests you run by hand? ShotMark grabs the whole bug and hands it to your AI agent.