Svelte & SvelteKit: The Complete Guide

Learn to style a Svelte button with Sass, enable SCSS in Vite preprocess, and use the class directive to apply small, large, and shadow classes via optional props.

Explore the updated Svelte class handling in version 5.16, switching from the class directive to the class attribute that accepts objects and arrays, including boolean flags and prop-based classes.

Learn to pass CSS variables as props in Svelte, override button background and text colors without style directives, and use the Svelte CSS wrapper to customize components.

Learn to programmatically interact with a Svelte component by exporting focus and getButton functions, binding to the button element with bind:this, and accessing the HTML button's focus and click methods.

Explore building a dynamic svelte button component that renders as a button or anchor tag via svelte:element, guided by an href prop, with styling and type-safe HTML button/anchor attributes.

Learn how Svelte uses proxies to achieve deep, fine-grained reactivity by recursively proxying arrays and objects, enabling targeted updates through traps, effects, and reactive array length.

Practice Svelte debugging techniques: convert proxies to objects with state.snapshot, inspect for development logging, and use the debug tag and trace to pause and trace reactive state changes in effects.

Learn how to correctly remove elements from a Svelte array by using a key in each loop, avoid stale values with derived data, and identify items with notification.id.

Explore deep state and fine-grained reactivity in Svelte by building a simple spreadsheet component. Select and edit cells, customize colors, and use basic functions like sum and multiply.

Render a spreadsheet-like sheet component by passing a data array of rows and cells, where each cell has a value and optional colors, and render headers and empty cells appropriately.

Learn how to bind a data prop from a parent page to a Svelte sheet component using the bindable feature, enabling synchronized updates and optional defaults.

Update the spreadsheet cell background and font colors using the set cell function and the selected cell state with color inputs.

Learn how to manage derived values and two-way bindings in a Svelte and SvelteKit currency converter, using effects to compute base and target values from base rates.

Encapsulate the currency converter as a reusable reactive class with constructor-initialized states. Define private methods and a getter-setter for target value, load currencies, and fetch rates with an in-class effect.

Solve the previous exercise by implementing private base rates with getters and setters, fetch rates, and recalculate the target value when base or target currency changes.

Explore built-in reactive classes in Svelte reactivity, including date, media query, and URL reactive classes for live clocks and responsive behavior. Use Svelte Motion's tween and spring to animate updates.

Master universal reactivity in Svelte by sharing and extracting state via runes, replacing stores, and applying logic across files. See click to count and double click to count patterns.

Share logic across components by converting a function to a class called counter with value, increment, and reset. Use Svelte's getters to keep the value reactive.

Persist a count state to local storage with an effect that stringifies the count and saves on changes. Load the initial value from local storage and handle server-side rendering.

Explore the Svelte context API to share state among child components without props, using examples like maps, pins, canvases, and forms.

Create a Konva layer component that attaches to a parent stage, manages context to access the stage, renders layer children (shapes), and cleans up on destroy.

Create a Svelte action for Tippy.js tooltips that binds to DOM elements, initializes on mount, supports dynamic content and options, applies styling, and cleans up on unmount.

Explore Svelte attachments, a reactive, more flexible alternative to actions introduced in Svelte 5.29, usable in components and HTML elements, with inline and option-based usage.

Explore Svelte's transition directive to animate a tier list by applying enter and exit transitions like fade and fly, with duration, easing, and event hooks.

Discover how Sveltekit extends Svelte with routing and server side rendering to build full stack apps, fetch data on the server, and grasp hydration and pre rendering.

Explore nesting of roots and layouts in Svelte and SvelteKit, implementing a root layout and an about layout with nested routes, plus a sidebar navigation that highlights the active route.

Use layout groups to give marketing pages a shared layout with navigation, while auth and app pages use separate layouts; routes keep the same URLs.

Learn to implement optional language parameters in svelte and sveltekit routes, enabling a default language when the URL lacks a lang segment. Note that optional parameters cannot follow rest parameters.