StudyGit: Replaying Git History in VS Code

I built StudyGit, a VS Code extension that helps you understand code changes by watching them happen. Instead of staring at a static diff, you press play and the code re-types itself, commit by commit, character by character.

The idea came from how I actually learn from other people's repos: I want to see the order things were built in, not just the final state. A diff tells you what changed; it doesn't show you the story.

Why I made it

Reading a big commit as a wall of red and green is hard. Your eyes jump around, and you lose the sense of intent behind each change. I wanted something closer to watching someone code over your shoulder:

• see additions and deletions appear in sequence,
• feel the pace of how a file came together,
• and pause to think whenever something interesting shows up.

So StudyGit turns Git history into a playback you can scrub through, right inside the editor you already work in.

How it works

The extension takes a Git repository and replays its commits as an animation:

• Interactive commit playback, code changes unfold character by character, like a typing animation
• Visual highlighting, additions and deletions are shown with color-coded highlights so you can track what's being added versus removed
• Playback controls, a debug-style control interface with play, pause, skip, and stop
• Customizable speed, slow it down to study, or speed it up to skim
• "Take a break", pause between commits so the playback doesn't run away from you
• Auto cleanup, temporary files created during playback are cleaned up automatically

You start it from the Command Palette with "StudyGit: Start Commit Playback", pick a commit to start from, and watch the history roll forward. There are commands wired for showing the controls, toggling playback, skipping the current commit, and stopping the session.

What I learned

Building StudyGit taught me a few things about VS Code as a platform and about turning a vague idea into something usable:

1. The editor is a great canvas. Decorations and highlights let me animate real code in place, rather than building a separate viewer.
2. Controls matter more than the effect. The typing animation is the fun part, but play/pause/skip/speed is what makes it something you'd actually use to study code.
3. Small friction kills tools. Auto cleanup and a familiar debug-style control bar were what made it feel finished instead of like a demo.

It's published on the VS Code Marketplace, so you can install it straight from the Extensions view, search for "StudyGit" and hit install.

If you want to look at the code, here it is: studygit on GitHub.