Repo-Verse

Drop a project folder and watch it become a 3D solar system: every file a planet sized by bytes, every folder a system, every commit a step in a time-lapse. Your code is read locally through the File System Access API and never uploaded.

Loading tool…

How a folder becomes a solar system

The mapping is arithmetic, not decoration. File size sets planet radius on a logarithmic curve — clamp(1 + log10(bytes + 1) × 0.5, 0.3, 5) — so a 40 KB module is visibly bigger than a 2 KB one without a 2 MB asset swallowing the screen. Directory depth sets orbital distance, so the shape of your nesting becomes the shape of the system. File extension picks the colour and the planet archetype: JavaScript burns star-yellow, Python is a blue ice world, Rust is hot rock, Go is an ocean, Markdown is forest green, JSON is crystal. Estimated complexity earns a file a ring, and folders become gas giants with their own children in orbit.

Reading the folder is the browser's own work. window.showDirectoryPicker() hands the page a directory handle, and the tool walks it recursively, reading sizes, modification times and — for text files under half a megabyte — the contents, to count lines, estimate branching complexity, and collect import statements for the dependency graph. Files inside node_modules, .git, dist, build and the other usual suspects are skipped by default, and that ignore list is editable.

Large repositories are not thinned by accident. Above roughly a thousand bodies, the shallowest and largest files keep their planets and everything else becomes a coloured asteroid belt, so a twenty-thousand-file monorepo still turns at full frame rate and the HUD tells you exactly how many files went into the dust.

What it is actually good for

Structure you can see is structure you can argue about. A tree view tells you the names; a system view tells you the proportions — that one folder holds two-thirds of the mass, that the tests orbit far out and thinly, that a single file has grown into a gas giant nobody meant to create. That is a useful thing to put on a screen during a refactor discussion, an onboarding session, or an architecture review.

The privacy point is not incidental either. Source code is the one thing most developers genuinely cannot paste into a random web tool: it is usually someone's intellectual property, and it frequently contains credentials. Repo-Verse has no upload endpoint and no server component. The folder is read through a permission-gated browser API, the parsing and the 3D rendering happen on your own machine, and if you edit a file in the built-in Monaco editor it is written straight back to disk through the same file handle — never round-tripped through anyone's backend.

Getting more out of it

  • Use the "Open folder" button rather than "Choose folder" when your browser supports it: only the File System Access API gives write-back saving and access to .git for the timeline.
  • If the scene looks sparse, check the ignore list in Settings — build output and dependency folders are excluded by default and can be re-included.
  • Double-click a planet to focus the camera and open the file in the code inspector at the same time.
  • Graph view resolves relative imports between your own files. Package imports are ignored on purpose, so what you see is your internal coupling, not your dependency tree.
  • Timeline view needs a real .git directory. It reads up to eighty commits with isomorphic-git and never writes to the repository.
  • Drop the max-body count to 400 and pixel ratio to 1× in Settings if you are on a laptop GPU and the scene stutters.

How to use it

  1. Open a project folder, drag one onto the scene, or load a .zip archive of one. There is also a demo project if you just want to look around.
  2. Orbit with left-drag, pan with right-drag, zoom with the wheel, and double-click a body to focus it.
  3. Click any planet to see its size, line count, depth, complexity and language in the info panel.
  4. Switch between solar, galaxy, graph, timeline and stats views with the buttons or the number keys 1–5.
  5. Edit a file in the inspector and press Ctrl+S to write it back to disk, or export a PNG, WebM orbit, JSON dump, CSV or Markdown report.

Related: File Inspector for identifying a single unknown file, Code Diff Formatter for comparing two versions of a source file, and Zip Extractor for unpacking an archive before exploring it.

Related Dev Tools

Browse all Dev Tools →