## Pages ### basic-markup HTML++ markup: lowercase/capitalized tags for elements/components, attributes with JS expressions and shorthand, event listeners with case-sensitive `on` prefix and delegation, text expressions in braces, `{@html}` for HTML, comments with `svelte-ignore` and `@component` directives. ## Tags Lowercase tags like `

` are HTML elements. Capitalized tags or dot-notation tags like `` or `` are components. ```svelte

``` ## Element attributes Attributes work like HTML. Values can be unquoted, contain JavaScript expressions, or be pure expressions: ```svelte

page {p} ``` Boolean attributes are included if truthy, excluded if falsy. All other attributes are included unless nullish (`null` or `undefined`): ```svelte

This div has no title attribute

``` When attribute name and value match, use shorthand: `{name}` instead of `name={name}`: ```svelte ``` ## Component props Values passed to components are called _props_ (not attributes). Use same shorthand as attributes: ```svelte ``` ## Spread attributes Multiple attributes/props can be spread at once. Order matters — later values override earlier ones: ```svelte ``` ## Events Listen to DOM events with `on` prefix attributes. Event attributes are case-sensitive (`onclick` vs `onClick`): ```svelte ``` Event attributes fire after bindings. `ontouchstart` and `ontouchmove` are passive for performance. For preventing defaults on these, use the `on` function from `svelte/events` instead. ### Event delegation Svelte delegates certain events to the application root for performance. When manually dispatching delegated events, set `{ bubbles: true }`. Avoid `stopPropagation` with `addEventListener` as it prevents reaching the root. Use `on` from `svelte/events` instead of `addEventListener` to preserve order and handle `stopPropagation` correctly. Delegated events: `beforeinput`, `click`, `change`, `dblclick`, `contextmenu`, `focusin`, `focusout`, `input`, `keydown`, `keyup`, `mousedown`, `mousemove`, `mouseout`, `mouseover`, `mouseup`, `pointerdown`, `pointermove`, `pointerout`, `pointerover`, `pointerup`, `touchend`, `touchmove`, `touchstart`. ## Text expressions JavaScript expressions in curly braces are rendered as text. `null` and `undefined` are omitted; others are coerced to strings: ```svelte

Hello {name}!

{a} + {b} = {a + b}.

{(/^[A-Za-z ]+$/).test(value) ? x : y}

``` Use HTML entities for literal braces: `{` or `{` for `{`, `}` or `}` for `}`. Render HTML with `{@html}` tag (ensure string is escaped or controlled to prevent XSS): ```svelte {@html potentiallyUnsafeHtmlString} ``` ## Comments HTML comments work normally: ```svelte

Hello world

``` `svelte-ignore` comments disable warnings for the next block (usually accessibility): ```svelte ``` `@component` comments show on hover in other files and support markdown: ```svelte

Hello, {name}

