Patcherly started as my university dissertation. A small demo. A handful of files. Designed to prove a concept.
8 months later it’s an enterprise-grade application. Hundreds of files. Thousands of imports stitching them together.
I wanted to see the journey. Not a flat dependency graph at a single moment in time — a film. The whole story from commit one to today, every feature blooming into existence the moment it was actually built, every import drawn the day a new file picked up its first dependency.
Every repository has a story. The first commit. The week the auth module landed. The refactor that split one feature into three. The slow accumulation of tests around the parts everyone was scared of.
So I built Repo Visualizer and open-sourced it.
Live demo: repovisualizer.netlify.app
Source: github.com/Jany-M/repo-visualizer
Every file in the repo is a node. Every import between two files is an edge. Each top-level directory becomes a feature cluster — auth, payments, api, ui — laid out on a soft ring by a
d3-force
simulation.
Press play and the timeline walks the git log commit by commit. Files bloom into existence the day they were first committed. A ripple radiates outward from every file each commit touched. You watch features arrive in real time, see which areas attract the most churn, and notice when a new module gets adopted across the rest of the system.
The feature I actually use the most: the file inspector
Click any node and you see Depends on and Imported in for that file, plus the recent commits that touched it.
For a codebase the size Patcherly has grown into, this is the part I reach for every day. It’s how I quickly answer “what breaks if I change this?” without grepping through hundreds of files. Click a cluster in the legend and that whole folder lights up while everything else dims — useful for asking “what does payments actually talk to?” and getting an answer in one glance.
The animation is the pretty part. The inspector is the part that earns its keep.
Four themes, switchable live
Same data, four wildly different aesthetics. Because once the engine was built it would have been a crime not to.
- Galaxy — deep space, glowing stars, supernova ripples. The default.
- Organic — bioluminescent cells breathing in soft cyan, light particles flowing along filaments.
- Neural — sharp neon geometry on a circuit-board grid, hexagonal shockwaves on every commit.
- Minimal — cream paper, restrained ink, fine typography. Reads like a New York Times Upshot piece.
What else is in the box
- Timeline scrubber with play/pause, variable speed, and a one-click jump to the final state of the repository.
- Auto-fit camera that keeps the growing graph in view; pinch-zoom and pan on desktop and mobile.
- WebGL fallback when the graph gets large (Patcherly territory); Canvas for the prettier glow on smaller repos.
- Export the animation as a WebM video or animated GIF, with the repo name, commit date, and primary author burned in. Drop it into a Loom, a tweet, or a board deck.
Try it on your own repo
The live demo ships with a synthetic dataset so you can play with the themes immediately. To point it at your own code:
git clone https://github.com/Jany-M/repo-visualizer
cd repo-visualizer
npm install
npm run analyze -- /path/to/your/repo
npm run devThe analyzer walks the entire git history, parses imports across JS/TS, Python, Go, Rust, Java/Kotlin, Ruby, PHP, and CSS/SCSS, and writes the result to
public/data/history.json
. The web app picks it up on the next refresh.
There’s no server, nothing leaves your machine, and a
repovisualizer.config.json
lets you exclude paths you don’t want in the picture.
It’s GPL3-licensed. If you point it at your repo and it looks beautiful, send me a clip — I want to see your codebase as a galaxy.
The codebase that started all this — Patcherly — is in free private beta. Catch live production bugs and fix them in real time, in seconds.