SVELTE QUICK REFERENCE
Components, reactivity, stores, transitions, SvelteKit
Components
Basic Component
Hello {name}!
Component Structure
| <script> | Component logic (JS/TS) |
| Markup | HTML template with {expressions} |
| <style> | Scoped CSS (auto-scoped to component) |
| <script context="module"> | Runs once per module, not per instance |
Reactivity
Reactive Assignments
Reactive Declarations
$: marks reactive declarations and statements
Reactive Rules
| Assignment triggers | count += 1 triggers update; obj.x = 1 does too |
| Array mutation | Use arr = [...arr, item] (reassign to trigger) |
| $: declaration | Auto-recomputes when referenced vars change |
| $: statement | Runs side effects reactively |
Props
Declaring & Passing Props
Spread Props
Events
DOM Events
value = e.target.value} />
Event Modifiers
| preventDefault | Calls e.preventDefault() |
| stopPropagation | Stops event bubbling |
| once | Handler fires only once |
| self | Only if event.target is the element |
| capture | Use capture phase |
Component Events
Bindings
Two-Way Binding
Element & Component Bindings
Binding Types
| bind:value | Input/select/textarea value |
| bind:checked | Checkbox state |
| bind:group | Radio/checkbox group |
| bind:this | DOM element reference |
| bind:clientWidth/Height | Read-only element dimensions |
Stores
Writable Store
// store.js
import { writable } from "svelte/store";
export const count = writable(0);
// Component — auto-subscribe with $
Store Methods
count.set(10); // set value
count.update(n => n + 1); // update from current
const unsub = count.subscribe(v => console.log(v));
Store Types
| writable(val) | Read-write store |
| readable(val, fn) | Read-only, set by start function |
| derived(stores, fn) | Computed from other stores |
| $store | Auto-subscribe syntax in components |
Transitions
Built-in Transitions
{
#if visible}
Fades in/out
Fly in, fade out
{/if}
Transition Options
| fade | Opacity 0 to 1 |
| fly | Animate x/y offset + opacity |
| slide | Slide in/out (height) |
| scale | Scale and fade |
| draw | SVG path stroke animation |
| duration | Transition time in ms |
| delay | Delay before start |
Slots
Default & Named Slots
Default header
Default content
Title
Body content goes here
Slot Props
{
#each items as item}
{/each}
{index}: {item.name}
Context
Set & Get Context
Context vs Stores
| Context | Component-tree scoped, not reactive by default |
| Stores | Global, reactive, importable anywhere |
| Context + Store | Pass a store via context for scoped reactivity |
SvelteKit Basics
File-Based Routing
src/routes/
+page.svelte
about/+page.svelte
blog/[slug]/+page.svelte
Load Functions
// +page.js (runs on client & server)
export async function load({ params, fetch }) {
const res = await fetch(`/api/posts/${params.slug}`);
return { post: await res.json() };
}
Key Files
| +page.svelte | Page component |
| +page.js / +page.ts | Client/universal load function |
| +page.server.js | Server-only load / form actions |
| +layout.svelte | Shared layout wrapper |
| +error.svelte | Error page |
| +server.js | API endpoint (GET, POST, ...) |