Svelte 5 Runes Overview

$State

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

toggle(index)} /> {todo.text}

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

{todo.text} - {todo.done ? 'Done' : 'Not done'}

todo.done = !todo.done}>Toggle todo.reset()}>Reset

{person.name} is {person.age} years old.

Increase Age

Count: {counter.count}

counter.count++}>Increment Log Snapshot

{a} + {b} = {total()}

a++}>Increment A b++}>Increment B

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

Hello, {name}!

$Derived

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

{count} doubled is {doubled}

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

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

{numbers.join(' + ')} = {total}

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

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

{count} is {isEven ? 'Even' : 'Odd'}

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

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

Is count large? {large}

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

{count}

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

{#each messages as message}

{message}

{/each}

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

{count} doubled is {doubled}

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

$Bindable

{message}

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

This component is {props.adjective}

This component is {adjective}

This component is {adjective}

Song lyric: {trouper}

a: {a}, b: {b}, c: {c}

Other props: {JSON.stringify(others)}

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

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

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

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

<label for="{uid}-lastname">Last Name: </label>
<input id="{uid}-lastname" type="text" />

$Host

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

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

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

count: {count}

$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

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

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

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( window: Window, type: Type, handler: (this: Window, event: WindowEventMap[Type]) => any, options?: AddEventListenerOptions ): () => void;

// Attach an event to document function on( 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 {logClick}> Log Click

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

You typed: {text}

<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

{#snippet figure(image)}

{image.caption} {/snippet}

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

{#snippet x()} {#snippet y()}

Inside y

{/snippet}

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

<!-- This will cause an error because `y` is out of scope -->
{@render y()}

{@render x()}

{#snippet blastoff()} 🚀 {/snippet}

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

{@render countdown(5)}

{#snippet header()} Fruit Qty Price Total {/snippet}

{#snippet row(d)} {d.name} {d.qty} {d.price} {d.qty * d.price} {/snippet}

{@render children()}

Click Me

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

Fallback content

{/if}

{#snippet children()}

Custom content

{/snippet}

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

{@render add(2, 3)}

My Website

{/snippet}

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

{#snippet footer()}
	<p>© 2023 My Website</p>
{/snippet}

{#if items.length}

{@render item(entry)}

{:else} {@render empty?.()} {/if}

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

Svelte 5 + TypeScript

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

Notes:

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

Hello, {name}!

Notes:

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

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

Notes:

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

Count: {count}

Notes:

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

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

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

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) => void }; } }

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.

diramazioni/svelte5_full_context.md

Svelte 5 Runes Overview

$State

$Derived

$Effect

{count}

{count} doubled is {doubled}

$Bindable

$Props

$Host

$Inspect

Svelte 5 Event Handling

Svelte 5 Snippets

My Website

Svelte 5 + TypeScript

Notes:

Notes:

Notes:

Notes:

Notes:

Notes:

Svelte 4 → 5 Migration Summary

Event Changes

Component Events

Bubbling Events

Event Modifiers

Multiple Event Handlers

Svelte 5 Changes - Condensed Bullet Points

Component Changes

Code Examples

Legacy Compatibility

Asynchronous Behavior

Server-Side Rendering (SSR)

Typing Changes

bind:this Changes

Dynamic Components

Other Changes