Have you ever wanted to just take a step back and actually see the architecture of your project? Not as a file tree, but as a living, breathing structure.
I've always been fascinated by software visualization. I wanted a way to instantly spot bloated files and understand the layout of a project at a glance. So, I built an open-source VS Code extension called Code to City.
š How it works
It scans your current workspace and renders it as an interactive 3D city directly inside a VS Code webview panel.
The mapping is pretty straightforward but visually satisfying:
Districts & Neighborhoods: Represent your folders and directories.
Buildings: Represent your individual files.
Building Height (Skyscrapers): Based on the file size/Lines of Code (LOC).
Whenever a file starts getting too large and needs refactoring, it literally towers over your city like a massive skyscraper.
āļø The Performance Challenge
Building a heavy 3D webview extension inside VS Code comes with its own set of hurdles. I personally do a lot of my development connecting to my Linux servers via Remote SSH in VS Code. Running a resource-heavy 3D render in that kind of environment can easily freeze the editor if not optimized correctly.
Therefore, my main focus was keeping the rendering pipeline smooth and ensuring it doesn't hog system resources or disrupt the development workflow.
š Try it out!
You can easily generate your own city by installing the extension and running the Code to City: Render command from the command palette.
I would absolutely love to hear your feedback! How does it handle your massive monorepos? What other metrics would you like to see visualized (e.g., color-coding by tech stack/language)?
š VS Code Marketplace: Install Code to City
š GitHub Repository: hubinoretros/code-to-city
