Svelte from Zero - The Framework That Compiles Away

React ships a runtime that diffs descriptions of your UI. Vue ships a runtime that tracks who reads what. Svelte's bet is stranger and simpler: do the framework's thinking at build time. Your component is compiled - analyzed like source code, because it is source code - into small, direct instructions: "when count changes, update this one text node." At runtime there's no diffing and no dependency graph to consult, because the compiler already worked out exactly what depends on what.

Full disclosure of bias: the site you're reading is built with Svelte. We picked it for the same reasons this guide will show you - and we'll flag its trade-offs with the same candor as everyone else's.

How to read this

• In a panic right now? Jump to Phase 7: When Svelte Breaks and use the cheat-card.
• Want it to finally make sense? Read in order - phase 2 (runes) is the foundation the rest stands on.

The phases

1. What Svelte Actually Is - the compiler idea, and the anatomy of a .svelte file.
2. Runes: State That Compiles - $state, $derived, and how reactivity works when it's a language feature.
3. Template Logic - {#if}, {#each} with keys, {#await}, and bind:.
4. Components: Props, Callbacks, and Snippets - talking down, up, and passing markup.
5. Sharing State - lifting, context, and shared state in .svelte.js modules.
6. Effects, Lifecycle, and Fetching - $effect used sparingly, onMount, and data loading.
7. When Svelte Breaks - lost reactivity, effect loops, and the compiler's own error messages, decoded.
8. Where to Go Next - SvelteKit and the ecosystem, sized fairly.

Deliberately deferred to follow-up guides: SvelteKit itself (routing, server loading, form actions), transitions and animation (a genuine Svelte strength), stores in depth, and testing.

📝 A dialect note before you start: this guide teaches Svelte 5 with runes ($state, $derived) - the current syntax. Code in the wild often uses the older dialect (let + $: labels, export let); phase 2 and 4 include translation notes so you can read both.