What is Svelte?
+15 Mana
Setting Up Your Development Environment
+15 Mana
Anatomy of a .svelte Component
+15 Mana
Template Expressions and Basic Syntax
+15 Mana
Component Structure Quiz(Sign in required)
Beginner+10 Mana
What Does This Render?(Sign in required)
Beginner+10 Mana
Fix the Syntax Error(Sign in required)
Beginner+10 Mana
Shorthand Syntax(Sign in required)
Beginner+10 Mana
What Are Runes?
+15 Mana
Svelte 5 $state Rune: Creating Reactive State
+15 Mana
Computed Values with $derived
+15 Mana
Side Effects with $effect
+15 Mana
Choose the Right Rune(Sign in required)
Beginner+10 Mana
Make It Reactive(Sign in required)
Beginner+10 Mana
Fix the Derived Value(Sign in required)
Intermediate+15 Mana
Clean Up Your Effects(Sign in required)
Intermediate+15 Mana
Array Mutation(Sign in required)
Beginner+10 Mana
Creating and Using Components
+15 Mana
Passing Data with Props
+15 Mana
Event Handling in Svelte 5
+15 Mana
Prop Syntax Quiz(Sign in required)
Beginner+10 Mana
Modernize Event Handling(Sign in required)
Beginner+10 Mana
Callback Props Pattern(Sign in required)
Intermediate+15 Mana
Rest Props(Sign in required)
Intermediate+15 Mana
Preventing Form Submission(Sign in required)
Beginner+10 Mana
Conditional Rendering with {#if}
+15 Mana
Looping with {#each}
+15 Mana
Handling Promises with {#await}
+15 Mana
Toggle Rendering(Sign in required)
Beginner+10 Mana
Why Use Keys?(Sign in required)
Intermediate+15 Mana
Loop with Index(Sign in required)
Beginner+10 Mana
Async Template Block(Sign in required)
Beginner+10 Mana
Handle Empty Lists(Sign in required)
Beginner+10 Mana
Two-Way Binding with bind:value
+15 Mana
Checkboxes, Radio Buttons & Selects
+15 Mana
The $bindable Rune
+15 Mana
Numeric Input Binding(Sign in required)
Beginner+10 Mana
Checkbox Binding(Sign in required)
Beginner+10 Mana
Bind Textarea(Sign in required)
Beginner+10 Mana
Creating Bindable Props(Sign in required)
Intermediate+15 Mana
Radio Button Groups(Sign in required)
Beginner+15 Mana
File-System Routing
+15 Mana
Layouts: Shared UI
+15 Mana
Loading Data with load Functions
+15 Mana
Route File Mapping(Sign in required)
Beginner+10 Mana
Render Children(Sign in required)
Beginner+10 Mana
Accessing Load Data(Sign in required)
Intermediate+15 Mana
Layout File(Sign in required)
Beginner+10 Mana
Dynamic Route Parameters(Sign in required)
Intermediate+15 Mana
Ready to start Svelte 5: The Complete Guide?
20 interactive lessons and 29 hands-on challenges — learn in VS Code, Cursor, or the web.