Free Git Diff Viewer - Review Patch Files and Unified Diffs

Paste or upload a patch, inspect changed files and hunks in unified or split view, filter by status, search within the diff, and export raw patch text, a concise summary, or parsed JSON.

Changed Files
src/components/Button.tsx
modified · 1 hunk
Hunk 1 / 1
@@ -1,13 +1,21 @@
1
1
import clsx from "clsx";
2
2
3
3
interface ButtonProps {
4
4
children: React.ReactNode;
5
+ loading?: boolean;
5
6
}
6
7
7
-export function Button({ children }: ButtonProps) {
8
+export function Button({ children, loading = false }: ButtonProps) {
8
9
return (
9
- <button className={clsx("rounded-lg px-4 py-2 bg-blue-600 text-white")}>
10
- {children}
10
+ <button
11
+ className={clsx(
12
+ "rounded-lg px-4 py-2 bg-blue-600 text-white disabled:opacity-60",
13
+ )}
14
+ disabled={loading}
15
+ >
16
+ {loading ? "Saving..." : children}
11
17
</button>
12
18
);
13
19
}
Export
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 43ab201..91ca2bd 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,13 +1,21 @@
 import clsx from "clsx";
 
 interface ButtonProps {
   children: React.ReactNode;
+  loading?: boolean;
 }
 
-export function Button({ children }: ButtonProps) {
+export function Button({ children, loading = false }: ButtonProps) {
   return (
-    <button className={clsx("rounded-lg px-4 py-2 bg-blue-600 text-white")}>
-      {children}
+    <button
+      className={clsx(
+        "rounded-lg px-4 py-2 bg-blue-600 text-white disabled:opacity-60",
+      )}
+      disabled={loading}
+    >
+      {loading ? "Saving..." : children}
     </button>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7c0b234..ad65e51 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -12,7 +12,7 @@ export default function HomePage() {
       <main className="mx-auto max-w-4xl p-8">
         <h1 className="text-4xl font-bold">Welcome</h1>
         <p className="mt-4 text-slate-600">
-          Ship faster with a cleaner component system.
+          Ship faster with a cleaner and more resilient component system.
         </p>
       </main>
     </>

Tired of memorizing Git commands? Use Tower — the Git client built for pros.

Visual Git client · Mac & Windows · Used by 100,000+ developers

Try Tower

Affiliate link — we may earn a commission at no extra cost to you.

More Developer Tools

Regex Tester

Search patterns in patches

JSON Formatter

Inspect exported diff JSON

Gitignore Generator

Git workflow helper

Tech Stack

Project inspection

HTML Cleaner

Review generated markup changes

Compare

Text comparison

Word Counter

Review summary length

Reading Time

Estimate review notes

Git Diff Viewer

Visualize git diffs clearly — compare commits, branches, and working tree changes with syntax highlighting, side-by-side display, and full file tree navigation for faster code reviews.

What Is a Git Diff Viewer?

A git diff viewer is a tool that displays the differences between versions of files in a git repository — comparing commits, branches, the working tree, or staged changes in a readable visual format. Where raw git diff output can be hard to scan, a diff viewer organizes diffs into a clear, navigable interface with syntax highlighting and structured file navigation.

A diff represents the changes between two revisions of a file — additions, deletions, and modifications shown line by line. Git tracks these diffs across every commit in a repository, making it possible to compare any two points in your project's version control history.

Diff viewers range from built-in command line tools to full graphical GUI applications like Meld, SmartGit, Kompare, and GitK — as well as IDE-integrated viewers in editors like IntelliJ. Each serves the same core purpose: make diffs fast to read, easy to navigate, and actionable for developers and reviewers.

Why Use a Git Diff Viewer?

From code reviews to merge resolution — where a diff viewer makes a real difference

Faster Code Reviews

Code reviews move faster when diffs are displayed in a readable visual format. A diff viewer highlights changes clearly, lets reviewers collapse unchanged sections, and supports inline comments — reducing the time it takes to understand what changed and why across multiple files in a pull request.

Clearer Commit and Branch Comparisons

Whether you're comparing two commits or inspecting the difference between branches before a merge, a git diff viewer makes the comparison easy to interpret. Visual output replaces raw terminal output, letting you navigate changes by file, directory, or hunk without scrolling through hundreds of lines of diff text.

Working Tree Inspection

Before committing, use a diff viewer to review working tree changes against the last commit or staged index. This helps catch unintended edits, verify the scope of your changes, and ensure only the right modifications go into each commit — keeping your version control history clean and intentional.

Merge and Conflict Resolution

When branches diverge, a visual diff tool makes it easier to resolve conflicts by showing both versions of a file side by side. Tools like Meld display all three versions — base, local, and remote — in a single window, letting you edit and accept changes without leaving the merge workflow.

Key Features of a Diff Viewer

What to look for in a capable git diff tool

Side-by-Side and Unified Modes

Switch between side-by-side display for clarity during code reviews and unified mode when generating patches or working with scripts. Both modes highlight additions and deletions clearly.

Syntax Highlighting

Syntax highlighting makes diffs readable by color-coding code structure — so you can see not just what changed, but understand the change in context without switching to a separate editor.

File Tree and Directory Navigation

Navigate multiple files and folder-level diffs from a structured file tree. Collapse unchanged files, expand modified ones, and jump directly to the version of the file you need to review.

Commit and Branch Comparison

Compare any two commits or branches in your git repository. View the full set of diffs across all changed files, with navigation between hunks and inline change summaries.

Pull Request Integration

Connect to GitHub and other VCS platforms to view pull request diffs, comment inline, and track the version of the file per commit — all without leaving your review workflow.

Patch Export and Custom Config

Generate a patch file from any diff to apply elsewhere, and configure custom diff drivers, external tool paths, and editor launch settings via git config for a fully tailored setup.

How to Use a Git Diff Viewer

From command line basics to configuring an external GUI difftool

1

Use git diff from the Command Line

Run git diff to compare your working tree to the last commit, or git diff --staged to view staged changes. Add commit hashes to compare any two commits. Use --name-only, --color, or --word-diff flags to modify the output format.

2

Install and Configure an External Diff Tool

Install a GUI tool like Meld, SmartGit, or Kompare. Configure it as your default difftool: git config --global diff.tool meld and git config --global difftool.prompt false. Set a custom command path if needed.

3

Launch the Difftool

Run git difftool to launch your configured external diff tool. It opens each changed file in a comparison window — use side-by-side mode to inspect the difference line by line and edit directly if needed.

4

Navigate the GUI Viewer

Open your git repository or folder in the graphical viewer. Use the file tree to select files, switch between display modes, collapse or expand hunks, and launch your editor for inline modifications.

5

Review Pull Requests and Export Patches

Connect to GitHub to view pull request diffs in context. For sharing or applying changes elsewhere, generate a patch file from the current diff and apply it to another branch or repository using git apply.

Useful Command Reference

git diff

Compare working tree to last commit

git diff --staged

View staged changes before commit

git diff A B

Compare two commits or branches

git difftool

Launch configured external diff tool

git diff --name-only

List changed file names only

git diff --word-diff

Show word-level diffs inline

Configuration Settings

Set your default difftool and configure it for mac, linux, or Windows by adding these settings to your global git configuration:

git config --global diff.tool meld

git config --global difftool.prompt false

git config --global merge.tool meld

For IDE integration, IntelliJ and other editors can be set as the launch target by pointing the difftool command to the editor's binary path in git config.

Comparisons

Popular Diff Tools Compared

Meld

Open-source, cross-platform GUI with excellent three-way merge support. Easy to configure as a git difftool on linux and mac. Ideal for visual comparison and merge conflict resolution.

SmartGit

A full-featured graphical git client with a built-in diff viewer, file tree navigation, and GitHub integration. Best for developers who want a complete GUI git workflow including staging, commit, and pull request viewing.

Kompare and GitK

Kompare is a lightweight KDE diff tool suited for quick file comparisons. GitK is git's built-in graphical repository browser — useful for viewing commit history and diffs without installing additional software.

Pros and Cons

Improves readability of diffs and speeds up code reviews significantly

GUI tools simplify merge conflict resolution and branch comparison

Customizable via git config — integrate with any editor or external tool

Works across platforms: mac, linux, and Windows with the right configuration

GUI tools are heavier than command line git diff for quick single-file checks

External difftool setup requires install and configuration before first use

Large diffs across many files can be harder to navigate without strong file tree support

Visualize Git Diffs with Confidence

A good diff viewer turns raw git output into a clear, navigable picture of what changed — making code reviews faster, merges safer, and version control history easier to understand.

Configure your preferred difftool, integrate it with your editor and workflow, and use side-by-side display and syntax highlighting to make every diff review productive.

Frequently Asked Questions

Common questions about git diff, diff viewers, and difftool configuration

What does git diff show?+

git diff shows the differences between two states of your repository — the working tree vs the last commit, staged changes vs unstaged, or any two commits or branches. The output lists added lines (prefixed with +) and removed lines (prefixed with -) for every changed file, grouped by hunk.

How do I set a default diff tool?+

Run git config --global diff.tool meld (replacing 'meld' with your preferred tool) and git config --global difftool.prompt false to skip the confirmation prompt. For tools not natively supported, set a custom command path using git config --global difftool.mytool.cmd.

When should I use side-by-side vs unified mode?+

Use side-by-side display for code reviews and merge conflict resolution — the visual comparison makes it easier to understand the difference between versions of a file. Use unified mode when generating patches, sharing diffs as text, or running scripts that parse diff output.

Can I view diffs for a pull request locally?+

Yes — fetch the pull request branch locally, then run git diff main..pr-branch to compare. You can also configure your difftool to launch for the comparison. SmartGit and other GUI tools with GitHub integration can display pull request diffs directly from the repository without manual branch fetching.

How do I resolve merge conflicts with a diff viewer?+

Run git mergetool after a merge conflict. Git launches your configured merge tool — Meld, for example — with a three-panel window showing the base, local, and remote versions. Edit the middle panel to resolve each conflict, save the file, and git will mark it as resolved once you close the tool.