Skip to main content

​
What is Gitlantis?

Gitlantis is a VS Code extension that transforms your project files into an immersive 3D ocean world. Navigate your codebase by sailing a boat through lighthouses (folders) and buoys (files).

​
Tech Stack

Gitlantis is built with modern web and extension technologies:

​
Core Technologies

  • TypeScript - Type-safe development
  • React 18.2 - UI framework
  • Vite - Fast build tool and dev server
  • VS Code Extension API - Editor integration

​
3D Rendering

  • Three.js - 3D graphics library
  • @react-three/fiber - React renderer for Three.js
  • @react-three/drei - Useful helpers for React Three Fiber
  • @react-three/cannon - Physics engine for 3D interactions

​
State & UI

  • Zustand - Lightweight state management
  • Tailwind CSS - Utility-first styling
  • Lucide React - Icon library
  • nipplejs - Virtual joystick for mobile-like navigation

​
Developer Tools

  • ESLint - Code linting
  • Prettier - Code formatting
  • Husky - Git hooks
  • Commitlint - Conventional commit messages
  • lint-staged - Run linters on staged files

​
Repository Structure

The codebase is organized into three main directories: 
src/
├── extension/          # VS Code extension logic
│   ├── commands/       # Command registration and launcher
│   ├── handlers/       # Message handlers, file operations, git
│   ├── types/          # TypeScript type definitions
│   ├── utils/          # Extension utilities
│   ├── store/          # Extension state
│   └── config/         # Extension configuration
│
├── browser/            # React 3D webview application
│   ├── components/     # React components
│   │   ├── ui/         # 2D UI overlays (settings, breadcrumbs, etc.)
│   │   └── world/      # 3D world components (boat, ocean, nodes)
│   ├── context/        # React context providers
│   └── hooks/          # Custom React hooks
│
└── main/               # Entry point and global styles
    ├── index.tsx       # React app bootstrap
    └── global.css      # Global styles

​
Key Directories Explained

src/extension/ - The VS Code extension host process
  • Manages the webview panel lifecycle
  • Handles file system operations
  • Provides git integration
  • Communicates with the browser context via message passing
src/browser/ - The webview React application
  • Renders the 3D ocean world
  • Manages boat navigation and physics
  • Displays UI overlays (settings, minimap, breadcrumbs)
  • Sends messages back to the extension for file operations
src/main/ - Application entry point
  • Bootstraps the React application
  • Wraps the app in context providers
  • Loads global styles

​
Build Output

The project uses two TypeScript configurations:
  • tsconfig.json - Browser/React code compiled by Vite
  • tsconfig.extension.json - Extension code compiled by TypeScript
Both outputs are placed in the out/ directory: 
out/
├── index.html          # Webview HTML
├── assets/             # Bundled JS/CSS from Vite
└── extension/          # Compiled extension code

​
Development Scripts

Key npm scripts defined in package.json:
  • pnpm dev - Start Vite dev server for browser code
  • pnpm build - Build both browser and extension
  • pnpm build:browser - Build webview with Vite
  • pnpm build:extension - Compile extension with TypeScript
  • pnpm watch - Watch mode for extension development
  • pnpm lint - Run ESLint
  • pnpm format - Check code formatting with Prettier
  • pnpm package - Create .vsix extension package
  • pnpm release - Build, package, and publish

Build docs developers (and LLMs) love

Get started for freeTalk to us