Master Svelte 5: from fundamentals to production
Runes ($state, $derived, $effect), components, transitions, stores, and more. Monaco editor with the real Svelte compiler running live in the browser—learn by doing.
- Step 1
Svelte 1: What Is Svelte? Your First Component
Svelte is different from React or Vue in one fundamental way: it's a COMPILER, not a library you shi...
Start Lesson - Step 2
Svelte 2: Template Syntax & Text Interpolation
Curly braces `{expression}` are Svelte's window into JavaScript from inside your markup — drop them ...
Start Lesson - Step 3
Svelte 3: Attributes & Dynamic Attributes
Any HTML attribute can take a `{expression}` exactly like text content can: `<img src={url}>`, `<a h...
Start Lesson - Step 4
Svelte 4: Event Handling
Svelte 5 handles DOM events as plain HTML attributes that happen to hold a function: `onclick={handl...
Start Lesson - Step 5
Svelte 5: $state — Reactivity Basics
Reactivity in Svelte 5 isn't automatic just because a variable's value changes — a plain `let count ...
Start Lesson - Step 6
Svelte 6: Conditional Rendering
`{#if}...{:else if}...{:else}{/if}` lets you swap out entire chunks of markup based on state, unlike...
Start Lesson - Step 7
Svelte 7: List Rendering
`{#each items as item, index (item.id)}...{/each}` loops over any array-like value: `item` is bound ...
Start Lesson - Step 8
Svelte 8: Two-Way Binding
In lesson 4 you wired an input by hand: `value={name}` to display state, plus `oninput` to read `eve...
Start Lesson - Step 9
Svelte 9: $derived — Computed Values
You've already been writing derived values inline — `{qty * price}` inside markup recomputes that ex...
Start Lesson - Step 10
Svelte 10: Class & Style Shortcuts
You've been building conditional classes and inline styles by hand — `class={done ? 'task done' : 't...
Start Lesson - Step 11
Svelte 11: $state Deep Dive
In Module A you met `$state` for primitives — a counter, a boolean toggle. But `$state` gets far mor...
Start Lesson - Step 12
Svelte 12: $derived.by — Multi-Statement Derivations
Plain `$derived(expression)` is perfect for a one-liner: `let doubled = $derived(count * 2);`. But r...
Start Lesson - Step 13
Svelte 13: $effect — Side Effects
`$state` and `$derived` describe DATA. Sooner or later you need to reach outside the component — sav...
Start Lesson - Step 14
Svelte 14: $effect.pre & Effect Timing
Regular `$effect` runs AFTER Svelte has applied its changes to the DOM — perfect for reading measure...
Start Lesson - Step 15
Svelte 15: $props — Component Props
Every real app is built from components talking to each other, and the most basic form of that conve...
Start Lesson - Step 16
Svelte 16: $bindable — Two-Way Bound Props
Sometimes a child component IS the natural place to own a piece of UI state — a slider's position, a...
Start Lesson - Step 17
Svelte 17: Callback Props — Component-to-Parent Communication
Not every child-to-parent message should be a two-way binding — most of the time the child just need...
Start Lesson - Step 18
Svelte 18: Lifecycle — onMount & onDestroy
Runes handle most reactive logic, but two lifecycle functions from the original `'svelte'` package a...
Start Lesson - Step 19
Svelte 19: Legacy vs Runes — A Migration Mindset
If you open an older Svelte codebase, you'll see a different dialect: `export let prop` instead of `...
Start Lesson - Step 20
Svelte 20: untrack & tick — Utility Functions
Two small utilities from `'svelte'` round out the runes toolkit for the edge cases that come up once...
Start Lesson - Step 21
Svelte 21: Component Basics & Composition
Every Svelte component is just a .svelte file — there's no defineComponent call, no class, no specia...
Start Lesson - Step 22
Svelte 22: Snippets — Local Reusable Fragments
Sometimes you need to repeat a chunk of markup several times within the SAME file, with different da...
Start Lesson - Step 23
Svelte 23: Passing Children via Snippets
In Svelte 5, whatever markup a parent writes BETWEEN a component's opening and closing tags is passe...
Start Lesson - Step 24
Svelte 24: Named Snippet Props — Replacing Named Slots
The default children snippet covers a single content area, but many components need MULTIPLE distinc...
Start Lesson - Step 25
Svelte 25: Dynamic Components
Sometimes you don't know WHICH component to render until runtime — a tab switcher, a plugin system, ...
Start Lesson - Step 26
Svelte 26: Context API — setContext & getContext
Props work great for one or two levels of nesting, but forcing a value through five components that ...
Start Lesson - Step 27
Svelte 27: class: and style: Directives Deep Dive
Toggling a CSS class based on state is common enough that Svelte gives it its own directive: class:n...
Start Lesson - Step 28
Svelte 28: Actions — the use: Directive
Actions are Svelte's escape hatch for imperative DOM work that doesn't fit the declarative template ...
Start Lesson - Step 29
Svelte 29: Special Elements — <svelte:window>, <svelte:document>, <svelte:body>
Some events and properties belong to window, document, or document.body — not to any single DOM node...
Start Lesson - Step 30
Svelte 30: Component Composition Capstone — An Accordion Widget
Time to combine everything from this module into one polished, reusable widget: an accordion. Accord...
Start Lesson - Step 31
Svelte 31: Form Bindings Deep Dive
Svelte's `bind:` directive isn't just for text inputs. Checkboxes get `bind:checked` (a boolean), ra...
Start Lesson - Step 32
Svelte 32: bind: on Component Props
`bind:` isn't limited to native elements — any prop declared with `$bindable()` becomes two-way bind...
Start Lesson - Step 33
Svelte 33: Transitions
The `transition:` directive plays automatically whenever an element is added or removed by a conditi...
Start Lesson - Step 34
Svelte 34: Custom Transitions & Easing
Under the hood, every built-in transition is just a function shaped `(node, params) => ({ duration, ...
Start Lesson - Step 35
Svelte 35: Animations — animate:flip for Reordering Lists
`animate:` is different from `transition:` — it doesn't play when an element enters or leaves, it pl...
Start Lesson - Step 36
Svelte 36: Motion — spring & tween
`svelte/motion` gives you values with built-in physics. tween(value, opts) eases from A to B once ov...
Start Lesson - Step 37
Svelte 37: Custom Actions Deep Dive
An action is a function (node, params) => { ... } attached with `use:action={params}` that gets dire...
Start Lesson - Step 38
Svelte 38: Module D Capstone: Effects, Timing & Polish
Time to combine everything from this module into one small, polished product: a toast notification s...
Start Lesson - Step 39
Svelte 39: Writable Stores
Runes like $state handle reactivity INSIDE a component tree, but what about state that needs to live...
Start Lesson - Step 40
Svelte 40: Readable Stores
Not every piece of shared state should be writable by just anyone. A `readable` store wraps a value ...
Start Lesson - Step 41
Svelte 41: Derived Stores
Most of the interesting values in an app aren't state you set directly — they're COMPUTED from other...
Start Lesson - Step 42
Svelte 42: Custom Stores — The Store Contract
Svelte doesn't actually care how a store was built — only that it exposes a `.subscribe(callback)` m...
Start Lesson - Step 43
Svelte 43: Auto-Subscription — The $store Syntax Deep Dive
The `$` prefix isn't real JavaScript — it's a transform the SVELTE COMPILER applies while processing...
Start Lesson - Step 44
Svelte 44: $state vs Stores — When to Use Which
`$state` creates reactive state that belongs to ONE instance of ONE component — every time a compone...
Start Lesson - Step 45
Svelte 45: Combining Context + Stores
A globally-imported store gives you exactly ONE shared instance across the whole app — great for tru...
Start Lesson - Step 46
Svelte 46: A Lightweight Client-Side Router Pattern
A router, at its core, is just state — 'which screen is currently active' — plus a way to change it ...
Start Lesson - Step 47
Svelte 47: Global and Module-Level State Patterns
The moment ANY file does `import { notifications } from './notifications.js'`, the JavaScript module...
Start Lesson - Step 48
Svelte 48: Module E Capstone — Building a Shopping Cart
A shopping cart is the perfect capstone because it needs everything from this module at once: a CUST...
Start Lesson - Step 49
Svelte 49: TypeScript with Svelte
Svelte components can opt into TypeScript by adding lang="ts" to the <script> tag. The Svelte compil...
Start Lesson - Step 50
Svelte 50: SvelteKit Mental Model
SvelteKit is the official app framework built on top of Svelte: it adds file-based routing, server-s...
Start Lesson - Step 51
Svelte 51: Testing Components
A real Svelte test suite (Vitest + @testing-library/svelte) mounts a component in a headless DOM, dr...
Start Lesson - Step 52
Svelte 52: Performance — {#key} Blocks & $state.raw
Two performance tools for when Svelte's defaults aren't quite what you want: {#key value}...{/key} f...
Start Lesson - Step 53
Svelte 53: Accessibility Basics
Accessible markup isn't a separate skill from Svelte — it's regular HTML attributes (role, aria-*, t...
Start Lesson - Step 54
Svelte 54: Error Handling with <svelte:boundary>
Svelte 5 ships a real error boundary element: <svelte:boundary>. Wrap any part of your tree in it, a...
Start Lesson - Step 55
Svelte 55: Environment Variables & Config
SvelteKit apps run on Vite, so environment variables follow Vite's convention: anything prefixed VIT...
Start Lesson - Step 56
Svelte 56: Production Build & Deployment
Shipping a Svelte app means running a build command that compiles every .svelte file to vanilla JS/C...
Start Lesson - Step 57
Svelte 57: Svelte 5 Migration Mindset — Runes vs Legacy
Back in Module B (lesson 19) you compared legacy reactivity (export let, $:) against runes ($props, ...
Start Lesson - Step 58
Svelte 58: Capstone — Ship It
You've gone from 'what is a compiler' to error boundaries, accessibility, and deployment pipelines. ...
Start Lesson