Knowledge · Guidelines · sveltekit

Svelte5 Component Patterns

Svelte 5 runes, component patterns, event handling, and CSS scoping rules for all SvelteKit page and component implementation in this workspace. Sourced from official Svelte 5 documentation — enforced during FDD4.UI steps.

Metadata

sveltekit sveltekit

Procedures

Showing 3 of 16

  1. S5.1 Use $state() for ALL reactive variable declarations — replaces Svelte 4 'let' reactivity
    let count = $state(0);
let todos = $state([{ done: false, text: 'add more todos' }]);
// Deep reactivity: todos[0].done = true triggers update
  2. S5.2 Use $derived() for computed values — replaces Svelte 4 '$:' reactive declarations
    let count = $state(0);
let doubled = $derived(count * 2);
// Expression must be PURE — no side effects
  3. S5.3 Use $effect() ONLY for side effects (logging, DOM manipulation) — NEVER for state synchronization
    $effect(() => {
  console.log('Size changed:', size);
});
// BAD: $effect(() => { otherState = derivedValue; });
// Use $derived() instead for state-to-state derivations