public

Published on 5/14/2025

Svelte 5

Rules

Build & Development Commands

Testing Guidelines

Code Style & Guidelines

Project Guidelines

Write code in Svelte 5 with runes
Use TypeScript with types.
Use Vite for building and development.
Use Tailwind and DaisyUI for styling.
Add newly created files to git.

Documentation Guidelines

Svelte 5 Runes Overview

$State

<script> let count = $state(0); // count is reactive </script>

<button onclick={() => count++}> clicks: {count}  </button>

<script> let todos = $state([ { done: false, text: 'Learn Svelte' }, { done: false, text: 'Build an app' } ]); function toggle(index) { todos[index].done = !todos[index].done; // Reactivity applies to individual items } </script> <ul> {#each todos as todo, index} <li> <input type="checkbox" bind:checked={todo.done} onclick={() => toggle(index)} /> {todo.text} </li> {/each} </ul>

<button onclick={() => todos.push({ done: false, text: 'New task' })}> Add Todo </button>

<script> class Todo { done = $state(false); text = $state(''); constructor(text) { this.text = text; } reset = () => { this.text = ''; this.done = false; } } let todo = new Todo('Buy groceries'); </script> <p>{todo.text} - {todo.done ? 'Done' : 'Not done'}</p> <button onclick={() => todo.done = !todo.done}>Toggle</button> <button onclick={() => todo.reset()}>Reset</button>

<script> let person = $state.raw({ name: 'Alice', age: 30 }); function updatePerson() { // This won't work because `person` is raw (not reactive) person.age += 1; // Instead, we must reassign the whole object person = { ...person, age: person.age + 1 }; } </script> <p>{person.name} is {person.age} years old.</p> <button onclick={updatePerson}>Increase Age</button>

<script> let counter = $state({ count: 0 }); function logSnapshot() { console.log($state.snapshot(counter)); // Logs a plain object, not a Proxy } </script> <p>Count: {counter.count}</p> <button onclick={() => counter.count++}>Increment</button> <button onclick={logSnapshot}>Log Snapshot</button>

<script> function add(getA, getB) { return () => getA() + getB(); } let a = $state(1); let b = $state(2); let total = add(() => a, () => b); // Pass getters to maintain reactivity </script> <p>{a} + {b} = {total()}</p> <button onclick={() => a++}>Increment A</button> <button onclick={() => b++}>Increment B</button>

<script> let name = $state('Alice'); </script>

<input bind:value={ () => name, (v) => name = v.trimStart() } />

<p>Hello, {name}!</p>

$Derived

<script lang="ts"> let count = $state(0); let doubled = $derived(count * 2); // `doubled` automatically updates when `count` changes </script>

<button onclick={() => count++}> Increment </button>

<p>{count} doubled is {doubled}</p>

$derived(count * 2) ensures doubled always reflects the latest count.
You cannot modify state inside $derived, e.g., count++ inside the expression.

<script lang="ts"> let numbers = $state([1, 2, 3]); // `total` is automatically recalculated when `numbers` change let total = $derived.by(() => { let sum = 0; for (const n of numbers) { sum += n; } return sum; }); </script>

<button onclick={() => numbers.push(numbers.length + 1)}> Add Number </button>

<p>{numbers.join(' + ')} = {total}</p>

$derived.by(() => { ... }) is useful when the derived state requires loops or multiple steps.
The derived state (total) automatically updates when numbers change.

<script lang="ts"> let count = $state(0); let isEven = $derived(count % 2 === 0); </script>

<button onclick={() => count++}> Increment </button>

<p>{count} is {isEven ? 'Even' : 'Odd'}</p>

$derived tracks all synchronously accessed state inside its expression.
If count changes, isEven will automatically update.

<script lang="ts"> let count = $state(0); let large = $derived(count > 10); </script>

<button onclick={() => count++}> Increment </button>

<p>Is count large? {large}</p>

Svelte only updates when large changes (false → true or vice versa).
If count changes within the same threshold (e.g., 5 → 6), no update occurs.

$Effect

<script> let size = $state(50); let color = $state('#ff3e00'); let canvas; $effect(() => { const context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); // This effect runs whenever `color` or `size` changes context.fillStyle = color; context.fillRect(0, 0, size, size); }); </script> <canvas bind:this={canvas} width="100" height="100" /> <input type="color" bind:value={color} /> <input type="range" bind:value={size} min="10" max="100" />

<script> let count = $state(0); let milliseconds = $state(1000); $effect(() => { const interval = setInterval(() => { count += 1; }, milliseconds); // Cleanup function runs before effect re-runs or on component destroy return () => { clearInterval(interval); }; }); </script> <h1>{count}</h1>

<button onclick={() => (milliseconds *= 2)}>Slower</button> <button onclick={() => (milliseconds /= 2)}>Faster</button>

<script> let size = $state(50); let color = $state('#ff3e00'); let canvas; $effect(() => { const context = canvas.getContext('2d'); context.clearRect(0, 0, canvas.width, canvas.height); // This effect re-runs when `color` changes but not when `size` changes context.fillStyle = color; setTimeout(() => { context.fillRect(0, 0, size, size); }, 0); }); </script> <canvas bind:this={canvas} width="100" height="100" /> <input type="color" bind:value={color} /> <input type="range" bind:value={size} min="10" max="100" />

<script> import { tick } from 'svelte'; let div = $state(); let messages = $state([]); $effect.pre(() => { if (!div) return; // Tracks `messages.length` so the effect re-runs when messages change messages.length; // Auto-scroll logic before the DOM updates if (div.offsetHeight + div.scrollTop > div.scrollHeight - 20) { tick().then(() => { div.scrollTo(0, div.scrollHeight); }); } }); </script> <div bind:this={div}> {#each messages as message} <p>{message}</p> {/each} </div>

<button onclick={() => messages = [...messages, 'New message']}>Add Message</button>

<script> let count = $state(0); let doubled = $derived(count * 2); // Correct approach // Incorrect approach (causes infinite loops): // $effect(() => { // doubled = count * 2; // }); </script> <h1>{count} doubled is {doubled}</h1>

<button onclick={() => count += 1}>Increment</button>

$Bindable

<script lang="ts"> let { value = $bindable(), ...props } = $props(); // `value` is bindable, allowing two-way data flow </script>

<script lang="ts"> import FancyInput from './FancyInput.svelte'; let message = $state('hello'); // Using `$state` to create a reactive state variable </script> <FancyInput bind:value={message} /> <p>{message}</p>

<script lang="ts"> let { value = $bindable('fallback'), ...props } = $props(); // Default value set to 'fallback' </script>

<script lang="ts"> import FancyInput from './FancyInput.svelte'; </script>

<script lang="ts"> let { value = $bindable('default text'), disabled = $bindable(false), ...props } = $props(); </script>

<script lang="ts"> import FancyInput from './FancyInput.svelte'; let message = $state('Editable text'); let isDisabled = $state(false); </script> <FancyInput bind:value={message} bind:disabled={isDisabled} /> <button onclick={() => isDisabled = !isDisabled}> Toggle Disabled </button>

The input's value and disabled states can both be bound to the parent.
The button toggles the disabled state dynamically.
Useful for forms and UI elements requiring controlled states.

$Props

<script lang="ts"> import MyComponent from './MyComponent.svelte'; </script> <MyComponent adjective="cool" />

<script lang="ts"> let props = $props(); </script> <p>This component is {props.adjective}</p>

<script lang="ts"> let { adjective } = $props(); </script> <p>This component is {adjective}</p>

<script lang="ts"> let { adjective = 'happy' } = $props(); </script> <p>This component is {adjective}</p>

<script lang="ts"> let { super: trouper = 'lights are gonna find me' } = $props(); </script> <p>Song lyric: {trouper}</p>

<script lang="ts"> let { a, b, c, ...others } = $props(); </script> <p>a: {a}, b: {b}, c: {c}</p> <p>Other props: {JSON.stringify(others)}</p>

<script lang="ts"> import Child from './Child.svelte'; let count = $state(0); </script>

<button onclick={() => count += 1}> clicks (parent): {count} </button>

<script lang="ts"> let { count } = $props(); </script>

<button onclick={() => count += 1}> clicks (child): {count} </button>

<script lang="ts"> import Child from './Child.svelte'; </script>

<script lang="ts"> let { object } = $props(); </script>

<button onclick={() => object.count += 1}> clicks: {object.count} </button>

<script lang="ts"> import Child from './Child.svelte'; let object = $state({ count: 0 }); </script>

<script lang="ts"> let { object } = $props(); </script>

<button onclick={() => object.count += 1}> clicks: {object.count} </button>

<script lang="ts"> const uid = $props.id(); </script> <form> <label for="{uid}-firstname">First Name: </label> <input id="{uid}-firstname" type="text" />

</form>

$Host

<svelte:options customElement="my-stepper" />

<button onclick={() => dispatch('decrement')}>decrement</button> <button onclick={() => dispatch('increment')}>increment</button>

<script lang="ts"> import './Stepper.svelte'; let count = $state(0); // State variable to track count </script>

<my-stepper ondecrement={() => count -= 1} onincrement={() => count += 1}

</my-stepper>

<p>count: {count}</p>

$host() only works in components compiled as custom elements (<svelte:options customElement="..."/>).
This approach allows dispatching custom events from a shadow DOM encapsulated component.
Ensure the parent component listens to the dispatched events (ondecrement, onincrement).

$Inspect

<script> let count = $state(0); let message = $state('hello'); $inspect(count, message); // Logs `count` and `message` whenever they change </script>

<button onclick={() => count++}>Increment</button> <input bind:value={message} />

<script> let count = $state(0); $inspect(count).with((type, count) => { if (type === 'update') { console.log(`Count updated to: ${count}`); } }); </script>

<button onclick={() => count++}>Increment</button>

<script> let message = $state('Hello'); $inspect(message).with(console.trace); </script> <input bind:value={message} />

<script> import { doSomeWork } from './utils'; $effect(() => { $inspect.trace(); // Logs which state changes caused this effect to run doSomeWork(); }); </script>

Svelte 5 Event Handling

Svelte 5 replaces on: directives with direct property bindings for event handlers.

<script>
  let count = $state(0);

  function onclick() {
    count++;
  }
</script>

<button {onclick}>
  clicks: {count}
</button>

Key changes:

Removed on:click, replacing it with {onclick} as a property.
Uses a named function (onclick) instead of inline arrow functions.

In Svelte 5, components no longer use createEventDispatcher(). Instead, they accept callback props.

<script lang="ts">
  let { inflate, deflate } = $props(); // Props passed from parent
  let power = $state(5);
</script>

<button onclick={() => inflate(power)}>inflate</button>
<button onclick={() => deflate(power)}>deflate</button>
<button onclick={() => power--}>-</button>
Pump power: {power}
<button onclick={() => power++}>+</button>

<script lang="ts">
  import Pump from './Pump.svelte';

  let size = $state(15);
  let burst = $state(false);

  function inflateHandler(power) {
    size += power;
    if (size > 75) burst = true;
  }

  function deflateHandler(power) {
    if (size > 0) size -= power;
  }

  function reset() {
    size = 15;
    burst = false;
  }
</script>

<Pump inflate={inflateHandler} deflate={deflateHandler} />

{#if burst}
  <button onclick={reset}>new balloon</button>
  <span class="boom">💥</span>
{:else}
  <span class="balloon" style="scale: {0.01 * size}">
    🎈
  </span>
{/if}

Key changes:

Removed createEventDispatcher(), instead using callback props (inflate, deflate).
Events are now just function calls inside Pump.svelte.
Parent (App.svelte) passes handlers like inflateHandler to Pump.

To forward an event from an element to a component, use callback props instead of on:.

<script>
  let { onclick } = $props(); // Accepts an `onclick` function from parent
</script>

<button {onclick}>
  click me
</button>

Key changes:

No need to manually forward events like on:click → {onclick} does the job.

Instead of manually listing every event, just spread props.

<script>
  let props = $props();
</script>

<button {...props}>
  click me
</button>

Key changes:

{...props} automatically applies all attributes, including event handlers like onclick.

Instead of duplicate event bindings, combine handlers manually.

<script>
  function one(event) {
    console.log('First handler', event);
  }

  function two(event) {
    console.log('Second handler', event);
  }
</script>

<button
  onclick={(e) => {
    one(e);
    two(e);
  }}
>
  ...
</button>

Key changes:

Instead of multiple on:click={one} on:click={two}, handlers are manually merged.

Ensure that when spreading props, local event handlers still execute.

<script>
  let props = $props();

  function doStuff(event) {
    console.log('Handled locally', event);
  }
</script>

<button
  {...props}
  onclick={(e) => {
    doStuff(e);
    props.onclick?.(e);
  }}
>
  ...
</button>

Key changes:

The local onclick executes before the props.onclick, preventing overwrites.

Modifiers like once and preventDefault should now be implemented manually.

<script>
  function once(fn) {
    return function (event) {
      if (fn) fn.call(this, event);
      fn = null; // Ensures it only runs once
    };
  }

  function preventDefault(fn) {
    return function (event) {
      event.preventDefault();
      fn.call(this, event);
    };
  }

  function handler(event) {
    console.log('Button clicked');
  }
</script>

<button onclick={once(preventDefault(handler))}>
  ...
</button>

Key changes:

Used higher-order functions to replace on:click|once|preventDefault={handler}.

// svelte/events - on function // on attaches an event handler and returns a cleanup function. // It ensures correct handler order compared to addEventListener.

import { on } from 'svelte/events';

// Attach an event to window function on<Type extends keyof WindowEventMap>( window: Window, type: Type, handler: (this: Window, event: WindowEventMap[Type]) => any, options?: AddEventListenerOptions ): () => void;

// Attach an event to document function on<Type extends keyof DocumentEventMap>( document: Document, type: Type, handler: (this: Document, event: DocumentEventMap[Type]) => any, options?: AddEventListenerOptions ): () => void;

// Attach an event to an HTMLElement function on<Element extends HTMLElement, Type extends keyof HTMLElementEventMap>( element: Element, type: Type, handler: (this: Element, event: HTMLElementEventMap[Type]) => any, options?: AddEventListenerOptions ): () => void;

// Attach an event to a MediaQueryList function on<Element extends MediaQueryList, Type extends keyof MediaQueryListEventMap>( element: Element, type: Type, handler: (this: Element, event: MediaQueryListEventMap[Type]) => any, options?: AddEventListenerOptions ): () => void;

// Generic event attachment function on( element: EventTarget, type: string, handler: EventListener, options?: AddEventListenerOptions ): () => void;

Use on:eventname={handler} to attach handlers (e.g., onclick={() => ...}).

Handlers can mutate $state directly; UI updates automatically.
Shorthand {eventname} works if the handler is a variable or function.
Events like click, input, etc., are delegated; assume bubbling unless stopped.
Events fire after bindings (e.g., oninput after bind:value).
Case-sensitive: onclick ≠ onClick (custom events may use uppercase).

<button onclick={() => count++}> Increment: {count} </button>

<button {logClick}> Log Click </button>

<input oninput={(e) => text = e.target.value} bind:value={text} placeholder="Type here" />

<p>You typed: {text}</p>

<input onkeydown={(e) => e.key === 'Enter' && count++} placeholder="Press Enter to increment" />

Note: For other events (e.g., onmouseover, onfocus), follow the same pattern: on:eventname={() => ...} or {eventname}. Adjust the handler logic based on the event’s purpose.

Svelte 5 Snippets

<script> let images = [ { src: "image1.jpg", caption: "Image 1", href: "https://example.com" }, { src: "image2.jpg", caption: "Image 2" } ]; </script>

{#snippet figure(image)}

<figure> <img src={image.src} alt={image.caption} /> <figcaption>{image.caption}</figcaption> </figure> {/snippet}

{#each images as image} {#if image.href} <a href={image.href}> {@render figure(image)} </a> {:else} {@render figure(image)} {/if} {/each}

<div> {#snippet x()} {#snippet y()} <p>Inside y</p> {/snippet}

<!-- Rendering `y` inside `x` is allowed -->
{@render y()}

{/snippet}

{@render y()}

</div>

{@render x()}

{#snippet blastoff()} <span>🚀</span> {/snippet}

{#snippet countdown(n)} {#if n > 0} <span>{n}...</span> {@render countdown(n - 1)} {:else} {@render blastoff()} {/if} {/snippet}

{@render countdown(5)}

<script> let { data, header, row } = $props(); </script> <table> <thead> <tr>{@render header()}</tr> </thead> <tbody> {#each data as item} <tr>{@render row(item)}</tr> {/each} </tbody> </table>

<script> import Table from "./Table.svelte"; const fruits = [ { name: "Apples", qty: 5, price: 2 }, { name: "Bananas", qty: 10, price: 1 }, { name: "Cherries", qty: 20, price: 0.5 } ]; </script>

{#snippet header()}

<th>Fruit</th> <th>Qty</th> <th>Price</th> <th>Total</th> {/snippet}

{#snippet row(d)}

<td>{d.name}</td> <td>{d.qty}</td> <td>{d.price}</td> <td>{d.qty * d.price}</td> {/snippet} <Table data={fruits} {header} {row} />

<script> let { children } = $props(); </script>

<button>{@render children()}</button>

<Button>Click Me</Button>

<script> let { children } = $props(); </script>

{#if children} {@render children()} {:else}

<p>Fallback content</p> {/if}

<OptionalSnippet /> <OptionalSnippet> {#snippet children()} <p>Custom content</p> {/snippet} </OptionalSnippet>

<script module> export { add }; </script>

{#snippet add(a, b)} {a} + {b} = {a + b} {/snippet}

<script> import { add } from "./math.svelte"; </script>

{@render add(2, 3)}

<script> let { header, main, footer } = $props(); </script> <header> {@render header?.()} </header> <main> {@render main?.()} </main> <footer> {@render footer?.()} </footer>

<script> import Layout from "./Layout.svelte"; </script> <Layout> {#snippet header()} <h1>My Website</h1> {/snippet}

{#snippet main()} <p>Welcome to my website!</p> {/snippet}

<script> let { items, item, empty } = $props(); </script>

{#if items.length}

<ul> {#each items as entry} <li> {@render item(entry)} </li> {/each} </ul> {:else} {@render empty?.()} {/if}

<script> import List from "./List.svelte"; const fruits = ['Apple', 'Banana', 'Cherry']; </script> <List items={fruits}> {#snippet item(fruit)} <span>{fruit}</span> {/snippet}

{#snippet empty()} <span>No fruits available</span> {/snippet} </List>

Svelte 5 + TypeScript

<script lang="ts"> let name: string = 'world'; function greet(name: string) { alert(`Hello, ${name}!`); } </script>

<button onclick={() => greet(name)}>Greet</button>

Notes:

Adding lang="ts" enables TypeScript.
Type annotations (string) help with static checking.
No runtime overhead since TypeScript removes type annotations at compile time.

<script lang="ts"> interface Props { name: string; } let { name }: Props = $props(); </script> <p>Hello, {name}!</p>

<script lang="ts"> import Greeting from './Greeting.svelte'; </script> <Greeting name="Alice" />

Notes:

Props interface ensures name is always a string.
$props() extracts the component’s props with proper typing.

<script lang="ts" generics="Item"> interface Props { items: Item[]; select: (item: Item) => void; } let { items, select }: Props = $props(); </script>

{#each items as item} <button onclick={() => select(item)}>{item}</button> {/each}

<script lang="ts"> import List from './List.svelte'; const names = ['Alice', 'Bob', 'Charlie']; function handleSelect(name: string) { console.log('Selected:', name); } </script> <List items={names} select={handleSelect} />

Notes:

generics="Item" allows the component to accept any item type.
Ensures items and select function operate on the same type.

<script lang="ts"> let count: number = $state(0); function increment() { count += 1; } </script>

<button onclick={increment}>Count: {count}</button>

Notes:

$state(0) initializes a reactive variable with a type.
Without an initial value, TypeScript infers number | undefined.

<script lang="ts"> import type { HTMLButtonAttributes } from 'svelte/elements'; let { children, ...rest }: HTMLButtonAttributes = $props(); </script>

<button {...rest}>{@render children?.()}</button>

<script lang="ts"> import Button from './Button.svelte'; </script>

<Button onclick={() => alert('Clicked!')}>Click Me</Button>

Notes:

HTMLButtonAttributes ensures Button.svelte supports all standard button attributes.
...rest spreads remaining props onto the <button>.

declare namespace svelteHTML { interface IntrinsicElements { 'custom-element': { customProp: string; 'on:customEvent': (e: CustomEvent<any>) => void }; } }

<script lang="ts"> function handleEvent(e: CustomEvent) { console.log('Custom event:', e.detail); } </script>

<custom-element customProp="Hello" on:customEvent={handleEvent}></custom-element>

Notes:

Extending IntrinsicElements allows TypeScript to recognize <custom-element> and its props.
Avoids TypeScript errors when using experimental or third-party web components.

Svelte 4 → 5 Migration Summary

Concise Summary (Svelte 4 → 5)

New Runes API
- Reactive variables use let count = $state(0);
- Derived values use const double = $derived(count * 2);
- Side effects use

    $effect(() => {
      if (count > 5) alert('Count is too high!');
    });

Declaring Props
- All props come from let {...} = $props();
- Example:

    <script>
      let { optional = 'unset', required } = $props();
    </script>

Renaming or forwarding props:

    <script>
      let { class: klass, ...rest } = $props();
    </script>
    <button class={klass} {...rest}>click me</button>

Below is a concise, mostly bullet-pointed summary of the changes, focusing on code snippets:

Event Changes

Svelte 4 used on: directives.
Svelte 5: Use regular properties like onclick instead (no :).

Example:

<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  clicks: {count}
</button>

Shorthand Example:

<script>
  let count = $state(0);

  function onclick() {
    count++;
  }
</script>

<button {onclick}>
  clicks: {count}
</button>

Component Events

Svelte 4: createEventDispatcher for emitting events.
Svelte 5: Use callback props instead.

Example (App.svelte):

<script lang="ts">
  import Pump from './Pump.svelte';

  let size = $state(15);
  let burst = $state(false);

  function reset() {
    size = 15;
    burst = false;
  }
</script>

<Pump
  inflate={(power) => {
    size += power;
    if (size > 75) burst = true;
  }}
  deflate={(power) => {
    if (size > 0) size -= power;
  }}
/>

{#if burst}
  <button onclick={reset}>new balloon</button>
  <span class="boom">💥</span>
{:else}
  <span class="balloon" style="scale: {0.01 * size}">
    🎈
  </span>
{/if}

Example (Pump.svelte):

<script lang="ts">
  let { inflate, deflate } = $props();
  let power = $state(5);
</script>

<button onclick={() => inflate(power)}>inflate</button>
<button onclick={() => deflate(power)}>deflate</button>

<button onclick={() => power--}>-</button>
Pump power: {power}
<button onclick={() => power++}>+</button>

Bubbling Events

No more <button on:click> to forward.
Accept a callback prop like onclick:

<script>
  let { onclick } = $props();
</script>

<button {onclick}>
  click me
</button>

Can “spread” handlers with other props:

<script>
  let props = $props();
</script>

<button {...props}>
  click me
</button>

Event Modifiers

Svelte 4 example: <button on:click|once|preventDefault={handler}>...
Svelte 5: No built-in modifiers. Handle event.preventDefault() in the function or wrap manually.

Example Wrappers:

<script>
  function once(fn) {
    return function (event) {
      if (fn) fn.call(this, event);
      fn = null;
    };
  }

  function preventDefault(fn) {
    return function (event) {
      event.preventDefault();
      fn.call(this, event);
    };
  }
</script>

<button onclick={once(preventDefault(handler))}>...</button>

For capture, do: onclickcapture={...}
For passive or nonpassive, use an action to attach the event.

Multiple Event Handlers

Svelte 4 allowed <button on:click={one} on:click={two}>.
Svelte 5: Only one onclick property. Combine them:

<button
  onclick={(e) => {
    one(e);
    two(e);
  }}
>
  ...
</button>

When spreading props, place local handlers afterward to avoid overwriting:

<button
  {...props}
  onclick={(e) => {
    doStuff(e);
    props.onclick?.(e);
  }}
>
  ...
</button>

Svelte 5 Changes - Condensed Bullet Points

Component Changes

No More Class Components → Components are now functions.
Instantiation → Use mount or hydrate instead of new Component().
Mount vs. Hydrate → hydrate picks up server-rendered HTML, otherwise identical to mount.
No $on, $set, $destroy
- $on → Use events property instead (though callbacks are preferred).
- $set → Use $state for reactivity.
- $destroy → Use unmount.

Code Examples

import { mount } from 'svelte';
import App from './App.svelte';

const app = mount(App, { 
  target: document.getElementById("app"),
  events: { event: callback } // Replacement for $on
});

const props = $state({ foo: 'bar' }); // Replacement for $set
props.foo = 'baz';

import { unmount } from 'svelte';
unmount(app); // Replacement for $destroy

Legacy Compatibility

Use createClassComponent from svelte/legacy if needed.
compatibility.componentApi option enables auto-backwards compatibility.

export default {
  compilerOptions: {
    compatibility: {
      componentApi: 4
    }
  }
};

Asynchronous Behavior

mount and hydrate are not synchronous.
Use flushSync() if onMount must be guaranteed to run.

Server-Side Rendering (SSR)

No render() method in components.
Instead, use render() from svelte/server.

import { render } from 'svelte/server';
import App from './App.svelte';

const { html, head } = render(App, { props: { message: 'hello' }});

CSS not included by default → Use css: 'injected' to include styles.

Typing Changes

SvelteComponent deprecated → Use Component type.
ComponentEvents & ComponentType deprecated.

import type { Component } from 'svelte';
export declare const MyComponent: Component<{ foo: string }>;

bind:this Changes

No longer returns $set, $on, or $destroy methods.
Now only returns instance exports & property accessors (if enabled).

Dynamic Components

<svelte:component> no longer needed.
Components update dynamically when reassigned.

<script>
  import A from './A.svelte';
  import B from './B.svelte';
  let Thing = $state();
</script>

<select bind:value={Thing}>
  <option value={A}>A</option>
  <option value={B}>B</option>
</select>

<!-- Both are now equivalent -->
<Thing />
<svelte:component this={Thing} />

Other Changes

Dot Notation (<foo.bar>) now treated as a component, not an HTML tag.
Whitespace Handling Simplified → Predictable behavior.
Reserved children Prop → Cannot use children as a prop name; it's reserved.