Foundations & Mental Model
Svelte as a compiler, the .svelte component, runes reactivity, and template syntax. Start →
Svelte Deep Dive
A standalone, intermediate→advanced course on Svelte 5. From the compiler model and runes-based reactivity to components & snippets, bindings and transitions, stores, and full-stack SvelteKit — taught through annotated code and diagrams that show what the compiler does and why your bundles stay tiny.
What you’ll learn
Section titled “What you’ll learn”Reactivity with Runes
$state, $derived, $effect, $props & $bindable, and the advanced runes. Learn →
Components & Composition
Snippets & render, passing UI, context, and the component lifecycle. Compose →
Bindings, Actions & Transitions
Two-way bindings, use: actions, transitions & animations, and forms. Bind →
State Management & Stores
The store contract, built-in stores, runes vs stores, and cross-component state. Manage →
SvelteKit: Full-Stack Svelte
Routing, load functions, form actions, and server endpoints. Build →
Tooling, Testing & Production
Vite & svelte-check, TypeScript, testing, and performance & deployment. Ship →
How this course works
Section titled “How this course works”The model first, then the code
Every topic starts from a model — the compiler, fine-grained reactivity, the store contract — so Svelte’s magic becomes mechanism you understand.
Svelte 5, verified
Written against Svelte 5 and checked against the official docs — runes ($state/$derived/$effect/$props), snippets ({@render}), and onclick events are covered as they exist today, not the Svelte 4 way.
Design, not just syntax
Not “here’s $effect” but “here’s why you probably don’t need it, and what to derive instead.” You’ll reason about reactivity and data flow with confidence.
Diagrams that explain
The compile step, the reactivity graph, snippet rendering, and the SvelteKit load flow as theme-aware Mermaid diagrams. Bilingual (English / ไทย) with saved quiz progress.