Chris Collins

Tools · dev

Git, visualised

Learn git by doing: a terminal that runs real git commands against a faithful in-browser git (real SHA-1 object ids), with an animated commit graph, the three trees, the object database, a 34-lesson course with automatic goal checks, and disaster-recovery scenarios.

Added

How to use it

A git repository that lives in this page. Type ordinary git commands in the terminal and watch what they do: the commit graph animates as commits, branches and HEAD move (remote-tracking branches are dashed, tags amber, commits only the reflog still remembers are faint); Three trees shows each file in the working directory, the index and HEAD; Internals shows the object database — blobs, trees, commits and tag objects with their real ids — plus the files in .git/ (HEAD, refs, packed-refs, config). After every command a line explains what changed and why.

The engine is a small but faithful git: objects are serialised byte for byte as git writes them, so ids are real SHA-1s — the same as real git’s for the same contents, names and dates. The clock moves 60 seconds per command, which makes everything reproducible: a share link simply replays your commands.

How to use it

  • Pick a lesson from the menu. Each one sets up a repository, states a goal and checks it after every command — "make the graph look like this" (the Target graph, drawn from the model solution; your own commit messages are fine) plus specific checks. Hint reveals hints one at a time; Solution shows the commands and can play them. Finished lessons get a tick, remembered in this browser.

  • The course: Basics (first commit, the staging area, objects, amend, reading history), Branching (pointers, detached HEAD, rename/move/delete), Merging (fast-forward, three-way, --no-ff, --squash, conflicts), Rebasing (rebase, interactive rebase, --onto, cherry-pick), Undoing things (reset modes, revert, restore, stash), Remotes and collaboration (fetch and remote-tracking branches, pull with merge or rebase, rejected pushes, --force-with-lease), Rewriting history safely, Recovering lost work (reflog), Bisect (a find-the-bug game: test runs the tests on the current checkout) and a note on worktrees.

  • Disasters and recovery are scenarios: committed to the wrong branch, force-pushed over a colleague, lost a stash, commits made on a detached HEAD, rebased a shared branch.

  • Sandbox modes: an empty directory, a small repository, or a clone of a shared origin with a teammate — Alex pushes (or teammate commit -m "…") makes Alex push a commit, so you can practise fetch, pull, rejected pushes and force pushes.

  • Files: echo "text" > file (and >>), cat, ls, rm, touch, edit <file> (opens an editor; edit <file> text appends), and change <file> (appends a numbered line — quick edits). git rebase -i opens a visual todo editor (reorder, pick, reword, edit, squash, fixup, drop) that can also be edited as text. Up/down recalls commands, Tab completes, tap a commit to insert its id.

  • Undo replays every command but the last; Reset starts the exercise again. ⛶ Full screen (or f) fills the window; [ hides the lesson panel there; Escape leaves.

Commands: init, clone, status [-s], add, rm [--cached], mv, commit [-a] [-m] [--amend] [--allow-empty] [--fixup], log [--oneline] [--graph] [--all] [-p] [--stat], show, diff [--staged] [<rev> [<rev>]], branch (create, -d/-D, -m, -f, -vv, --set-upstream-to), switch [-c] [--detach], checkout [-b] [<rev>] [-- <file>], restore [--staged] [--source], merge [--no-ff|--ff-only|--squash|--abort|--continue], rebase [-i] [--onto] [--continue|--skip|--abort], cherry-pick [-x], revert, reset [--soft|--mixed|--hard] [<paths>], stash [push -u -m|pop|apply|list|drop|show|clear], tag [-a -m] [-d], reflog, bisect start|good|bad|skip|run|log|reset, clean -n/-f/-d/-x, fetch [--prune], pull [--rebase|--no-rebase|--ff-only], push [-u] [--force-with-lease] [--force] [--delete] [--tags], remote, fsck [--unreachable], gc, cat-file, ls-files -s, ls-tree, hash-object, rev-parse, merge-base, write-tree, describe, blame, shortlog, config, worktree list. Revisions: ids (4+ hex digits), branches, tags, origin/main, HEAD~2, HEAD^2, @{u}, HEAD@{3}, stash@{1}, rev:path, A..B, A…​B.

How it was checked

The test suite runs the same command sequences in this engine and in real git (2.52) in a temporary directory, with author, committer and dates pinned, and compares every ref, HEAD, the index (git ls-files -s) and every working file after each step: commits, amend, tags (lightweight and annotated), fast-forward / --no-ff / --squash merges, three-way merges with conflicts (the conflict markers and the resolved merge commit), rebase (with conflicts, --continue, --skip, --abort), rebase --onto, interactive rebase (reorder, squash, fixup, drop, reword), cherry-pick (-x), revert, reset in all modes, restore, rm/mv, stash (with untracked files), bisect (the same midpoints as git, chosen with git’s algorithm) and a clone/fetch/pull/push session with a teammate including rejected pushes and --force-with-lease. The commit ids agree.

Limits

  • No rename detection in merges (git’s ort strategy follows renames; here a rename on one side and an edit on the other conflict as modify/delete). git status and commit summaries do detect exact renames.

  • Text files only; no file modes beyond 100644, no symlinks or submodules. The working directory is one directory (worktree is a note), and there is one remote, origin.

  • Conflict markers use git’s default merge style; git sometimes shrinks a conflict further (its "zealous" merge) where both sides made identical edits next to each other.

  • git gc marks objects as packed and moves refs to packed-refs; it does not delta-compress or prune (git keeps unreachable objects two weeks and reflog entries 90 days anyway).

  • Hooks, signing, rerere, filter-repo, sparse checkout and partial clone are not modelled — the Git helper has recipes for those.

  • Progress and your command history stay in this browser; share links carry commands, never anything else.

Related: Git helper (recipes, .gitignore, commit messages) · Git client (browse your own repositories) · Diff.

Linking to an example

Parameter Meaning

lesson

A lesson id, e.g. ?lesson=merge-conflict

sandbox

empty, repo or remote, e.g. ?sandbox=remote

s

A packed scenario: the lesson or sandbox plus every command typed (what Share link makes once you have run something)

Presets: ?lesson=first-commit · ?lesson=rebase-interactive · ?lesson=force-pushed · ?lesson=bisect · ?sandbox=remote.

Runs entirely in your browser; nothing you type leaves this page.