Svelte Basics

A reactive declaration uses the $: label to create a statement that automatically re-runs whenever any variable it references changes. For example, $: doubled = count * 2; keeps doubled in sync with count. The Svelte compiler analyzes the dependencies at build time and inserts the update code, so there is no runtime reactivity library. This makes derived values and side effects concise, behaving similarly to computed properties in other frameworks but with plain JavaScript syntax.

A store is an object that holds state shared across components, with a subscribe method so components react to changes. Svelte provides writable, readable, and derived stores. In a component you access a store's value with the $ prefix, like $count, which auto-subscribes and unsubscribes for you. Stores solve the problem of communicating state between components that are not in a direct parent-child relationship, serving as Svelte's lightweight global state mechanism.

Props are inputs a parent component passes down to a child. In Svelte you declare a prop by exporting a variable in the child's script block, such as export let name;. The parent then sets it as an attribute on the component tag. You can provide default values by assigning to the exported variable. Props make components reusable and configurable, flowing data downward through the component tree while events typically carry information back upward.

A slot lets a component accept and render markup supplied by its parent, enabling flexible composition. The child places a <slot></slot> element where parent content should appear; you can provide fallback content inside it for when nothing is passed. Named slots let a parent target multiple insertion points, and slot props can pass data back up to the slotted content. Slots are the primary way to build wrapper and layout components that remain agnostic about what they contain.

A transition animates an element as it is added to or removed from the DOM. Svelte ships built-in transitions such as fade, fly, slide, and scale, applied with the transition:, in:, or out: directives. You can pass parameters like duration and easing, and even write custom transitions that return CSS or tick-based animations. Because transitions are coordinated by the compiler, they integrate smoothly with conditional blocks and lists, producing polished enter and leave effects with minimal code.