A comprehensive guide to Svelte, covering everything from the basics to advanced features like stores, transitions, and lifecycle hooks. Perfect as a reference or learning guide. ## Basics Svelte components combine logic, markup, and scoped styles in a single file. Here's the simplest example: ```typescript

Hello {name}!

Count is {count} ``` --- ## Reactivity Variables automatically update the UI when they change. ```typescript let a = 1; let b = 2; $: sum = a + b; ``` You can run reactive blocks whenever their dependencies change: ```typescript $: { console.log('Sum changed:', sum); } ``` --- ## Event Handling Svelte handles DOM events directly in templates. ```typescript Click me ``` Event modifiers adjust behavior: ```typescript

Init once ``` --- ## Bindings Two-way binding connects input elements to variables: ```typescript

Hello {name}

``` ```typescript Red Blue ``` Access DOM nodes directly with bind:this : ```typescript inputEl.focus()}>Focus ``` --- ## Looping Loop over arrays with #each optionally using index and key: ```typescript {#each items as item, i (item.id)}

{i + 1}: {item.name}

{/each} ``` Keyed each blocks help Svelte track elements efficiently: ```typescript {#each todos as todo (todo.id)} {/each} ``` --- ## Conditionals Render elements based on conditions: ```typescript {#if loggedIn}

Welcome!

{:else if loading}

Loading...

{:else}

Please log in.

{/if} ``` --- ## Components Reuse code by importing and passing props: ```typescript

``` Props example: ```typescript

{title}

``` Slots allow injecting custom content: ```typescript

Hello inside card!

``` Multiple slot areas: ```typescript

Title

Body content

``` --- ## Store System Writable store for reactive shared state: ```typescript import { writable } from 'svelte/store'; export const count = writable(0); ``` ```typescript $count += 1}>+1

Count: {$count}

``` Derived stores compute values from other stores: ```typescript import { derived } from 'svelte/store'; export const double = derived(count, $count => $count * 2); ``` Readable stores with custom updates: ```typescript import { readable } from 'svelte/store'; export const time = readable(new Date(), (set) => { const interval = setInterval(() => set(new Date()), 1000); return () => clearInterval(interval); }); ``` --- ## Style & Classes Class binding for conditional styling: ```typescript

Hello

``` Dynamic inline styles: ```typescript

Dynamic Style

``` --- ## Lifecycle Hooks Run code at different stages of a component: ```typescript ``` --- ## Transitions & Animations Svelte provides built-in transitions for smooth UI effects: ```typescript visible = !visible}>Toggle {#if visible}

Fades in/out

Flies in

{/if} ``` Animate elements when a list changes: ```typescript {#each list as num (num)}

{num}

{/each} ```

typescript