Interactive Force-Directed Architecture & Codebase Intelligence
GitNode transforms complex GitHub repositories into interactive, force-directed architectural maps. By parsing directory trees and analyzing module import relationships, GitNode provides a visual representation of codebase topology, dependency relationships, and structural organization.
Whether you're onboarding onto a new open-source codebase, conducting an architectural audit, or exploring project structures, GitNode makes code navigation intuitive, fast, and visual.
- Force-Directed Simulation: Custom D3 physics engine modeling gravity, link constraints, charge repulsion, and collision radiuses for organic layout equilibrium.
- Smart Throttled Rendering: Replaces continuous rendering loops with an idle-detection cycle that suspends redraws when the physics reach equilibrium, dropping CPU/GPU utilization to near zero.
- Automated Camera Focus: Selecting any file or directory smoothly interpolates the viewport camera to center on that node with cubic easing transitions.
- Extension-Color Synthesis: Node cores, interactive halos, and visual connection links dynamically adopt file-type color profiles (e.g., TypeScript blue, Python green, Rust amber, image emerald).
- Dual Layout Engines: Seamlessly toggle between a spatial Constellation Graph and a structured hierarchical Tree Layout.
- Path Alias Resolution: Automatically resolves
@/...,~/..., and@src/...path aliases acrosssrc/,app/,lib/, andcomponents/. - Multi-Language AST Parsers: Extracts dependency connections across TypeScript, JavaScript, Python, Rust, Go, and Java/Kotlin.
- Batched Zipball Extraction: In-memory repository parsing processes files in chunks of 50 to prevent memory spikes on large repositories.
- On-Demand JIT Parsing: For massive scale-free codebases (>100MB), imports are parsed dynamically on demand when individual nodes are selected.
- Syntax Highlighted Code: Clean code preview supporting over 12 languages with highlight.js, line numbering, and one-click clipboard copying.
- Holographic Media Preview: Safe visual rendering for
.jpg,.jpeg,.png,.gif,.svg,.webp,.ico,.bmp, and.aviffiles. - Media Controls: Integrated zoom (
25%to400%), aspect ratio calculation, natural dimension detection, checkered transparency grid, and direct image download.
- In-Memory LRU Cache: Server-side TTL cache for metadata, tree structures, and file lookups.
- Edge Cache Headers: Implements HTTP
Cache-Control: public, s-maxage=3600, stale-while-revalidate=86400to conserve GitHub API rate limits.
- Floating Observatory Command Bar: Sleek glassmorphic HUD header with real-time slot-counter metrics for nodes and connection links.
- Compact Node Inspector: Linear/Vercel-inspired card with directory breadcrumbs, format badges, and click-to-focus dependency tags.
- Directory Manifest: Compact file tree with search filtering, one-click expand/collapse, and color-coded extension indicators.
| Layer | Technology | Purpose |
|---|---|---|
| Framework | Next.js 16 (App Router, Turbopack) | Serverless API routes and client rendering |
| Language | TypeScript 5.0+ | Strict type safety and schema validation |
| Physics & Canvas | D3.js (d3-force, d3-zoom, d3-selection) | 2D Canvas force-directed graph engine |
| State Management | Zustand | Global repository, graph, and UI filter state |
| Styling & UI | Tailwind CSS + Vanilla CSS Tokens | Glassmorphic dark theme and HUD layout |
| Motion | Framer Motion 12 | Layout animations, transitions, and presence |
| Icons | Lucide React | Clean, scalable vector iconography |
| GitHub Integration | Octokit REST API | Repository metadata, git trees, and file contents |
| Endpoint | Method | Params | Description |
|---|---|---|---|
/api/repo |
GET |
owner, repo |
Fetches repository metadata, language stats, and top contributors. |
/api/tree |
GET |
owner, repo, branch? |
Returns the complete recursive file tree of the repository. |
/api/file |
GET |
owner, repo, path |
Fetches file content (UTF-8 text or Base64 Data URL for images). |
/api/parse |
GET |
owner, repo, branch? |
Downloads repository zipball and extracts all internal module import edges. |
/api/parse/file |
GET |
owner, repo, path |
Parses import statements on-demand for a single targeted file. |
gitnode/
├── app/
│ ├── api/
│ │ ├── file/ # Single file retrieval endpoint
│ │ ├── parse/ # Full zipball parser & on-demand file parser
│ │ ├── repo/ # Repository metadata & contributor metrics
│ │ └── tree/ # Recursive git tree indexing endpoint
│ ├── repo/[owner]/[repo]/# Observatory graph & analysis interface
│ ├── globals.css # Custom design tokens, scrollbars, and animations
│ ├── layout.tsx # Root HTML layout and metadata
│ └── page.tsx # Landing page with interactive search bar
├── components/
│ ├── graph/
│ │ ├── ConstellationGraph.tsx # Canvas D3-force physical simulation
│ │ ├── GraphControls.tsx # Filter toggles, depth sliders & engine switcher
│ │ ├── NodeInspector.tsx # Selected node details & dependency tag capsules
│ │ ├── RepoGraph.tsx # Graph canvas wrapper
│ │ └── TreeGraph.tsx # Hierarchical tree layout alternative
│ ├── sidebar/
│ │ ├── FilePreview.tsx # Syntax-highlighted code & holographic image viewer
│ │ ├── FileTree.tsx # Searchable directory manifest with extension dots
│ │ └── RepoStats.tsx # Language distribution & contributor metrics
│ └── ui/
│ ├── ErrorBoundary.tsx # Graceful error states and recovery
│ ├── SearchBar.tsx # Holographic search bar with localStorage history
│ └── SlotCounter.tsx # Animated telemetry counter
├── lib/
│ ├── buildGraph.ts # Graph node synthesis & alias path resolution
│ ├── cache.ts # In-memory LRU TTL caching layer
│ ├── detectStack.ts # Framework & dependency detector
│ ├── github.ts # Octokit wrapper with binary-safe file decoder
│ └── parseImports.ts # Regex AST import extractors for JS, Py, Rust, Go, Java
├── store/
│ └── repoStore.ts # Zustand global state matrices and dispatchers
└── types/
└── index.ts # TypeScript schemas, AST rules & color mappings
This project is licensed under the MIT License.
Built with precision for developers exploring the universe of open-source code.