Svelte 5

Svelte 5

Project targets Svelte 5 with runes. Never write Svelte 4 patterns: no export let, no $:, no <slot>, no on:click, no createEventDispatcher, no <svelte:component>, no beforeUpdate/afterUpdate.

If you see these in existing code → it's legacy and should be migrated. Read references/migration.md.

Quick map

If you need to …	Read
Use any rune ($state, $derived, $effect, $props, $bindable, $inspect, $host)	references/runes.md
Convert Svelte 4 code or recognize legacy patterns	references/migration.md
Share state across files, type props/snippets, write a generic component, use reactive Map/Set	references/patterns.md
Check whether a Svelte 4 API still exists	references/deprecated.md

Minimal component

<script lang="ts">
  type Props = { title: string; items?: string[] };
  let { title, items = [] }: Props = $props();

  let count = $state(0);
  let doubled = $derived(count * 2);
</script>

<h1>{title}</h1>
<button onclick={() => count++}>{doubled}</button>
{#each items as item}<li>{item}</li>{/each}

Top traps (LLMs get these wrong)

1. Destructuring a $state proxy field breaks reactivity. Pass the parent ref to functions, not the destructured value.
2. $effect writing a value it reads = infinite loop. Use $derived for derivations; $effect is side-effects only.
3. Plain Map/Set/Date/URL are NOT reactive. Import SvelteMap, SvelteSet, SvelteDate, SvelteURL from svelte/reactivity.
4. Custom events use callback props, not dispatch(). <Child onsave={handler} />, not <Child on:save={handler} />.
5. <slot> is gone. Use let { children } = $props() + {@render children()}. Named slots → snippet props.
6. Event modifiers gone. on:click|preventDefault → handle inside the callback.
7. You can't export let a $state from a module. Use a container object, getter function, or class — see references/patterns.md.
8. Class instances aren't auto-proxied. Put $state on individual fields.

Workflow

1. Identify the task: new component, edit existing, migration, or debug reactivity.
2. Read the matching reference file before writing code (don't guess).
3. Use lang="ts" and type $props() inline.
4. After writing, scan for the 8 traps above.