liminfoSvelte Reference
Free reference guide: Svelte Reference
About Svelte Reference
The Svelte Reference is a searchable quick-reference for the Svelte framework, covering six core categories: Components, Reactivity, Stores, Events, Bindings, and Transitions. Each entry includes the syntax pattern, a clear description, and a copy-ready code example that works in any Svelte 3/4 project. Unlike React or Vue, Svelte compiles your components at build time into efficient imperative JavaScript, so understanding its unique syntax is essential for leveraging its performance advantages.
Svelte introduced a fundamentally different approach to UI development by shifting work from the browser to the compiler. There is no virtual DOM; instead, Svelte generates surgical DOM updates via reactive assignments. This reference covers Svelte-specific patterns that have no direct equivalent in other frameworks, such as the $: reactive label, the auto-subscription syntax with $ prefix for stores, the {#each}/{#if}/{#await} template blocks, and the built-in transition system with fade, fly, slide, and custom transition functions.
Whether you are declaring props with export let, creating a custom store with subscribe/set/update, dispatching component events with createEventDispatcher, binding form inputs with bind:value, or animating list reordering with animate:flip, this cheat sheet provides the exact syntax and usage pattern. It is designed for frontend developers who want a fast lookup while building Svelte applications, from simple single-page apps to complex SvelteKit-powered full-stack projects.
Key Features
- Component fundamentals including script blocks with TypeScript support, props via export let with default values, named and default slots, and template blocks for conditional, list, and async rendering
- Reactive declarations using the $: label for computed values, reactive statements, array/object immutability patterns for triggering updates, and tick() for post-DOM-update logic
- Store system covering writable, readable, and derived stores, auto-subscription with $ prefix in components, and custom store creation with encapsulated business logic
- Event handling with on:directive, event modifiers (preventDefault, stopPropagation, once, self), custom event dispatching via createEventDispatcher, and event forwarding through component hierarchies
- Two-way binding for text inputs, number inputs, textareas, selects, checkboxes (bind:checked), radio groups (bind:group), DOM element references (bind:this), and dimension tracking (bind:clientWidth)
- Built-in transitions including fade, fly, and slide with configurable parameters, separate in/out transitions, the animate:flip directive for list reordering, and custom transition functions with tick callbacks
- Searchable and filterable interface organized by Svelte concept category, with syntax highlighting for JavaScript/HTML template code
- All examples follow Svelte 3/4 conventions and are compatible with both standalone Svelte projects and SvelteKit applications
Frequently Asked Questions
What is the difference between Svelte reactivity and React state?
In React, you explicitly call setState or a setter from useState to trigger re-renders. In Svelte, any assignment to a top-level variable inside a component automatically triggers a DOM update. The $: label creates derived/computed values that recalculate whenever their dependencies change. This compiler-driven approach eliminates the need for hooks or explicit dependency arrays.
Why do I need to reassign arrays and objects for Svelte reactivity?
Svelte tracks reactivity through assignments, not mutations. Calling items.push(newItem) mutates the array without an assignment, so Svelte does not detect the change. Instead, use items = [...items, newItem] or items = items.filter(...). This pattern ensures the compiler generates the update code. The same applies to objects: use obj = { ...obj, newKey: value } instead of obj.newKey = value.
How do Svelte stores differ from React Context or Redux?
Svelte stores are lightweight reactive containers with a simple subscribe/set/update API. A writable store is created in one line with writable(initialValue). In components, the $ prefix auto-subscribes and auto-unsubscribes. Unlike Redux, there is no action/reducer boilerplate. Unlike React Context, stores do not require provider components and can be imported directly into any .svelte file.
What are event modifiers and when should I use them?
Event modifiers are pipe-separated directives appended to on: handlers. Common modifiers include preventDefault (prevents default browser behavior), stopPropagation (prevents event bubbling), once (handler fires only once then removes itself), self (only triggers if event.target is the element itself), and capture (uses capture phase). They replace the need for calling event methods inside handler functions.
How does bind:value work compared to on:input?
bind:value creates a two-way binding between an input element and a variable. When the user types, the variable updates automatically, and when the variable changes programmatically, the input reflects the new value. This is equivalent to combining value={variable} with on:input={(e) => variable = e.target.value}. Svelte provides bind:checked for checkboxes and bind:group for radio/checkbox groups.
Can I create custom transitions in Svelte?
Yes. A custom transition is a function that receives the DOM node and optional parameters, and returns an object with duration, delay, easing, and a tick function. The tick function is called with a value t (0 to 1) during the transition. For example, a typewriter effect can progressively reveal text by slicing node.textContent based on t. Custom transitions integrate seamlessly with the transition:, in:, and out: directives.
What is the $ prefix for stores and how does auto-subscription work?
When you prefix a store variable with $ inside a component script or template, Svelte automatically subscribes to the store on component mount and unsubscribes on destroy. Writing $count is equivalent to subscribing with count.subscribe(value => ...) and storing the latest value. You can also assign directly: $count = 5 is equivalent to count.set(5), and $count++ works as count.update(n => n + 1).
How do slots work for component composition in Svelte?
Slots allow parent components to pass content into child component templates. A default <slot> renders any content placed between the component tags. Named slots use <slot name="header"> in the child and slot="header" attribute on content in the parent. Slots can have fallback content that displays when no content is provided. Slot props enable the child to pass data back to the parent via let: directives.