LiveMay 10, 2026
CodebaseCity
Drop a GitHub repo in, get a 3D city out. Files become buildings, folders become districts, complexity drives skyline height — 60 fps on 10k-file repos, fully client-side.Yashwanth Kamireddi · Creator · Lead Engineer
CodebaseCity turns any repository into a place you can walk through. Each file is a building, each folder is a district, and the import graph becomes the transit network running between them. The goal is to replace the flat file tree with spatial intuition — so engineers can feel architectural debt, not just read about it.
Modern repositories outgrow their own diagrams. Onboarding engineers stare at hundreds of folders, and even senior contributors lose sight of how subsystems relate. Static dependency graphs flatten the picture; IDE explorers miss scale and history. CodebaseCity treats the codebase as a city you can navigate — a representation that scales with intuition rather than against it.
- Complexity mapping — building height tracks LOC and cyclomatic complexity
- Dependency tracing — animated transit lines surface import/export edges
- Hotspot detection — color-coded districts highlight churn, large files, and circular dependencies
- Git replay scrubs through commit history so you can watch architecture grow
- Author attribution overlays contributors onto the buildings they shaped
- Blame-on-hover for instant ownership without leaving the canvas
- Click any building to drop into source with syntax highlighting and metrics
- Automated alerts for circular imports, oversized modules, and refactor candidates
- Universal search across files, classes, and symbols
CodebaseCity is a fully client-side WebGL experience. A Vite + React frontend pulls a public GitHub repo, the local filesystem (Chrome's File System Access API), or a built-in demo, parses sources into a normalized graph, and renders the city in the browser. A force-directed layout adapted to a grid plan generates the metropolis on the fly. Three.js handles rendering, with custom instancing and frustum culling so 10k+ files stay smooth at 60 fps. State lives in Zustand slices, and tree-sitter grammars power per-language parsing.
Try it at codebasecity.vercel.app — paste a public GitHub repo URL or open the built-in demo city.
A live multiplayer mode where teams can drop pins on architectural concerns, and a CI integration that posts a "diff city" on each pull request — visualizing exactly which districts a change touches.
