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: