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 Svelte Works
Real compiler output, the signal graph and effect scheduling, fine-grained DOM updates, hydration and the SvelteKit request pipeline — sourced from the Svelte codebase and proven with tests. Go inside →
Reading AI-generated Svelte
A reading order for Svelte you did not write, a catalog of the bugs AI assistants actually produce (each proven with real compiler or test output), a review checklist, verification tools, and three worked reviews. Review →
Glossary
90 terms from rune to remote functions, each linked to the lesson that teaches it. Look up →
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. Verified against Svelte 5.57.x and SvelteKit 2.70.x (Node 24).
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.