Svelte 5 Best Practices

June 7, 2026 • Updated June 7, 2026 • 1 min read • 171 words

svelte svelte5 runes best-practices

Svelte 5 Best Practices

Overview

Svelte 5 introduces Runes — a universal, fine-grained reactivity system that replaces the Svelte 4 compiler-driven reactivity. This page documents production-ready patterns for Svelte 5 (v5.0+).

Key Findings

1. $state for reactive primitives, objects, arrays — use $state.raw for large data only reassigned

2. $derived for computed values (expression preferred) — $derived.by for complex logic

3. $effect for side effects only — avoid state updates in effects, use event handlers instead

4. $props for component props — treat as mutable, use $derived for computed prop values

5. Snippets replace slots: {#snippet name()}…{/snippet} rendered with {@render name()}

6. Event handlers: onclick not on:click, <svelte:window onkeydown={…}> for global events

7. {@attach} for external lib integration (D3, charts) — returns cleanup function

8. {@const} for template-scoped constants in #each blocks

9. TypeScript: interface Props, $props(), Snippet<[Type]> for snippet types

Evolution Notes

Content last updated: 2026-06-07 Next review: 2026-06-14

Overview

Svelte 5 introduces Runes — a universal, fine-grained reactivity system that replaces the Svelte 4 compiler-driven reactivity. This page documents production-ready patterns for Svelte 5 (v5.0+).

Core Runes

$state — Reactive State

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<script>
  // Primitive — fine-grained
  let count = $state(0);
  
  // Object — deeply reactive (proxied)
  let user = $state({ name: 'Ada', age: 36 });
  
  // Array — deeply reactive
  let items = $state(['a', 'b', 'c']);
  
  // Raw — no proxy, only reassignment triggers updates
  let rawData = $state.raw(largeApiResponse);
</script>

Key rules:

Overview

Complete guide for migrating Svelte 4 applications to Svelte 5. Covers breaking changes, codemods, and incremental adoption strategies.

Breaking Changes Summary

Area	Svelte 4	Svelte 5
Reactivity	Compiler-driven (`$:`)	Runes (`$state`, `$derived`, `$effect`)
Props	`export let`	`$props()`
Slots	`<slot>`	Snippets (`{#snippet}`, `{@render}`)
Events	`on:click`	`onclick`
Context	`setContext`/`getContext`	Still works, but `$state` modules preferred
Dispatch	`createEventDispatcher`	Callback props

Automated Migration

1. Run the Official Codemod

1
npx @sveltejs/migrate@latest svelte-5

This handles:

AI Content Evolution Strategies

Overview

AI-powered content evolution ensures documentation stays current, accurate, and comprehensive. This page covers strategies for continuously improving content through automated research, quality analysis, and structured updates.

Evolution Strategies

1. Scheduled Research Scans

Run a research script on a cron schedule (daily/weekly) to:

Search for latest developments in each topic
Compare new findings against existing content
Update pages with fresh information and new sources

1
2
# Daily at 03:00 via Hermes cron
python3 scripts/research-automation.py

2. Content Freshness Tracking

Each page tracks its own freshness via front matter:

Svelte 5 Best Practices

Overview

Key Findings

1. $state for reactive primitives, objects, arrays — use $state.raw for large data only reassigned

2. $derived for computed values (expression preferred) — $derived.by for complex logic

3. $effect for side effects only — avoid state updates in effects, use event handlers instead

4. $props for component props — treat as mutable, use $derived for computed prop values

5. Snippets replace slots: {#snippet name()}…{/snippet} rendered with {@render name()}

6. Event handlers: onclick not on:click, <svelte:window onkeydown={…}> for global events

7. {@attach} for external lib integration (D3, charts) — returns cleanup function

8. {@const} for template-scoped constants in #each blocks

9. TypeScript: interface Props, $props(), Snippet<[Type]> for snippet types

Related Topics

Evolution Notes