Svelte / SvelteKit

What you'll learn

• Explain how the Svelte compiler differs from virtual-DOM frameworks and set up a project with sv.
• Manage reactivity with Svelte 5 runes: $state, $derived, $effect and $props.
• Compose components with callback props, bindings, snippets and template logic blocks.
• Share state across components with .svelte.ts modules, context and stores.
• Build SvelteKit routes with load functions, form actions, API endpoints and hooks.
• Choose rendering modes and adapters, test with Vitest and Playwright, and ship to production.

Syllabus

Svelte Foundations

1. What Svelte Is
2. Creating a Project With sv
3. Anatomy of a Component

Runes and Reactivity

1. $state
2. $derived
3. $effect and When Not to Use It

Components and Composition

1. $props
2. Callback Props, $bindable and bind:
3. Snippets and {@render}

Template Logic, Bindings and Motion

1. {#if}, {#each} and {#await}
2. Element Bindings and Actions
3. Transitions and Animations

Sharing State

1. State in .svelte.js and .svelte.ts Modules
2. The Context API
3. Stores and When They Still Help

SvelteKit Routing and Loading

1. Filesystem Routes and Layouts
2. Load Functions: +page.ts vs +page.server.ts
3. Error Pages and Redirects

Forms, Endpoints and Hooks

1. Form Actions and use:enhance
2. +server.ts Routes and Hooks
3. Environment Variables With $env

Shipping to Production

1. Rendering Modes and Adapters
2. Testing With Vitest and Playwright
3. Performance Techniques
4. A Svelte and SvelteKit Checklist