git-visualizer

landing page
tree of any directory initialized with git
logs

Inspiration

Git is powerful but unintuitive, especially for visual learners. Existing tools rely heavily on the command line, making it hard to understand branches, merges, and repository state. We wanted to make Git more accessible to beginners and create something you can actually see.

What it does

Git Visualizer displays Git history as an interactive DAG, showing branches, merges, and commit order clearly and chronologically. Users can open any local repo, switch branches, inspect commits, and commit, pull, or push directly from the UI (with cute animations!). A character indicator shows the current HEAD position and repo state in real time.

How we built it

We built Git Visualizer as a desktop app using Electron, React, TypeScript, and TailwindCSS. Git data is fetched via Electron IPC handlers and rendered using a custom SVG-based DAG layout engine with topological sorting to preserve commit relationships and timestamps.

Challenges we ran into

Key challenges included parsing complex Git output and designing a readable graph for complex branch and merge histories. We initially experimented with graph libraries and even explored the VS Code Git visualization approach, but both proved too rigid for our needs. We ultimately built a custom DAG layout engine to control lane assignment, merge routing, and chronological spacing, while carefully managing SVG interactions like hover tooltips and layered paths.

Accomplishments that we're proud of

We’re proud of creating a clean, readable Git DAG with consistent branch colouring, smooth merge paths, and an intuitive visual indicator of repository state. The layout scales while minimizing visual clutter.

As a team with primarily backend experience- and little prior exposure to frontend UI design or tools like Figma- we challenged ourselves to think in terms of user stories and usability first. Designing and implementing a visual, interactive interface from scratch pushed us well outside our comfort zone and made the end result especially rewarding.

What we learned

We gained hands-on experience with DAG algorithms, Git internals, Electron IPC patterns, SVG rendering, and global state management in React. Just as importantly, we learned how critical thoughtful UI design and frontend–backend integration are to building tools that are not only functional, but genuinely usable and intuitive.

What's next for git-visualizer

Planned features include zoom and pan, commit search, stash visualization, rebase and cherry-pick support, tag management, performance optimizations for large repos, and exportable graphs.