Back to Home
Svelte logoSvelte INTERMEDIATE

Svelte Essentials

Master Svelte 5 with runes, snippets, and SvelteKit - the modern way to build fast, reactive web applications

15 min read
svelte5runessveltekitreactiveframework

Setup & Basics

Getting started with Svelte 5 and core concepts

Installation

Setting up a new Svelte 5 project

bash
💡 Svelte 5 compiles components to vanilla JavaScript
⚡ No virtual DOM - direct DOM manipulation for speed
📦 Smaller bundle sizes than most frameworks
🔧 Built-in state management with new runes system

Component Structure

Basic Svelte component anatomy

javascript
🎨 Styles are scoped to component by default
📝 No JSX - write regular HTML with enhancements
🔒 TypeScript support with lang="ts" attribute
⚡ Components compile to efficient JavaScript

Runes (Svelte 5)

New reactive primitives in Svelte 5

$state

Reactive state management rune

javascript
🎯 Replaces let declarations for reactive state
🔄 Deep reactivity for objects and arrays automatically
📦 Works with classes and complex structures
⚡ Fine-grained reactivity with minimal re-renders

$derived

Computed values from state

javascript
🔄 Auto-updates when dependencies change
📊 Perfect for calculated values and statistics
🎯 Replaces $: reactive statements from Svelte 4
⚡ Cached and optimized automatically

$effect

Side effects and lifecycle

javascript
🔄 Replaces onMount, afterUpdate, and onDestroy
🧹 Return cleanup function for teardown logic
📍 $effect.pre runs before DOM updates
🎯 untrack() prevents dependency tracking

Control Flow

Conditional rendering and loops

If/Else Blocks

Conditional rendering

javascript
🎯 {#if} blocks for conditional rendering
🔄 {:else if} for multiple conditions
📦 Can nest if blocks for complex logic
⚡ Efficient DOM updates with block-level reactivity

Each Blocks

Rendering lists and arrays

javascript
🔄 {#each} for rendering lists and arrays
🔑 (key) for keyed updates and animations
📝 {:else} for empty state handling
⚡ Efficient list reconciliation with keys

Stores

Global state management

Writable Stores

Creating and using writable stores

javascript
📦 Global state accessible from any component
$ Auto-subscription with automatic cleanup
🔄 update() for transforming current value
💾 Can persist to localStorage easily

Derived & Readable

Computed and read-only stores

javascript
📊 derived() for computed values from stores
🔒 readable() for read-only external data
⚡ Async derived with set callback
🧮 Complex calculations update automatically

SvelteKit

Full-stack framework for Svelte

Routing

File-based routing in SvelteKit

javascript
📁 File-based routing with special files
🎯 Dynamic routes with [param] syntax
📦 Route groups with (name) for organization
🔄 Load functions for data fetching

Props & Bindings

Component props and data binding

$props

Component props in Svelte 5

javascript
🎯 Replaces export let declarations from Svelte 4
📦 Destructure all props at once for cleaner code
🔧 Full TypeScript support with generics
⚡ Props are reactive by default

$bindable

Two-way binding for props

javascript
🔄 Enables two-way data binding between components
📤 Child can update parent state directly
🎯 Replaces bind:prop directive pattern
⚡ Works seamlessly with $state in parent

Form Bindings

Two-way data binding with form elements

javascript
🔄 bind:value for text and number inputs
☑️ bind:checked for single checkboxes
📝 bind:group for radio and checkbox groups
📁 bind:files for file uploads with FileList

Snippets (Svelte 5)

Reusable template fragments (replaces slots)

Basic Snippets

Creating and using snippets

javascript
🎯 Replaces slots in Svelte 5
📦 Reusable template fragments within component
🔄 Can pass multiple parameters
⚡ More flexible and powerful than slots

Component Snippets

Passing snippets between components

javascript
📤 Pass snippets as props to components
🎰 Named snippet props for organization
🔄 Children is the default snippet
📦 Replaces slot and slot prop patterns

Events & Actions

Event handling and element actions

Event Handlers

Handling DOM events in Svelte 5

javascript
🎯 Use onclick, onsubmit, etc. (lowercase) in Svelte 5
📝 Access event object in handler functions
🔄 No automatic preventDefault - must call manually
⚡ Direct event binding for better performance

Actions

Reusable element behaviors

javascript
🎯 use:action directive for reusable behaviors
🔄 Update function for reactive parameters
🧹 Destroy function for cleanup
📦 Encapsulate complex DOM interactions

Transitions & Animations

Built-in transitions and animations

Built-in Transitions

Svelte built-in transition functions

javascript
🎭 Built-in transitions: fade, fly, slide, scale, blur, draw
⚡ Automatic animation on element mount/unmount
🎨 Customizable duration, delay, easing functions
🔄 Different in/out transitions supported

Custom Transitions

Creating custom transition functions

javascript
🎨 Create custom transitions with CSS or tick functions
📊 CSS-based transitions are GPU-accelerated
🔧 Tick function for JavaScript-based animations
⚡ Return duration, css, or tick properties

Special Elements

Svelte special elements and components

Special Elements

Svelte special elements for advanced use cases

javascript
🪟 svelte:window for global window events
🔄 svelte:component for dynamic component rendering
📄 svelte:head to insert elements into document head
🎯 svelte:element for dynamic HTML elements

More Svelte Cheat Sheets

SvelteKit

INTERMEDIATE10 min