Best-Practices

Svelte 5 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+).

Core Runes

$state — Reactive State

<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: