Most developers have a confession: they’ve been using Git for years, but branches still make their head spin. You type git rebase, something breaks, you git reset --hard, and you swear to never touch rebase again. Sound familiar?
Here’s the thing — Git’s underlying model is actually elegant. The confusion comes from learning it backwards: memorizing command syntax before understanding what those commands actually do to your repository. Learn Git Branching (https://learngitbranching.js.org) flips this approach entirely, and you can start using it in under thirty seconds without creating an account.
What Learn Git Branching Actually Is
Open the site and you’re dropped straight into an interactive sandbox. On the left, a terminal where you type real Git commands. On the right, an animated graph of your repository — nodes for commits, lines for branches, arrows showing where HEAD points. Type git commit and watch a new node appear. Type git branch feature and see a new label branch off. Type git checkout feature && git commit twice and watch the divergence form in real time.
This is the key insight: Git’s mental model is a directed acyclic graph (DAG), and seeing that graph update instantly as you type commands makes the abstractions concrete in a way that no amount of reading can match.
The tool organizes content into two main sequences: Main (covering commits, branching, merging, rebasing, moving around HEAD, relative refs, reversing changes) and Remote (covering the full push/pull/fetch workflow with remote repositories). Each sequence contains multiple levels, and each level presents a specific challenge — “make the repository look like this target state.”
No login. No progress sync to a server. Your level completions are saved in localStorage, so they persist across browser sessions on the same machine. If you want to try something risky, there’s a reset command to wipe the sandbox and start the current level fresh.
Why Git Visualization Matters
Consider the difference between these two explanations of git rebase main:
Text explanation: Rebase replays commits from the current branch onto the tip of the target branch, resulting in a linear history.
Visual explanation: Watch the commits from your feature branch detach, get rewritten with new SHA hashes, and reattach as a clean line on top of main — all animated in about half a second.
Both say the same thing. Only one actually lands.
This is the same principle behind tools like VisuAlgo, which visualizes sorting and graph algorithms through animation, or Python Tutor, which steps through Python code execution line by line showing variable state. The pattern holds: for abstract computational processes, visualization isn’t a teaching aid — it’s the explanation.
Git is particularly suited to this treatment because its data model is genuinely visual. Every repository is literally a graph. The text commands are just a textual interface to that graph. When you see it displayed, the commands stop being incantations and start being graph manipulations.
The Levels: A Walkthrough
The introductory sequence starts gently. Level 1 asks you to simply type git commit twice. The instructions explain what a commit is. The graph shows you a linear chain of three nodes. That’s it.
By level 5, you’re cherry-picking commits and moving branches around with git branch -f. By the time you reach the remote section, you’re managing diverged histories between local and origin, resolving the situations that actually break developers in production.
A few standout exercises:
- “Detach yo’ HEAD” — teaches relative refs like
HEAD~3by forcing you to check out commits by position rather than branch name. This alone explains dozens of mysteriousdetached HEAD statewarnings. - “Locally stacked commits” — presents a realistic scenario where you’ve mixed debugging commits with a real feature, and you need to ship the feature without the debug noise. The solution involves either
git rebase -iorgit cherry-pick, and the level accepts both. - “Push Main!” — the remote section capstone, simulating the situation where your push is rejected because origin has moved ahead. You need to integrate the remote changes before you can push, choosing between merge and rebase strategies.
“The git parable [at learngitbranching.js.org] is one of the most useful things I’ve ever read for actually understanding git rather than just using it.” — recurring sentiment on Hacker News discussions about Git learning resources
How It Compares to Other Git Learning Approaches
| Approach | Time to Start | Interactivity | Covers Remotes |
|---|---|---|---|
man git-rebase | Instant | None | Yes |
| Git book (git-scm.com) | Minutes | None | Yes |
| GitHub’s interactive tutorial | Minutes | Partial | Partial |
| Learn Git Branching | Instant | Full | Yes |
| Video courses | Minutes | None | Yes |
The man pages and official documentation are authoritative but assume you already understand the mental model. Video tutorials require passive watching. GitHub’s Try Git has been deprecated multiple times and redirected elsewhere. Learn Git Branching has been continuously maintained since 2013 and remains the default recommendation when developers ask “how do I actually learn Git branching?”
One honest limitation: Learn Git Branching simulates a repository; it doesn’t work with real files. You won’t practice resolving actual merge conflicts in code. For that, you need a real repository and something like Compiler Explorer or a local dev environment. Learn Git Branching handles the “what is happening to my repository structure” question; working through real conflict resolution is a separate skill.
Open Source and Actively Maintained
The project lives at github.com/pcottle/learnGitBranching with over 29,000 GitHub stars and contributions spanning more than a decade. The codebase is JavaScript, and the visualization runs entirely client-side — no server involved, no telemetry collecting your commands.
This matters for privacy-conscious learners: you can open the browser’s network tab and watch no requests fire as you type commands and progress through levels. Everything runs in your browser’s JavaScript engine. The site loads, then you’re working with local state only.
Translations are community-contributed; the site supports over a dozen languages through URL parameters (e.g., ?locale=zh_CN). This makes it accessible to learners globally without fragmentation — the same codebase serves everyone, and the sandbox works identically regardless of language setting.
Who Benefits Most
Junior developers encounter Git early and often get by with a small set of commands: add, commit, push, pull. This works until it doesn’t — until a rebase goes wrong, or until they need to cherry-pick a fix from a release branch, or until they’re asked to clean up a messy commit history before a PR review. Learn Git Branching is the fastest path from “I use Git” to “I understand Git.”
Developers switching teams who suddenly need to deal with a different branching strategy (Gitflow vs. trunk-based vs. GitHub flow) can use the rebase and merge sections to quickly internalize what their new team’s workflow actually does to commit history.
Experienced developers who’ve avoided git rebase -i out of superstition will find the interactive rebase level genuinely clarifying. The visual feedback loop removes the anxiety of “I don’t know what’s going to happen.”
Educators teaching version control in bootcamps or courses have used Learn Git Branching as an in-class exercise for years — the visual feedback makes discussion easier, and the no-signup requirement means no time lost on account creation during a workshop.
Getting Started Right Now
Go to learngitbranching.js.org. Click “Start.” Type git commit. That’s the entire onboarding process.
If you want to skip ahead to a specific concept, use the level select dialog (click the level name at the top of the page). If you’re already comfortable with local branching and want to focus on the remote workflow — the part that trips up most teams — jump straight to the Remote section.
For teams that want to standardize Git knowledge without mandating specific courses or paid tools, Learn Git Branching is a natural reference: it’s free, browser-based, requires no account, and covers exactly the concepts that cause the most day-to-day confusion. Share a link to a specific level to make a targeted point in a code review discussion.
The tool has been teaching developers how Git actually works since 2013. In a field where most learning tools come and go, that kind of longevity is a signal worth paying attention to.