``` ### if-blocks Conditional rendering: {#if expr}...{:else if expr}...{:else}...{/if} wraps elements or text ## Conditional Rendering with If Blocks Wrap content in `{#if expression}...{/if}` blocks to conditionally render it based on expressions. ```svelte {#if answer === 42}

what was the question?

{/if} ``` Add additional conditions with `{:else if expression}`: ```svelte {#if porridge.temperature > 100}

too hot!

{:else if 80 > porridge.temperature}

too cold!

{:else}

just right!

{/if} ``` Blocks can wrap elements or text within elements. Use `{:else}` for a final fallback clause. ### each-blocks Each blocks iterate over arrays/iterables with optional index, keying, destructuring, and else clause for empty lists. ## Each Blocks Iterate over arrays, array-like objects, or iterables (Map, Set, etc.) using `{#each expression as name}...{/each}`. **Basic iteration:** ```svelte {#each items as item}

{item.name} x {item.qty}

{/each} ``` **With index:** ```svelte {#each items as item, i}

{i + 1}: {item.name} x {item.qty}

{/each} ``` **Keyed each blocks** — provide a unique key expression to intelligently update lists (insert, move, delete) rather than just appending/removing. Keys should be strings or numbers for identity persistence: ```svelte {#each items as item (item.id)}

{item.name} x {item.qty}

{/each} {#each items as item, i (item.id)}

{i + 1}: {item.name} x {item.qty}

{/each} ``` **Destructuring and rest patterns:** ```svelte {#each items as { id, name, qty }, i (id)}

{i + 1}: {name} x {qty}

{/each} {#each objects as { id, ...rest }}

{id}

{/each} {#each items as [id, ...rest]}

{id}

{/each} ``` **Without item binding** — render n times by omitting `as`: ```svelte {#each { length: 8 }, rank} {#each { length: 8 }, file}

{/each} {/each} ``` **Else clause** — rendered when list is empty: ```svelte {#each todos as todo}

{todo.text}

{:else}

No tasks today!

{/each} ``` ### key-block Block that destroys/recreates contents and reinitializes components or replays transitions when expression value changes {#key expression}...{/key} block destroys and recreates its contents when the expression value changes. When wrapping components, causes them to be reinstantiated and reinitialised: ```svelte {#key value} {/key} ``` Useful for triggering transitions whenever a value changes: ```svelte {#key value}

{value}

{/key} ``` ### await-blocks Await blocks branch on Promise states with optional pending/then/catch blocks; supports lazy component loading via dynamic imports. ## Await Blocks Await blocks allow you to branch on the three possible states of a Promise: pending, fulfilled, or rejected. ### Syntax ```svelte {#await expression}...{:then name}...{:catch name}...{/await} {#await expression}...{:then name}...{/await} {#await expression then name}...{/await} {#await expression catch name}...{/await} ``` ### Full Example with All States ```svelte {#await promise}

waiting for the promise to resolve...

{:then value}

The value is {value}

{:catch error}

Something went wrong: {error.message}

{/await} ``` ### Omitting Blocks The `catch` block can be omitted if you don't need to handle rejections: ```svelte {#await promise}

waiting...

{:then value}

The value is {value}

{/await} ``` Omit the initial pending block if you don't care about that state: ```svelte {#await promise then value}

The value is {value}

{/await} ``` Omit the `then` block to show only the error state: ```svelte {#await promise catch error}

The error is {error}

{/await} ``` ### Server-Side Rendering During server-side rendering, only the pending branch will be rendered. If the expression is not a Promise, only the `then` branch will be rendered. ### Lazy Component Loading Use with dynamic imports to render components lazily: ```svelte {#await import('./Component.svelte') then { default: Component }} {/await} ``` ### snippet Snippets: reusable markup blocks with parameters, passed as props, support recursion, lexical scoping, optional rendering, TypeScript typing via Snippet<[Types]>, implicit children snippet, module exports. # Snippets in Svelte Snippets are reusable chunks of markup declared with `{#snippet name()}...{/snippet}` syntax. They reduce code duplication by extracting repeated template patterns. ## Basic Usage Snippets can have parameters with default values and destructuring: ```svelte {#snippet figure(image)}

{/snippet} {#each images as image} {#if image.href} {@render figure(image)} {:else} {@render figure(image)} {/if} {/each} ``` Rendered with `{@render snippetName(args)}`. ## Scope Snippets can reference values from their enclosing scope (script, each blocks, etc.) and are visible to siblings and their children in the same lexical scope: ```svelte {#snippet hello(name)}

hello {name}! {message}!

{/snippet} {@render hello('alice')} ``` Snippets can reference themselves and each other for recursion: ```svelte {#snippet countdown(n)} {#if n > 0} {n}... {@render countdown(n - 1)} {:else} {@render blastoff()} {/if} {/snippet} {#snippet blastoff()} 🚀 {/snippet} {@render countdown(10)} ``` ## Passing Snippets to Components ### Explicit Props Snippets are values and can be passed as component props: ```svelte {#snippet header()} fruit qty {/snippet} {#snippet row(d)} {d.name} {d.qty} {/snippet} ``` ### Implicit Props Snippets declared directly inside a component implicitly become props: ```svelte

{#snippet header()} {/snippet} {#snippet row(d)} {/snippet}

fruit	qty	{d.name}	{d.qty}

``` ### Implicit `children` Snippet Content inside component tags that isn't a snippet declaration becomes the `children` snippet: ```svelte ``` ### Optional Snippet Props Use optional chaining or conditional rendering for optional snippets: ```svelte {@render children?.()} {#if children} {@render children()} {:else} fallback content {/if} ``` ## Typing Snippets Import `Snippet` from `'svelte'` and use it in type definitions. The type argument is a tuple of parameter types: ```svelte ``` Use generics to tie data and snippet types together: ```svelte ``` ## Exporting Snippets Snippets at the top level can be exported from ` {#snippet add(a, b)} {a} + {b} = {a + b} {/snippet} ``` ## Programmatic Snippets Use `createRawSnippet` API for advanced programmatic snippet creation. ## Snippets vs Slots Snippets replace the deprecated Svelte 4 slots feature with more power and flexibility. ### @render @render tag invokes snippets with optional chaining and conditional fallback support. The `{@render ...}` tag renders a snippet. Snippets are reusable template blocks that can be passed as props or defined locally. **Basic usage:** ```svelte {#snippet sum(a, b)}

{a} + {b} = {a + b}

{/snippet} {@render sum(1, 2)} {@render sum(3, 4)} {@render sum(5, 6)} ``` The expression can be a simple identifier or any JavaScript expression: ```svelte {@render (cool ? coolSnippet : lameSnippet)()} ``` **Optional snippets:** When a snippet might be undefined (e.g., from a prop), use optional chaining to render only when defined: ```svelte {@render children?.()} ``` Or use conditional rendering with fallback content: ```svelte {#if children} {@render children()} {:else}

fallback content

{/if} ``` ### @html_tag Inject raw HTML with `{@html ...}`; sanitize input to prevent XSS; injected HTML bypasses scoped styles, use `:global` to style it. The `{@html ...}` tag injects raw HTML into a component. **Basic usage:** ```svelte

{@html content}

``` **Security:** Always escape the passed string or only use values under your control to prevent XSS attacks. Never render unsanitized content. **Valid HTML requirement:** The expression must be valid standalone HTML. This fails because `

` alone is invalid: ```svelte {@html '

'}content{@html '

'} ``` It also will not compile Svelte code. **Styling limitation:** Content rendered with `{@html ...}` is invisible to Svelte and won't receive scoped styles. Scoped style rules targeting elements inside injected HTML won't work: ```svelte

{@html content}

``` Use the `:global` modifier to style injected content: ```svelte ``` ### @attach_directive Attachments are reactive functions that run in effects on element mount/state changes with optional cleanup; support factories, inline definitions, component props via Symbols, and conversion from actions. ## Overview Attachments are functions that run in an effect when an element is mounted to the DOM or when state read inside the function updates. They can optionally return a cleanup function called before re-run or after element removal. Available in Svelte 5.29+. ## Basic Usage ```svelte

...

``` Elements can have multiple attachments. ## Attachment Factories Functions can return attachments, useful for parameterized behavior: ```svelte ``` The attachment re-runs whenever `content` changes or any state read inside the attachment function changes. ## Inline Attachments Attachments can be defined inline: ```svelte

``` The nested effect runs when `color` changes; the outer effect runs once since it doesn't read reactive state. ## Passing Attachments to Components When used on a component, `{@attach ...}` creates a prop with a Symbol key. If the component spreads props onto an element, the element receives those attachments. This enables wrapper components: ```svelte ``` ## Controlling Re-runs Attachments are fully reactive: `{@attach foo(bar)}` re-runs on changes to `foo`, `bar`, or any state read inside `foo`. To avoid expensive setup work re-running, pass data via a function and read it in a child effect: ```js function foo(getBar) { return (node) => { veryExpensiveSetupWork(node); $effect(() => { update(node, getBar()); }); } } ``` ## Programmatic Creation Use `createAttachmentKey` to add attachments to objects that will be spread onto components or elements. ## Converting Actions Use `fromAction` to convert library actions to attachments, enabling use with components. ### @const Declare block-scoped constants with `{@const}` inside blocks, components, or boundaries. The `{@const ...}` tag defines a local constant within a block scope. **Usage:** ```svelte {#each boxes as box} {@const area = box.width * box.height} {box.width} * {box.height} = {area} {/each} ``` **Constraints:** - Only allowed as an immediate child of a block (`{#if ...}`, `{#each ...}`, `{#snippet ...}`, etc.), a ``, or a `` - Creates a variable that is scoped to the containing block ### @debug Debug tag for logging variable changes and pausing execution; accepts comma-separated variable names only, not expressions. The `{@debug ...}` tag logs variable values whenever they change and pauses execution when devtools are open, serving as an alternative to `console.log()`. **Usage:** ```svelte {@debug user} {@debug user1, user2, user3} ``` **Syntax rules:** - Accepts comma-separated variable names only (not expressions) - Valid: `{@debug user}`, `{@debug user1, user2, user3}` - Invalid: `{@debug user.firstname}`, `{@debug myArray[0]}`, `{@debug !isReady}`, `{@debug typeof user === 'object'}` **Parameterless form:** `{@debug}` without arguments inserts a `debugger` statement triggered on any state change, rather than specific variables. ### bind Two-way data binding directive enabling child-to-parent flow; supports inputs (value/checked/group/files), selects, media elements (audio/video), images, details, contenteditable, dimensions, DOM/component references, and component props via $bindable() rune with optional getter/setter functions. ## Two-way data binding directive The `bind:` directive enables data to flow from child to parent (opposite of normal downward flow). Syntax: `bind:property={expression}` where expression is an lvalue. Can omit expression if it matches property name: `bind:value` equals `bind:value={value}`. Svelte creates event listeners that update bound values. Most bindings are two-way (changes affect both element and value); some are readonly (value changes don't affect element). ### Function bindings Use `bind:property={get, set}` with getter/setter functions for validation/transformation: ```svelte value, (v) => value = v.toLowerCase()} /> ``` For readonly bindings, set get to `null`: ```svelte

...

``` Available in Svelte 5.9.0+. ### Input bindings **`bind:value`** - binds input's value property. Numeric inputs (type="number" or type="range") coerce to number: ```svelte

{a} + {b} = {a + b}

``` Empty/invalid numeric inputs become `undefined`. Since 5.6.0, inputs with `defaultValue` in forms revert to that on reset (binding takes precedence unless null/undefined). **`bind:checked`** - checkbox binding: ```svelte ``` Since 5.6.0, `defaultChecked` attribute reverts on form reset. **`bind:indeterminate`** - independent of checked state: ```svelte {#if indeterminate} waiting... {:else if checked} checked {:else} unchecked {/if} ``` **`bind:group`** - groups radio/checkbox inputs: ```svelte Plain Whole wheat Rice Beans ``` Only works if inputs are in same component. **`bind:files`** - file input binding returns FileList. Update programmatically using DataTransfer: ```svelte ``` FileList objects are immutable; create new DataTransfer to modify. ### Select bindings **`bind:value`** - binds to selected option's value (can be any type, not just strings): ```svelte ``` **` ``` When option value matches text content, value attribute can be omitted. Use `selected` attribute for default selection; binding takes precedence if not `undefined`. Reverts to selected option on form reset. ### Media element bindings **`

Template Syntax