svelte

svelte

Svelte shifts reactivity from runtime to compile time.

Core Concepts

• Svelte 5 runes: $state for reactive state, $derived for computed values
• $effect for side effects that auto-track dependencies
• $props for component inputs with type safety

Common Patterns

• Logic blocks: {#if}, {#each}, {#await} for declarative control flow
• Stores: writable, derived, readable for cross-component state
• Snippets (Svelte 5) replace slots for content projection

Best Practices

• Prefer runes over stores for local component state
• Use $derived instead of $effect for computations
• Apply transitions sparingly for deliberate UX polish

Common Code Patterns

• on:click, on:submit for native DOM event handling
• use:action for DOM element behavior encapsulation
• Transition directives: transition:fade, transition:fly for animations