Svelte Tutorial

Svelte Reference & Cheatsheet — Complete Guide

Complete Svelte reference: reactive declarations, stores, component syntax, bindings, lifecycle functions, transitions, and slots — with code examples and explanations.

Svelte Introduction — Your First Svelte Application

Learn Svelte introduction: what Svelte is, compiler-based approach vs virtual DOM, Svelte vs React and Vue, REPL, setup with SvelteKit, and creating your first component.

Svelte Setup Explained — Project Scaffolding and Configuration

Learn Svelte setup: degit scaffolding, SvelteKit initialization, Vite integration, project structure, component files (.svelte), and configuring TypeScript and SCSS.

Svelte Template Syntax Explained — Expressions and Logic Blocks

Learn Svelte template syntax: curly brace expressions, each blocks, if blocks, await blocks, HTML rendering with @html, and reactive declarations in templates.

Svelte Reactivity Explained — Reactive Declarations and Statements

Learn Svelte reactivity: reactive declarations with $:, reactive statements, reactive assignments, updating arrays and objects, and understanding Svelte compiler reactivity.

Svelte Props Explained — Component Input Data

Learn Svelte props: export let for prop declaration, default values, prop forwarding, spread props, typed props with TypeScript, and component composition with props.

Svelte Events Explained — Handling DOM Events

Learn Svelte events: on: directive for DOM events, event modifiers, inline handlers, component events with createEventDispatcher, event forwarding, and custom events.

SvelteKit Basics -- Complete Beginner's Guide

Learn SvelteKit fundamentals -- project structure, file-based routing, server rendering, static generation, and the Svelte reactive component model for modern.

Svelte Bindings Explained — Two-Way Data Binding

Learn Svelte bindings: bind:value for form inputs, bind:this for DOM references, bind:group for checkboxes and radios, bind:clientWidth for element dimensions, and component bindings.

SvelteKit Routing -- Advanced Navigation Guide

Learn SvelteKit routing -- dynamic parameters, layout nesting with slots, optional routes, route groups, and advanced patterns for organizing page hierarchies.

Svelte Lifecycle Explained — Component Lifecycle Functions

Learn Svelte lifecycle: onMount, onDestroy, beforeUpdate, afterUpdate, tick, managing subscriptions, and practical patterns for initialization and cleanup in Svelte components.

SvelteKit API Endpoints -- Complete Guide

Learn SvelteKit endpoints for API handling -- GET, POST, PUT, DELETE handlers, form actions with validation, and streaming JSON responses to clients. .

Svelte Stores Explained — Reactive State Management

Learn Svelte stores: writable stores, readable stores, derived stores, custom stores, store auto-subscriptions with $ prefix, and cross-component state sharing.

SvelteKit Forms -- Form Actions Guide

Learn SvelteKit form actions -- handle submissions with use:enhance, validate data server-side, return field-level errors, and build progressive enhancement.

Svelte Context API Explained — Dependency Injection

Learn Svelte context API: setContext and getContext for dependency injection, context vs stores, typed context keys, and passing data through component trees without prop drilling.

Svelte Slots Explained — Content Projection

Learn Svelte slots: default slots, named slots, slot fallback, slot props, passing data to slots, and layout patterns with slot composition in Svelte components.

Svelte Conditional Rendering — Logic Blocks Deep Dive

Learn Svelte conditional rendering: {#if} { :else if } { :else } blocks, combining conditions, async guards, and patterns for conditional content in Svelte templates.

Svelte List Rendering Explained — Each Blocks

Learn Svelte list rendering: {#each} blocks, keyed each blocks, index access, destructuring, array filtering with reactive declarations, and list transition animations.

Svelte Forms Explained — Form Handling and Validation

Learn Svelte forms: bind:value for inputs, form submit handling, validation patterns, input constraints, file uploads, custom input components, and form state management.

Svelte Motion and Transitions Explained — Smooth Animations

Learn Svelte motion and transitions: transition directive, in/out transitions, custom transition functions, crossfade, draw, fly, slide, and motion stores for spring and tweened values.

Svelte Actions Explained — Reusable DOM Behavior

Learn Svelte actions: use: directive for DOM element access, creating action functions, action parameters, lifecycle hooks, and common action patterns like clickOutside and tooltip.

Svelte Animations Explained — Advanced Element Animation

Learn Svelte animations: animate: directive for element movement, flip animation for list reordering, key blocks for animation triggers, and custom animation functions.

Svelte Easing Explained — Animation Easing Functions

Learn Svelte easing functions: built-in easings (cubicInOut, elasticOut, bounceOut), custom easing, using easing with transitions and motion stores, and easing curve selection.

Svelte Routing Explained — Client-Side Navigation

Learn Svelte routing: SvelteKit file-based routing, page components, dynamic routes, route parameters, layouts, navigation with a and goto, and route protection.

SvelteKit Explained — Full-Stack Svelte Framework

Learn SvelteKit: project structure, page and layout components, server-side rendering, static site generation, API endpoints, form actions, and deployment strategies.

SvelteKit Routes Explained — Filesystem Routing Deep Dive

Learn SvelteKit routes: +page, +layout, +server, +error, +loading files, route groups, optional params, rest params, and advanced routing patterns for complex applications.

SvelteKit Data Loading Explained — Server Load Functions

Learn SvelteKit data loading: +page.server.js load functions, +layout.server.js shared data, universal load functions, invalidation and revalidation, and streaming data.

SvelteKit Forms Explained — Form Actions and Validation

Learn SvelteKit forms: +page.server.js form actions, use:enhance for progressive enhancement, validation, error handling, file uploads, and server-side form processing.

Svelte TypeScript Explained — Type-Safe Svelte Components

Learn Svelte TypeScript: typing component props, stores, events, actions, load functions, and using TypeScript in .svelte files with lang=ts for type safety.

Svelte Testing Explained — Unit and Component Tests

Learn Svelte testing: Vitest for unit tests, @testing-library/svelte for component tests, testing stores, testing actions, mocking load functions, and test patterns.

Svelte Performance Explained — Optimization Techniques

Learn Svelte performance: compiler optimizations, avoiding unnecessary reactivity, lazy loading components, code splitting with SvelteKit, and profiling Svelte apps.

Svelte Stores Deep Dive — Advanced Store Patterns

Learn advanced Svelte store patterns: custom stores with methods, store transformations, store subscriptions in markup, readable stores for timers, and cross-store composition.

Svelte Project — Build a Complete Svelte Application From Scratch

Learn Svelte by building a complete project: real-time dashboard with SvelteKit, stores, server load functions, form actions, authentication, and deployment.