Explore any GitHub repository as an interactive 3D visualization
Type a repo, watch its file tree bloom into a navigable 3D universe of folders and files.
Live Demo → · Report Bug · Request Feature
GitCoral turns a GitHub repository's file tree into a live 3D point cloud you can orbit, zoom, and explore in your browser. Each file is a dot, each folder a glowing sphere, and the hierarchy flows upward in layers — like a coral reef growing toward the surface.
Enter any public repo URL, hit Render, and in seconds you get an interactive 3D map of its structure — no sign-in, no setup, no backend.
- 3D point cloud rendered with WebGL via Three.js — folders as spheres, files as orbiting dots
- Hierarchy layers — depth encoded on the vertical axis so structure is immediately readable
- Connectors — animated lines linking parent folders to their children
- Orbit controls — click and drag to rotate, scroll to zoom, right-click to pan
- Auto-orbit — one-click continuous rotation; grabbing the canvas stops it instantly
| Mode | Description |
|---|---|
| By type | Each file extension gets a unique color — spot your .ts, .py, .md at a glance |
| By size | Hotter = larger file; instantly find the heavy files |
| By depth | Color encodes how deep in the tree a node lives |
- Path search — type a fragment to highlight matching files and dim everything else
- Extension toggle — show or hide specific file types with one click
- File size range — log-scale slider to focus on files within a size band
- Depth range — peel away deep layers to focus on top-level structure
Fine-tune the physics of the 3D layout with live sliders:
| Slider | Effect |
|---|---|
| Z scale | Vertical stretch — push layers further apart |
| Buoyancy | Downward pull on folder nodes within a layer |
| Repulsion | How strongly folders push each other apart |
| Spread | How tightly child folders cluster inside their parent |
| File sphere size | Radius of the file point cloud around each folder |
- Shareable URLs — camera position, color mode, and search query are encoded in the URL; copy and share to show exactly what you see
- PNG snapshot — download a high-resolution screenshot of the current view with one click
- Supports
github.com/owner/repo, SSH URLs, and shortowner/repoform - Layout computation runs in a Web Worker — the UI stays responsive while big repos are processed
Rate limits: Unauthenticated GitHub API requests are capped at 60/hour per IP. If you hit the limit, wait a minute and try again.
- Node.js 20+
- Angular CLI 21+
npm install -g @angular/cligit clone https://github.com/gitcoral/gitcoral.git
cd gitcoral
npm installng serveOpen http://localhost:4200. The app reloads automatically on file changes.
ng buildOutput lands in dist/gitcoral/browser/ — drop it on any static host (GitHub Pages, Netlify, Vercel, Cloudflare Pages, …).
ng testGitHub REST API → Web Worker → Three.js Renderer
(3 API calls) (3D layout) (WebGL)
- Fetch — three GitHub API calls resolve the default branch, HEAD commit, and full recursive file tree
- Build — the raw tree is assembled into a typed
TreeStructurewith subtree byte totals - Layout — a Web Worker places every node in 3D space using a physics-inspired algorithm (buoyancy, repulsion, sphere packing)
- Render — Three.js draws files as billboard points via a custom GLSL shader and folders as connector endpoints via
LineSegments2 - Interact — a screen-space raycast on every pointer move finds the nearest node within a pixel radius for hover and click selection
Contributions are welcome! Feel free to open an issue to discuss a feature or bug before sending a PR.
- Fork the repo
- Create a branch:
git checkout -b feature/my-feature - Commit your changes:
git commit -m 'Add my feature' - Push:
git push origin feature/my-feature - Open a Pull Request
Distributed under the MIT License. See LICENSE for details.