Skip to main content
RapidDev - Software Development Agency
github-for-non-tech

How to View Commit Differences (Diff) in GitHub

A diff (short for difference) shows you the exact lines that changed between two versions of a file. On GitHub, green lines with a '+' were added and red lines with a '-' were removed. You can switch between 'unified' view (one column) and 'split' view (side-by-side) using the gear icon. This visual comparison is how reviewers check pull requests and how you can track what an AI tool changed.

What you'll learn

  • What a diff is and how to read one
  • The meaning of green (+) and red (-) lines
  • How to switch between unified and split view
  • How to use diffs to review pull requests and commits
Book a free consultation
4.9Clutch rating
600+Happy partners
17+Countries served
190+Team members
Beginner7 min read7 minutesGitHub.com (Free, Pro, Team, Enterprise) — all plansMarch 2026RapidDev Engineering Team
TL;DR

A diff (short for difference) shows you the exact lines that changed between two versions of a file. On GitHub, green lines with a '+' were added and red lines with a '-' were removed. You can switch between 'unified' view (one column) and 'split' view (side-by-side) using the gear icon. This visual comparison is how reviewers check pull requests and how you can track what an AI tool changed.

What Is a Diff and Why Should You Care?

A diff is a visual comparison that shows exactly what changed between two versions of a file. Instead of reading the entire file, you can see just the lines that were added, removed, or modified. Think of it like Track Changes in Microsoft Word — the document highlights insertions in green and deletions in red so you can instantly see what is different. On GitHub, diffs appear in two places: when you click on a commit to see what changed, and at the bottom of a pull request to review all proposed changes before merging. Every line in a diff has a prefix: a '+' sign means the line was added, a '-' sign means the line was removed, and lines with no prefix are unchanged context that GitHub shows for reference. GitHub offers two viewing modes: Unified view shows everything in a single column (the default), while Split view shows the old version on the left and the new version on the right side-by-side. Understanding diffs is essential even if you are non-technical. When an AI tool like Lovable or V0 makes changes, reviewing the diff tells you exactly what was modified — no guessing required.

Prerequisites

  • A free GitHub account at github.com
  • A repository with commits or pull requests containing changes

Step-by-step guide

1

Open a commit to see its diff

Navigate to your repository and click the 'Commits' link near the top. Click on any commit message to open the commit detail page. Below the commit information, you will see the diff for every file that was modified. Each file has its own section with a header showing the filename and the number of additions and deletions. The actual changes are displayed below, with colored line highlighting.

Expected result: You see the diff view with file-by-file changes displayed below the commit details.

2

Read the green and red lines

In the diff, lines highlighted with a green background and a '+' prefix were added in this commit. Lines highlighted with a red background and a '-' prefix were removed. Lines with a white or gray background are unchanged — they are shown for context so you can see where the changes fit within the file. If you see a red line immediately followed by a green line, it usually means that specific line was edited — the old version was removed (red) and the new version was added (green).

Expected result: You can identify which lines were added, removed, or modified by their color and prefix.

3

Switch between unified and split view

By default, GitHub shows diffs in 'unified' view — all changes in a single column. To switch to 'split' view (old version on the left, new version on the right), look for the gear icon or the 'Display the diff' settings near the top of the diff section. Click it and select 'Split.' Split view is easier for comparing large changes because you can see both versions side-by-side. Unified view is better for small changes because it takes up less space.

Expected result: The diff switches between single-column (unified) and side-by-side (split) layout.

4

Review a pull request diff

Pull request diffs work the same way but show the combined changes from all commits in the PR. Go to the Pull Requests tab, click on any open PR, and click the 'Files changed' tab. You will see every file modified by the PR with the same green/red highlighting. This is the view reviewers use to check changes before approving. You can leave comments on specific lines by clicking the blue '+' icon that appears when you hover over a line number.

Expected result: You see the full diff for a pull request and can leave line-level comments.

5

Compare any two branches or commits

You can view a diff between any two points in your project. Go to your repository and add '/compare' to the URL (for example, github.com/yourname/yourrepo/compare). Select the base branch on the left and the compare branch on the right. GitHub shows you every difference between those two branches. This is useful for seeing what a feature branch adds compared to main, or for comparing what changed between two specific releases.

Expected result: You see a diff comparing two branches, showing all files that differ between them.

