Svelte & SvelteKit: The Complete Guide

Master Svelte components by building a reusable button with scoped styling, and learn to define and reuse snippets while passing snippets and props to create dynamic, scalable UI.

Learn how to pass snippets to components as props in Svelte, render icons on the left or right of button text, and type props with TypeScript for safer, dynamic buttons.

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.

Explore the global css selector in svelte to style elements outside a component, learn when to use global versus scoped styles, and manage third party components and keyframes.

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.

Forward event listeners from the component to the button by spreading props, and define optional custom events like on left hover in Svelte.

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.

Explore how Svelte achieves deep reactivity using proxies to intercept object getters and setters, and learn how JavaScript proxies redefine property access and validation.

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.

Explore rendering a spreadsheet with Svelte and SvelteKit by parsing equals-based cell values and supporting sum and multiply functions. Implement parse value, function name extraction, and recursive calculation for results.

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.

Build a svelte currency converter component using a dummy rates file with USD, euros, and sterling pounds; manage base value and currency, derive target value, with binding and validation.

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.

Extract a class into a reusable currency converter in Svelte, move it to lib utils, add a rate getter, switch and reset methods to manage base and target currencies.

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.

Learn to share state in Svelte with a proxy object that exposes a value property, creating deeply reactive state across components without getters and setters.

Define a global effect for the shared count value using root effect wrapping so the effect runs once across all components, enabling local storage persistence.

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.

Discover how tracking contexts determine when a reactive value triggers re-evaluation in templates and effects. See how true or false outputs indicate whether code runs within a tracking context.

Learn to use createSubscriber in Svelte to track the window scroll y, build a reusable subscription, and manage cleanup across components while handling server vs browser rendering.

A reusable scroll y class using createSubscriber with a private subscriber for tracking context and a current value, exporting a default instance for global use, and import in components.

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

Use Svelte context to share state across scoped components within a counters component. Define a reactive state object with getters or proxies and setContext/getContext to enable shared increment and reset.

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.

Learn how to create and type Svelte actions for elements in TypeScript, apply them with the use directive, and handle mounting, destruction, and option changes with a long press example.

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.

Bind element dimensions to state in svelte by syncing offset width and offset height to text area width and height, and note that updates are read-only and cannot write back.

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.

Share data in svelte apps with exported state across components. Explore server safety, context API for scoped state, and module script sharing across component instances.

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.

Animate images and tiers with Svelte transitions using scale, 300 ms duration, and cubic in-out easing, keyed by image IDs. Learn local versus global transitions and reusable image snippets.

Learn how to trigger transitions on state changes in Svelte using key blocks to rebuild content when a value updates, illustrated with a counter and scale or fly transitions.

Use the Svelte animate directive with the flip animation (first last invert play) to smoothly reposition list items when their indices change, during reorders of images or tiers.

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.

Create a new sveltekit app with npm, select the minimal template with TypeScript, and add prettier, eslint, tailwind, and DaisyUI.

Discover the SvelteKit folder structure, including the lib alias and creating custom aliases for components, and learn how to configure routes, assets, and project files.

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 routes with plus pages and a layout, then navigate between home and about using anchors, observing server side rendering and hydration.

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.

Break out of the SvelteKit layout hierarchy by renaming plus page and plus layout files to selectively skip or inherit layouts from root, marketing, and blog paths.

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.