Svelte

Getting Started

1. What is Svelte?Why Svelte is a compiler, not a runtime framework, and how that changes what shipping a component actually means.
2. Setting Up a Svelte ProjectScaffolding a new Svelte 5 project with Vite and understanding the pieces it generates.
3. Anatomy of a Svelte ComponentHow a .svelte file's script, markup, and style sections fit together into one component.

Runes & Reactivity

1. Reactive State with $stateDeclaring reactive variables with the $state rune, Svelte 5's replacement for plain reactive `let`.
2. Derived Values with $derivedComputing values from state that stay automatically in sync, without manually recalculating them yourself.
3. Side Effects with $effectRunning code in response to state changes — logging, syncing to localStorage, or updating the DOM directly.

Props, Events & Binding

1. Component Props with $propsDeclaring and destructuring the properties a component accepts, including defaults and rest props.
2. Handling DOM EventsWiring up click, input, and other DOM events with Svelte's onevent attribute syntax.
3. Two-Way Binding with bind:valueSyncing a form input's value directly to a state variable in both directions with the bind: directive.
4. Component CommunicationPassing data down through props and sending updates back up through callback props.

Control Flow

1. Conditional Rendering with {#if}Showing and hiding markup based on state using if, else if, and else blocks.
2. Looping with {#each}Rendering lists from arrays, with keyed items so Svelte can update the DOM efficiently.
3. Awaiting Promises in MarkupHandling pending, resolved, and error states of a promise directly in your template with {#await}.

Composition & Shared State

1. Slots and SnippetsLetting a parent component inject markup into a child, from the classic <slot> to Svelte 5's snippets.
2. Sharing State Across ComponentsExtracting $state into its own module so unrelated components can read and write the same value.
3. Svelte StoresThe writable/readable store contract that predates runes, and where it still pulls its weight today.

Motion, Lifecycle & Best Practices

1. Transitions and AnimationsAnimating elements in and out of the DOM with Svelte's built-in transition directives.
2. Component Lifecycle with onMountRunning setup code once a component is mounted to the DOM, and cleaning it up when it's destroyed.
3. Svelte Best Practices and Where to Go NextHabits that keep Svelte components small and predictable, and a look at SvelteKit as the next step.