I built a tool that visualizes any GitHub repo as a living graph

#opensource #github #webdev #showdev

The idea

I kept getting lost in unfamiliar codebases. Opening a new repo
and trying to understand its architecture by reading file names
felt slow and incomplete. I wanted to see the structure before
diving into the code.

So I built GitVize.

How it works

Replace "hub" with "vize" in any GitHub URL:

github.com/facebook/react → gitvize.com/facebook/react

You instantly get an interactive visualization of that repo.

What it shows

File Tree Graph — the entire repo rendered as a
physics-based force-directed graph. Files are nodes, folder
relationships and code imports are edges. Nodes repel each other
and edges pull connected files together — so the shape of the
graph reflects the actual architecture of the code.

Architecture Diagram — an AI-generated high-level overview
of the major modules and how they relate to each other.

Contributors Network — shows collaboration patterns between
contributors based on which files they've both touched.

Dependency Graph — parses package.json, requirements.txt,
go.mod and renders the dependency tree.

The tech

Next.js 14 App Router
Pixi.js for WebGL canvas rendering
d3-force for physics simulation
Cytoscape.js for graph layout
PostgreSQL for caching

The file tree graph was the hardest part. Getting thousands of
nodes to simulate physics at 60fps without freezing the browser
required moving the force simulation to a Web Worker and using
Pixi.js for GPU-accelerated rendering instead of SVG.