Topolearn

Learn Svelte

Compiler-based UI framework with fine-grained reactivity through runes

19 lessons · 4 hours · 4 levels · covers Svelte 5

Svelte is a UI framework that compiles components into small, fast JavaScript that updates the DOM directly, without a virtual DOM. Svelte 5 expresses reactivity with runes such as $state, $derived and $effect, which work in components and in plain .svelte.js modules. It is used for interactive widgets and full apps, usually together with SvelteKit for routing and server rendering.

Sign in free to track progressOfficial docs ↗

Before you start

Svelte builds on these; the tree links to the exact lessons you need.

JavaScriptPractical level

How deep do you want to go?

1. EssentialsRead and write simple code, do the everyday basics6 lessons · 1 hour in total
2. PracticalUse it productively at work, with the usual idioms12 lessons · 2 hours in total
3. AdvancedThe less common features, performance and trade-offs16 lessons · 3 hours in total
4. ExpertInternals and the edge cases experts know19 lessons · 4 hours in total

The Svelte tree

SvelteSvelte components and filesSvelte componentsand filesReactive state with $stateReactive state with$stateDerived values with $derivedDerived values with$derivedLogic blocks: if, each, keyLogic blocks: if,each, keyEvents and bindingsEvents and bindingsProps with $propsProps with $propsSide effects with $effectSide effects with$effectSnippets and childrenSnippets and childrenCallback props and $bindableCallback props and$bindableStyling: scoped CSS, class and styleStyling: scoped CSS,class and styleAsync data and {#await}Async data and{#await}Shared state and contextShared state andcontextModules: import and exportModules: import andexportArray methods: map, filter, reduceArray methods: map,filter, reduceHandling eventsHandling eventsasync and awaitasync and await
Essentials and Practical shown (12 of 19 lessons); the full list is below. Click a lesson to read it.

All 19 lessons, in order

Getting started

  1. Svelte components and files · Essentials · 10 min

    Create a project, write a .svelte component with script, markup and scoped styles, and mount it.

Runes and reactivity

  1. Reactive state with $state · Essentials · 11 min

    Declare reactive variables with the $state rune, update them with plain assignments and mutate deeply reactive objects and arrays.

  2. Derived values with $derived · Essentials · 9 min

    Compute values from other state with $derived and $derived.by; they update automatically and stay in sync.

  3. Side effects with $effect · Practical · 12 min

    Run code after the DOM updates when state changes with $effect, clean up correctly, and know when not to use effects.

  4. Reactivity utilities and fine control · Advanced · 13 min

    Use $state.raw, $state.snapshot, untrack, reactive Map/Set/URL classes and createSubscriber for precise, efficient reactivity.

Templates

  1. Logic blocks: if, each, key · Essentials · 11 min

    Render conditionally with {#if}, repeat markup with keyed {#each}, and recreate content with {#key}.

  2. Events and bindings · Essentials · 10 min

    Handle DOM events with onclick-style attributes and keep inputs in sync with bind:value, bind:checked and bind:group.

  3. Styling: scoped CSS, class and style · Practical · 10 min

    Style components with scoped CSS, :global, class objects and arrays, class: and style: directives, and CSS custom properties.

  4. Async data and {#await} · Practical · 11 min

    Load data in components, show loading and error states with {#await}, and avoid race conditions.

Components

  1. Props with $props · Essentials · 10 min

    Pass data into components and read it with $props(), including defaults, renaming and rest props.

  2. Snippets and children · Practical · 12 min

    Pass markup into components with children and named snippets, and render reusable chunks with {#snippet} and {@render}.

  3. Callback props and $bindable · Practical · 11 min

    Let children notify parents with callback props and create two-way bindable props with $bindable.

  4. Shared state and context · Practical · 13 min

    Share reactive state across components with .svelte.js modules, classes with runes, and the context API.

Advanced and internals

  1. Transitions and animations · Advanced · 12 min

    Animate elements entering and leaving with transition:, in: and out:, animate keyed lists with animate:flip, and tween values.

  2. Attachments and actions · Advanced · 12 min

    Run reusable element-level code with {@attach} (and legacy use: actions) for tooltips, focus traps and third-party libraries.

  3. SvelteKit essentials · Advanced · 15 min

    Build a full app with SvelteKit: file-based routes, layouts, load functions, form actions and adapters.

  4. Compiler output and signals · Expert · 16 min

    Understand what the Svelte 5 compiler generates: template cloning, signal-based state, effects and the batching scheduler.

  5. SSR, hydration, boundaries and async · Expert · 15 min

    Render on the server with svelte/server, hydrate safely, catch errors with svelte:boundary and use experimental await in components.

  6. Component API and custom elements · Expert · 13 min

    Mount, unmount and flush components imperatively, compile Svelte components to custom elements, and interoperate with Svelte 4 code.