Visual AnythingOpen the live map →

Codebase maps / sveltejs/svelte

The Svelte codebase, as a map.

Svelte is a compiler: it turns your components into small JavaScript that updates the page directly. Its repository is one package with two halves - the compiler, and the small runtime the compiled code uses. Here is how it fits together, as a map you can open and explore.

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

How Svelte is organized

Svelte is a compiler-first framework: "web development for the rest of us". These are the parts of its repository, and what each one does.

compiler/phases/1-parse

Step 1: reads a .svelte file and turns it into a syntax tree.

compiler/phases/2-analyze

Step 2: works out scopes and bindings - what each name refers to and what is reactive.

compiler/phases/3-transform

Step 3: writes the output - JavaScript for the browser, JavaScript for the server, and the component's CSS.

internal/client

The small runtime compiled components use in the browser: signals (the reactivity behind $state and $derived), effects, and updates to the page.

internal/server

The runtime for rendering components to HTML on the server.

src/reactivity

svelte/reactivity - reactive versions of Map, Set, Date, URL and URLSearchParams.

Motion

svelte/transition, svelte/animate, svelte/motion and svelte/easing - transitions and animations built in.

src/store

svelte/store - writable and readable stores.

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/svelte/src/compiler/index.js - compile() - the front door of the compiler
  2. packages/svelte/src/compiler/phases/1-parse/index.js - how a component is read
  3. packages/svelte/src/internal/client/reactivity/sources.js - state() - where $state lives at runtime
  4. packages/svelte/src/internal/client/runtime.js - the heart of the runtime: reading signals and running effects

Good to know

Is this the official Svelte repository?

Yes: github.com/sveltejs/svelte, where Svelte is developed. (SvelteKit, the app framework, lives in its own repository.)

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 28, 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.