Svelte from Zero - The Framework That Compiles Away

How Svelte actually works - a compiler that turns your components into surgical DOM updates at build time - and how runes, templates, and components build on that one idea.

1. What Svelte Actually Is Svelte is a compiler: your components are analyzed at build time and turned into direct DOM update instructions - no virtual DOM, no runtime diffing, less shipped JavaScript.
2. Runes: State That Compiles $state declares reactive variables you mutate like normal JavaScript, $derived computes values that follow automatically - runes are compiler instructions, and that's why they only work where the compiler can see them.
3. Template Logic Svelte templates branch with {#if}, repeat with {#each} plus a key expression, unwrap promises with {#await}, and bind form inputs both ways with bind:value.
4. Components: Props, Callbacks, and Snippets $props() receives typed inputs, callback props carry events up, $bindable opts into two-way binding, and snippets pass markup into components the way slots used to.
5. Sharing State Lift state to the common parent first; share app-wide state as $state in a .svelte.js module - with the export gotcha that comes with it - and use context for per-tree instances.
6. Effects, Lifecycle, and Fetching $effect runs side effects when the state it reads changes and cleans up via its return function - used for the outside world only, never for deriving state; onMount still marks DOM arrival.
7. When Svelte Breaks Svelte's classic failures decoded: dead snapshots from destructuring, state_unsafe_mutation, effect loops, unkeyed each corruption, ownership warnings, and mixed-dialect confusion.
8. Where to Go Next SvelteKit is the one big next step - routing, server loading, form actions; the rest of the ecosystem is smaller than React's on purpose, and transitions are the built-in treat worth learning early.