Visual AnythingOpen the live map →

Codebase maps / vitejs/vite

The Vite codebase, as a map.

Most of Vite lives in one package, packages/vite: a dev server for while you work, a build command for production, and a plugin system shared by both. Here is how its parts fit together - and the whole repository as a map you can open and explore.

Explore Vite in 3D — free →vitejs/vite on GitHub
The Vite repository as a map: every folder and file, grouped by package

How Vite is organized

Vite is a build tool for faster, leaner web development: a dev server over native ES modules, and a build command that bundles with Rolldown. These are the parts of its repository, and what each one does.

packages/vite

The package you install - "Native-ESM powered web dev build tool". Its code is split into src/node (runs in Node), src/client (runs in the browser) and src/module-runner.

src/node/server

The dev server: createServer in index.ts, Hot Module Replacement in hmr.ts, and the module graph - every module and what it imports - in moduleGraph.ts.

src/node/build.ts

vite build: bundles your code with Rolldown into optimized static files for production.

src/node/plugins

Vite's own built-in plugins - CSS, HTML, assets, JSON, workers, and import analysis, which resolves and rewrites imports while you work. Vite plugins extend Rolldown's plugin interface, so one plugin works for both dev and build.

src/node/optimizer

Dependency pre-bundling, in dev only: it turns CommonJS packages into ES modules, and packs a package made of many small modules into one so the page loads faster.

src/client

The small script Vite adds to your page in dev: it applies hot updates (client.ts) and shows the error overlay (overlay.ts).

src/module-runner

The module runner: runs code processed by Vite's plugins in another runtime - the server, a worker - imported from vite/module-runner.

Around Vite

packages/create-vite scaffolds a new project, packages/plugin-legacy adds support for older browsers, and playground/ holds small test apps, each run in a real browser.

Where to start reading

Open these in the live map - click a file to read it beside the map, and point at it to see what it imports.

  1. packages/vite/src/node/server/index.ts - createServer - the dev server
  2. packages/vite/src/node/plugins/importAnalysis.ts - how imports are resolved and rewritten in dev
  3. packages/vite/src/node/server/hmr.ts - what happens when you save a file
  4. packages/vite/src/node/build.ts - vite build

Good to know

Is this the official Vite repository?

Yes: github.com/vitejs/vite, where Vite is developed. Each part above is described from its own README and Vite's documentation, which lives in the same repository (docs/).

Is the map up to date?

The live map reads the repository when you open it, so it always shows the current code. The picture on this page was made on October 29, 2026.

Can I map my own project like this?

Yes. Paste any public GitHub link, or open a folder on your computer - your own code never leaves your device.