Svelte 5 Runes & Event Handlers

Use this skill when working with Svelte 5 projects to ensure proper syntax for reactive state, computed values, effects, and event handling.

What This Skill Does

This skill guides you through the migration from Svelte 4 to Svelte 5 by teaching the new runes system and standardized event handling. Svelte 5 introduces explicit reactivity primitives ($state, $derived, $effect) that replace Svelte 4's implicit `$:` reactive statements, and adopts standard HTML event attributes instead of Svelte-specific directives.

Instructions for AI Agent

When working with Svelte 5 code or converting from Svelte 4:

1. Import Runes at the Top of Components

Always import the necessary runes from 'svelte':

```javascript

import { $state, $derived, $effect, $props, $slots } from 'svelte';

```

2. Define Reactive State with `$state()`

Replace Svelte 4's implicit reactivity with explicit `$state()`:

**Svelte 4:**

```javascript

let count = 0;

```

**Svelte 5:**

```javascript

let count = $state(0);

```

3. Use `$derived()` for Computed Values

Replace Svelte 4's `$:` reactive declarations with `$derived()`:

**Svelte 4:**

```javascript

$: double = count * 2;

```

**Svelte 5:**

```javascript

let double = $derived(count * 2);

```

Alternatively, compute values inline in the template:

```html

<p>{count * 2}</p>

```

4. Use `$effect()` for Side Effects

Replace Svelte 4's `$: {}` reactive blocks with `$effect()`:

**Svelte 4:**

```javascript

$: {

if (count > 10) alert('Too high!');

}

```

**Svelte 5:**

```javascript

$effect(() => {

if (count > 10) alert('Too high!');

});

```

5. Convert Event Handlers to Standard HTML Attributes

Replace Svelte 4's `on:` directives with standard HTML event attributes:

**Svelte 4:**

```html

<button on:click={() => count++}>Click</button>

<input on:input={handleInput} />

<form on:submit|preventDefault={handleSubmit}>

```

**Svelte 5:**

```html

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

<input oninput={handleInput} />

<form onsubmit={(e) => { e.preventDefault(); handleSubmit(e); }}>

```

6. Handle Event Modifiers Manually

Svelte 4's event modifiers (preventDefault, stopPropagation, once, etc.) must be handled explicitly:

**Svelte 4:**

```html

<button on:click|once|preventDefault={handler}>

```

**Svelte 5:**

```html

<button onclick={(e) => {

e.preventDefault();

e.stopPropagation();

handler(e);

e.currentTarget.removeEventListener('click', arguments.callee);

}}>

```

7. Component Props with `$props()`

When destructuring component props, use `$props()`:

**Svelte 5:**

```javascript

let { title, count = 0 } = $props();

```

8. Complete Migration Example

**Svelte 4:**

```html

<script>

let count = 0;

$: double = count * 2;

$: {

if (count > 10) alert('Too high!');

}

</script>

<button on:click={() => count++}>

{count} / {double}

</button>

```

**Svelte 5:**

```html

<script>

import { $state, $derived, $effect } from 'svelte';

let count = $state(0);

let double = $derived(count * 2);

$effect(() => {

if (count > 10) alert('Too high!');

});

</script>

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

{count} / {double}

</button>

```

Key Principles

1. **Explicit over Implicit**: Reactivity must be explicitly declared with runes

2. **Standard Web Platform**: Use native HTML event attributes (onclick, oninput, etc.)

3. **Import Required**: All runes must be imported from 'svelte'

4. **Manual Event Control**: Handle event modifiers using standard JavaScript methods

Common Patterns

Counter Component

```html

<script>

import { $state } from 'svelte';

let count = $state(0);

</script>

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

Clicked {count} times

</button>

```

Form with Validation

```html

<script>

import { $state, $derived } from 'svelte';

let email = $state('');

let isValid = $derived(email.includes('@'));

</script>

<form onsubmit={(e) => {

e.preventDefault();

if (isValid) console.log('Submitted:', email);

}}>

<input type="email" bind:value={email} />

<button disabled={!isValid}>Submit</button>

</form>

```

Effect with Cleanup

```html

<script>

import { $state, $effect } from 'svelte';

let count = $state(0);

$effect(() => {

const interval = setInterval(() => count++, 1000);

return () => clearInterval(interval);

});

</script>

```

Notes