Svelte 5 Runes: Fine-Grained Reactivity Explained

Svelte 5 Runes

Explicit reactivity that works outside .svelte files too.

<script>
  let count = $state(0)
  let doubled = $derived(count * 2)
  let user = $state({ name: 'Alice', scores: [] })

  $effect(() => {
    document.title = 'Count: ' + count
    return () => { document.title = 'App' }
  })

  let { name = 'World', ...rest } = $props()
</script>

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

Snippets (replacing slots)

<script>
  let { title, children, footer } = $props()
</script>
<div class="card">
  <h2>{title}</h2>
  {@render children()}
  {#if footer}{@render footer()}{/if}
</div>

Portable Reactivity (.svelte.ts)

export class Counter {
  count = $state(0)
  doubled = $derived(this.count * 2)
  increment() { this.count++ }
}

-> Analyze store data with the JSON Viewer.