Svelte & SvelteKit: The Complete Guide

Learn to pass snippet components as props, manage hover state with isLeftHovered, and pass boolean arguments to snippets to conditionally render icons and text.

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.

Extend the button component to inherit HTML button attributes from svelte elements to enable autocomplete and support props like disabled and aria. Spread remaining props to the native button.

Learn to make a button customizable with optional background color and text color props, using the style directive for inline styles and CSS variable overrides.

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.

Understand event bubbling, capturing, and delegation in Svelte, see how stopPropagation changes event flow, and learn why Svelte delegates events to the root element for performance.

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.

Display a list of notifications in Svelte with #each loops and the @const tag, and build a reusable notification component with props, splice-based removal, and ISO date formatting.

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 how a notifications array becomes a proxy with reactive properties for selective UI updates, while raw state avoids proxying for performance when the array is not mutated.

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 to build a spreadsheet-like table in Svelte by making cells selectable and editable, with state for edited and selected cells, inline styles, and auto-focused editing inputs.

Explore implementing a spreadsheet cell editor in Svelte. Use a setCell function to update cell values, ensure rows and columns exist, and support value, background color, and color with reactivity.

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.

Discover how deeply nested reactivity in Svelte uses proxies to wrap arrays and objects, turning primitives into reactive values and updating only dependent cells through signal-based logic.

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.

Derive base and target values in a currency converter using input callbacks to update one value and calculate the other. Compare with effects, explain initial value calculation and three-decimal precision.

Discover how to create a writable derived using object setters and getters to derive a target value from a base value, enabling seamless bind:value in a Svelte currency conversion.

Learn how to fetch currency data with an API in a Svelte component, populate currency options, and display live rates using the {#await} block for loading and error states.

Demonstrate how Svelte turns class properties into reactive state using getters and setters, making base value reactive and driving effects and template updates.

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.

Learn how to convert a state property into a private field with custom getters and setters, enabling validation and automatic fetch rates when base currency or base value changes.

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.

Learn to share state across components by exporting a single class instance, so all components reference the same counter state without setters and getters.

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.

Learn to handle components without a parent context in Svelte by using has context, creating a local state, and inspecting all contexts with get all contexts.

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 Konva rect component inside a layer, connect it via the layer context, and configure width, height, x, y, fill, and stroke for draggable rendering.

Learn to handle Canva events by attaching event handlers to shapes and layers, add type-safe props for events, and implement a reusable event registration approach for stage, layer, and rect.

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.

Discover svelte's special elements for dynamic rendering and window interactions, including svelte element, svelte window, svelte document, and svelte head for dynamic seo metadata.

Explore binding media elements in Svelte & SvelteKit, binding image dimensions, and building a custom video player with bound duration, current time, volume, playback rate, and buffering information.

Learn how to share data across component instances in Svelte and SvelteKit by using a module script to track a shared button count, while contrasting instance state with module state.

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.

Explore animating moved elements in a tier list with Svelte's crossfade transition, using send and receive with unique keys and a fallback scale animation; customize duration and easing.

Explore creating a custom spin transition in Svelte using a CSS-based transition that respects original opacity and transform, with configurable delay, duration, easing, and spins.

Explore how to create custom transitions in svelte using javascript, including a fade animation with a tick function and handling original opacity, when css alone falls short.

Explore custom flip animations in Svelte, including calculating from and to positions, translating elements, and adding optional scale effects with D3 interpolation.

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.

Identify essential VSCode extensions for Svelte and Tailwind, including ESLint and Prettier, and apply practical VSCode settings to streamline SvelteKit project navigation, formatting, and folder structure.

Explore how the routes folder and layouts render the plus page svelte and its children, and implement nested routes like about and about/team with route layouts.

Create a dynamic blog route with a square-bracket id parameter in SvelteKit, access it via the page state and page.params.id, and use derived to react to route changes.

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.

Modify layouts conditionally in SvelteKit by using an if on page.url.pathName to render children for about routes, avoiding the root layout there while keeping navigation on the home 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.

Use rest parameters in SvelteKit routes to capture all remaining path segments. The dot dot dot operator collects multi-segment paths, while id, post, and edit routes stay separate.

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.

Explore parameter matchers in SvelteKit routing, turning a dynamic parameter into sign in or register paths with a matcher function and type predicates.

Finalize and clean up the marketing group by building a navigation bar and marketing layout for home, about, blog, faq, and pricing pages with ai-generated content; plan api data later.