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.