Updated June 2026

Svelte Pro Techniques

Class Duration

14 hours of live training delivered over 2 days.

Student Prerequisites

Svelte, JavaScript, and HTML programming experience
Experience with CSS is helpful but not required

Target Audience

Professionals who have a basic understanding of Svelte and want to take their skills to the next level, building complex, high-performance web applications with advanced Svelte and SvelteKit techniques.

Description

This Svelte Pro Techniques programming course is designed for professionals who have a basic understanding of Svelte and want to take their skills to the next level. The course covers a wide range of advanced topics including environment variables, advanced bindings, component composition, routing, actions, UI special effects, special elements, hooks, and unit testing. Participants will learn how to create complex UI effects, understand the use of special elements, and master advanced routing techniques. The course also delves into the use of hooks, server-side and client-side rendering, and unit testing. By the end of this course, participants will have a deep understanding of Svelte and be able to create complex, high-performance web applications.

Learning Outcomes

Understand the use of environment variables in Svelte and advanced bindings including content-editable, each block bindings, media elements, and more.
Master advanced component composition techniques such as slots, named slots, slot fallbacks, and the context API.
Learn advanced routing techniques including optional parameters, REST parameters, param matchers, and route groups.
Understand actions in Svelte, their uses, element-level lifecycle functions, and how to interface with 3rd party libraries.
Learn to create UI special effects using motion, transitions, key blocks, and animations directives.
Understand the use of special elements in Svelte such as Svelte Self, Svelte Component, Svelte Element, and more.
Learn about hooks in Svelte, how they are used, and how to handle hook requests and errors.
Master advanced topics such as server-side rendering, client-side rendering, pre-rendering, links, and unit testing in Svelte.

Training Materials

Comprehensive courseware is distributed online at the start of class. All students receive a downloadable MP4 recording of the training.

Software Requirements

Students will need a free, personal GitHub account to access the courseware. Students need permission to install Node.js and Visual Studio Code on their computers. Also, students will need permission to install NPM Packages and Visual Studio Code extensions. We will provide a cloud-based environment if students cannot configure a local environment.

Training Topics

Environment Variables

Advanced Bindings

Content-Editable
Each Block Bindings
Media Elements
Readonly Element Dimensions
This Bind
Bind to Components Props
Bind to Component Instances

Advanced Component Composition

Snippets and {#snippet} / {@render}
Multiple snippet props for "named slot" patterns
Snippet fallbacks and parameters
Reading legacy <slot> codebases
Module context
Context API with reactive state

Advanced Routing

Optional Parameters
REST Parameters
Param Matchers
Route Groups
Organize Layouts and Routes

Actions

What are Actions?
How are Actions used?
Element-Level Lifecycle Functions
Customizing Reusable Events
Interface with 3rd Party Libraries

UI Special Effects

Motion: Tweens & Spring
Transitions Directive
Parameters
In and Out
Custom CSS/JS Transitions
Transition Events
Key Blocks
Global & Deferred Transitions
Animations Directive

Special Elements

Svelte Self
Svelte Component
Svelte Element
Svelte Window & Bindings
Svelte Body
Svelte Document
Svelte Head
Svelte Options
Svelte Fragment

Hooks

What is Hook?
How are Hooks used?
Handle Hook
Request Event
Handle Fetch & Error

Pages and Layout

Server-Side Rendering
Client-Side Rendering
Pre-Rendering
Trailing Slash
Universal Loading
Invalidation

Unit Testing

What is Unit Testing?
Why Unit Test Svelte?
Unit Testing Framework
Testing Svelte components
Testing Svelte stores
Testing SvelteKit