Gitflow
A client-side git implementation with real-time visualization of git trees and changes.
OVERVIEW
Why build a git visualization tool?
Making git intuitive through interactive, real-time visualization.
A little while back, I was working on a project with someone who was a bit new to git. While working with them, I noticed that they were struggling to properly contribute to the project because of git. Every time they tried to push, the push would either break or they would have merge conflicts. I did some whiteboard drawings to explain how git works and it seemed to help them a bit. This inspired me to create Gitflow, a tool that visualizes git operations and lets you test out git commands in a safe, interactive environment.
Git is a fundamental tool for developers and it's a relatively simple concept. It's easy to learn relatively fast but I found that by just letting others play and interact in a test environment, they were able to understand git a lot better. The other thing I thought that could be interesting was to give a pre-emptive visualization of what their git command would do before they actually run it.
HOW IT WORKS
Interactive Git Console
Type a command, see the result before you run it.
The user gets a simple console where they can type in git commands. When they run a command, the git engine (written in Rust and compiled to WebAssembly) processes the command and updates the git state. Before they press enter, the visualization layer pre-emptively shows what the result of the command would be.
ARCHITECTURE
Three layers, one experience
A Rust core compiled to WebAssembly, a React visualization layer, and a clean integration bridge.
Git Engine (Rust/WASM)
The core git implementation: object database for blobs, trees, and commits; reference management for branches, HEAD, and tags; and operations like merge, rebase, and cherry-pick.
Visualization (React)
An SVG-based graph renderer with dynamic layout algorithms, animated transitions, interactive commit nodes, and branch-colored paths with merge indicators.
Integration Bridge
WASM bindings exposing a clean API for repository operations, state queries, and event subscriptions for real-time updates. Everything runs client-side.
RELATED