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. $s t a t e f or r e a c t i v e p r imi t i v es, o bj ec t s, a r r a y s — u se$ state.raw for large data only reassigned

2. $d er i v e df or co m p u t e d v a l u es (e x p r ess i o n p r e f er r e d) —$ derived.by for complex logic

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

4. $p r o p s f or co m p o n e n tp r o p s — t r e a t a s m u t ab l e, u se$ 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

description	Deep dive into Svelte 5 runes — $state, $derived, $effect, $props, and advanced patterns.
tags	svelte, svelte5, runes, best-practices

🧭 Explore

Graph View

Svelte 5 Best Practices

Overview

Key Findings

1. $s t a t e f or r e a c t i v e p r imi t i v es, o bj ec t s, a r r a y s — u se$ state.raw for large data only reassigned

2. $d er i v e df or co m p u t e d v a l u es (e x p r ess i o n p r e f er r e d) —$ derived.by for complex logic

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

4. $p r o p s f or co m p o n e n tp r o p s — t r e a t a s m u t ab l e, u se$ 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

Table of Contents

Backlinks

🧭 Explore

Graph View

Svelte 5 Best Practices

Overview

Key Findings

1. stateforreactiveprimitives,objects,arrays—usestate.raw for large data only reassigned

2. derivedforcomputedvalues(expressionpreferred)—derived.by for complex logic

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

4. propsforcomponentprops—treatasmutable,usederived 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

Table of Contents

Backlinks

1. $s t a t e f or r e a c t i v e p r imi t i v es, o bj ec t s, a r r a y s — u se$ state.raw for large data only reassigned

2. $d er i v e df or co m p u t e d v a l u es (e x p r ess i o n p r e f er r e d) —$ derived.by for complex logic

4. $p r o p s f or co m p o n e n tp r o p s — t r e a t a s m u t ab l e, u se$ derived for computed prop values