Welcome to Svelte 5

Svelte 5 introduces a new reactivity system powered by Runes, a small set of $-prefixed compiler instructions that make reactivity explicit. This course walks you through every rune and the patterns you need to build modern web apps.

What You'll Learn

• Runes Overview: What runes are and why they replaced Svelte 4's implicit reactivity
• $state: Reactive variables with deep reactivity for objects and arrays
• $derived: Values that recompute automatically from other state
• $effect: Running side effects when reactive dependencies change
• $props: Receiving component inputs and setting defaults
• $bindable: Opt-in two-way binding between parent and child
• Snippets: Reusable markup blocks that replace slots
• Event Handlers: Lowercase DOM attributes like onclick
• Control Flow: {#if}, {#each}, {#await}, and {#key} blocks
• Specialized Runes: $inspect for debugging and $host for custom elements
• Cheatsheet: A one-page reference for every rune and migration
• Todo SPA: A hands-on project that ties it all together

Why Svelte 5?

• Tiny runtime: Svelte compiles components to direct DOM updates, so users download a fraction of the JavaScript other frameworks ship
• Explicit reactivity: Runes make it obvious what is reactive, computed, or a side effect, with one keyword per job
• Less boilerplate: No hooks, no dependency arrays, no ceremony. State is a variable and the UI just follows
• Deep reactivity by default: Mutating nested object properties or calling array methods like .push() updates the UI automatically

Prerequisites

Basic knowledge of JavaScript and HTML is recommended. If you're new to Svelte, don't worry, we'll cover everything step by step.

Course Structure

Each lesson pairs clear explanations with runnable code examples and a quiz to test your knowledge, building from a single rune up to a complete Todo app.

Ready to get started? Choose your first lesson from the sidebar!