Complete working example

reading-a-diff.md
1# How to Read a GitHub Diff
2
3## Unified View (default, single column):
4
5 function PricingCard({ plan }) {
6 return (
7 <div className="card">
8- <h3>{plan.name}</h3>
9+ <h3 className="text-xl font-bold">{plan.name}</h3>
10- <p>$29/month</p>
11+ <p>${plan.price}/month</p>
12+ <span className="badge">Most Popular</span>
13 </div>
14 );
15 }
16
17## What each line means:
18- No prefix (white) = unchanged, shown for context
19- Red with "-" = this line was REMOVED
20- Green with "+" = this line was ADDED
21- Red then Green = line was EDITED (old new)
22
23## Split View (side-by-side):
24- Left column = OLD version (before the change)
25- Right column = NEW version (after the change)
26- Empty spaces = line only exists in one version

Common mistakes when viewing Commit Differences (Diff) in GitHub

Why it's a problem: Thinking red lines mean an error

How to avoid: Red lines in a diff mean the line was removed, not that something is wrong. Removing old code is often intentional and healthy.

Why it's a problem: Only reading the green lines and ignoring the red

How to avoid: The red (removed) lines are equally important. They show what was replaced or deleted. Understanding both sides gives you the full picture.

Why it's a problem: Getting overwhelmed by large diffs

How to avoid: Use the file navigation to jump to specific files. Focus on the files you care about first — you do not have to read every line.

Why it's a problem: Not switching to split view for complex changes

How to avoid: When unified view is confusing, switch to split view. Seeing old and new side-by-side makes it easier to understand what changed.

Best practices

  • Use split view for large or complex changes and unified view for small edits.
  • Read the context lines (white/gray) to understand where in the file the change happened.
  • Look for character-level highlights within lines to spot small word or value changes.
  • Leave comments on specific lines in PR diffs to ask questions or suggest improvements.
  • Focus on the files most relevant to you — page files and component files for visual changes, config files for settings.
  • Compare branches using the /compare URL to understand the full scope of a feature before merging.
  • When reviewing AI-generated changes, look for unexpected deletions — red lines that remove functionality you want to keep.

Still stuck?

Copy one of these prompts to get a personalized, step-by-step explanation.

ChatGPT Prompt

I am looking at a GitHub diff for a pull request. There are green and red lines, some with + and - symbols, and I see both unified and split view options. Explain what all of this means in simple terms, as if I have never seen a diff before.

Frequently asked questions

What does it mean when a line is both red and green?

A red line immediately followed by a green line means the line was edited. The red shows the old version that was removed, and the green shows the new version that replaced it.

Can I see diffs without being a developer?

Absolutely. Diffs are visual and designed to be read by anyone. The colors and symbols make it clear what changed. You do not need to understand the code to see that text was added, removed, or modified.

What is the difference between unified and split view?

Unified view shows all changes in one column — removed lines above, added lines below. Split view shows the old version on the left and the new version on the right, side by side. Split is better for complex changes.

Can I leave a comment on a specific line in a diff?

Yes. In a pull request's 'Files changed' tab, hover over any line number and click the blue '+' icon that appears. You can type a comment that will be attached to that exact line for the author to see.

Do AI tools like Lovable show diffs when they make changes?

Lovable does not show diffs in its own interface, but all changes are synced to GitHub as commits. You can always view the diffs on GitHub by clicking the commit in your repository.

Can RapidDev help me understand what changes AI tools made to my code?

Yes. RapidDev reviews diffs from AI-generated commits, explains the changes in plain language, and flags any unexpected modifications — perfect for non-technical founders who want to understand what was built.

Is there a limit to how large a diff can be on GitHub?

Yes. GitHub limits diff rendering to files under 1MB and commits with under 300 changed files. For very large changes, some files may show a 'Diff too large' message with a link to view the file directly.

RapidDev

Talk to an Expert

Our team has built 600+ apps. Get personalized help with your project.

Book a free consultation

Need help with your project?

Our experts have built 600+ apps and can accelerate your development. Book a free consultation — no strings attached.

Book a free consultation

We put the rapid in RapidDev

Need a dedicated strategic tech and growth partner? Discover what RapidDev can do for your business! Book a call with our team to schedule a free, no-obligation consultation. We'll discuss your project and provide a custom quote at no cost.