Svelte Essentials

Class Duration

3 days

Target Audience

All students must have JavaScript and HTML programming experience. Experience with CSS is helpful but not required.

Description

This Svelte Essentials course teaches modern Svelte 5 and SvelteKit 2 from the ground up. The course centers on runes ($state, $derived, $effect, $props) — Svelte 5's signal-based reactivity model that replaces the legacy $: reactive statements and the bulk of stores-based state management. Participants build SvelteKit 2 applications using the new file-based routing, server load functions, form actions, and TypeScript end-to-end. Coverage includes the modern component model (callback props replacing createEventDispatcher, snippets replacing slots), client-side hydration, server-side rendering, the async preview, and progressive enhancement. The course also touches on legacy Svelte 4 patterns just enough that participants can read older codebases — but every new pattern taught is the current Svelte 5 one. By the end, participants build, test, and deploy a real SvelteKit 2 application.

Objectives

Understand Svelte 5's compiler-driven approach and how runes-based reactivity differs from React, Vue, and Angular.
Set up a development environment for SvelteKit 2 with Vite, TypeScript, and rust-analyzer-class IDE tooling for Svelte (VS Code extension, JetBrains Svelte plugin).
Master SvelteKit 2 routing — +page.svelte, +page.server.ts, +layout.svelte, server load functions, form actions, and route groups.
Master the four runes — $state, $derived, $effect, $props — and know when each is the right tool.
Use snippets ({#snippet} / {@render}) as the modern replacement for slots and slot props.
Handle component communication with callback props (the modern replacement for createEventDispatcher and event forwarding).
Build forms using SvelteKit form actions with progressive enhancement and use:enhance.
Read legacy Svelte 4 codebases ($:, stores, createEventDispatcher) and migrate selectively to runes.

Training Materials

All students receive comprehensive courseware covering all topics in the course. The instructor distributes courseware via GitHub. The courseware includes documentation and extensive code samples. Students practice the topics covered through challenging hands-on lab exercises.

Software Requirements

Students will need a free, personal GitHub account to access the courseware. Students need permission to install Node.js and Visual Studio Code on their computers. Also, students will need permission to install NPM Packages and Visual Studio Extensions. We will provide a cloud-based environment if students cannot configure a local environment.

Training Topics

Introduction to Svelte 5

What is Svelte? What problem does it solve?
Svelte 5 vs. Svelte 4: what changed and why runes
Svelte vs. React, Vue, and Angular reactivity models
The Svelte compiler

Development Environment

Requirements
SvelteKit 2 project scaffolding (npx sv create)
Svelte file structure (+page.svelte, +page.server.ts, +layout.svelte)
Svelte extension for Visual Studio Code
TypeScript out of the box
Vite dev server and HMR

SvelteKit 2 Overview

Vite tooling
File-based routing
Server-side rendering and hydration
Adapters and deployment targets
Unit testing with Vitest
Playwright for end-to-end tests

Getting Started

Exploring the Svelte 5 playground
Layout, page, and component file structure
Element directives (bind:, class:, style:)
Compiling Svelte files

Static and Dynamic Pages

Static pages and prerendering
Setting head content with <svelte:head>
Scoped CSS
Image handling and @sveltejs/enhanced-img
Page routing
Client-side rendering vs. SSR
Logic blocks ({#if}, {#each}, {#await}, {#key})
Snippets ({#snippet} / {@render}) — modern slot replacement

Reactivity with Runes

The four runes: $state, $derived, $effect, $props
$state for primitive and reactive object/array state
$derived for computed values (replacing $: reactive statements)
$effect for side effects and DOM interaction
$props() for component inputs and defaults
$state.raw and $state.snapshot for non-reactive data

Component Basics

Component file structure
Props with $props() and TypeScript types
Bindable props with $bindable()
Reading legacy export let and migrating

Component Composition

Nested components
Snippets vs. slots (legacy)
Passing data and callbacks to children
Component tree best practices

Event Handling

Standard DOM event attributes (onclick, oninput)
Event modifiers via wrapper functions
Callback props (replacing createEventDispatcher)
Forwarding behavior with spread props

Data Binding

Two-way binding with bind:value
Bindable props ($bindable)
Binding to component instances

Forms

HTML form elements
Named form actions in +page.server.ts
Progressive enhancement with use:enhance
Form validation
Form submission and result handling

Lifecycle and Effects

$effect and $effect.pre
onMount and onDestroy (still available)
tick() for awaiting DOM updates
Effect cleanup functions

State Management

Reactive primitives with $state (the default modern choice)
Sharing state across components via context
Stores in Svelte 5 (writable, readable, derived) — when they still make sense
Migrating store-heavy code to runes
Page, navigation, and updated stores in SvelteKit 2

Routing

File-based routing in SvelteKit 2
Route parameters and matchers
Layouts and route groups
Server load functions (+page.server.ts load)
Universal load functions
API routes (+server.ts)