Svelte.js - The Complete Guide (incl. Sapper.js)

Master the base syntax and core features of Svelte.js to build data-driven applications that output dynamic content, apply JavaScript-driven styling, and respond to user input, events, and API data.

Discover how Svelte uses curly braces to bind markup to script variables like name and age, enabling dynamic output. Learn about on:click events, one-line expressions, and transformations such as uppercase.

Explore how Svelte hijacks the dollar sign colon labeled statement to create reactive calculations, automatically updating derived values like uppercase name when the base name changes.

Explore how Svelte uses labeled statements to automatically re-run code when dependencies like name change, enabling dynamic updates to the dom and conditional logic with if statements.

Bind the input's value to a name variable and update it on input to create two-way data binding, reflecting user keystrokes in the display.

Explore Svelte's bind shortcut for two-way binding on form inputs, binding the value to a name property so keystrokes update data in real time while preserving unidirectional data flow.

Learn to build a multi-component Svelte app by creating a contact card component, importing it into app.svelte, and wiring dynamic data and scoped styles for maintainable UI.

Explore exporting variables to create props, pass a username from a parent app component to a contact card Svelte, and enable two-way binding with bind to reflect input changes.

Explore dynamic bindings in Svelte by exporting variables, binding inputs to title, description, and image, and passing them to a contact card component with live updates.

Explore Svelte's self-extending property shortcut by using {description} when the attribute name matches the variable, leveraging object destructuring concepts to streamline property assignments.

Svelte treats output as text by default to protect against cross-site scripting, but you can render html with a special syntax after sanitizing trusted content.

Learn how to dynamically add or remove css classes in svelte using a ternary expression or the class directive, illustrated with thumb and thumb placeholder when image is undefined.

Explore Svelte core syntax, event handling, two-way binding, component communication, and conditional rendering with loops.

Explore Svelte's core syntax and basic features, then dive into conditionals and loops to render markup based on conditions and repeat chunks for a to-do app using user input.

Learn to output content conditionally in Svelte by showing a contact card only after a button is pressed or inputs are filled, using a done flag and hashtag if block.

Learn to implement form validation in svelte using if, else and else-if blocks to manage empty, invalid, and done states, validating name, title, image, and description before rendering the card.

Explore rendering multiple contact cards in Svelte with the each block, by collecting inputs into a created contact and updating the array with the spread operator to trigger reactivity.

Discover how Svelte's each block uses an else clause for empty arrays and how to access the loop index to display positions like hash tags (i+1) with dynamic content.

Learn how to manage lists in Svelte by adding delete first and delete last buttons, and fix DOM updates using unique keys in each block.

Explore how list keys affect DOM updates and performance in Svelte, using a passwords example to show how unique keys prevent unnecessary re-rendering.

Explore conditional rendering and loops in Svelte to output markup and render repeated chunks from arrays or iterables, and preview reactivity concepts in the next module.

Uncover how Svelte's reactivity automatically updates the dom when data changes. Dive into advanced handling of events, data updates, and tricky arrays and objects cases.

Learn to update arrays immutably in svelte by reassigning a new array with the equals sign. Use slice or filter, not push, to trigger dom updates.

Master svelte event modifiers to control when events fire and prevent default browser behavior. Learn how once, passive, capture, stopPropagation, and preventDefault modifiers shape client-side forms and interactions.

Explore using inline arrow functions for event listeners, balancing inline short logic with pointing to named functions for readability, and how quotes prevent unwanted autocomplete while keeping code clear.

Consolidate Svelte features and reactive updates using functions, arrays, and objects, then preview advanced features while connecting what you learned to the course project.

Kick off the course project by practicing core svelte syntax and exploring component roles and two main types, so you can apply concepts to real-world applications.

Set up a brand new Svelte project for a meetup app, structure folders for meetups and UI components, and create a lean app by splitting features with a header component.

Explore different ways of mounting components in a Svelte app, comparing mounting header and app as separate root elements versus embedding components within a single app component.

Add a meetups array in the app component with id, title, subtitle, description, image, address, and contact email, and create a meetup item component to render the list.

Create a reusable meetup item component in Svelte, render a list with an each block, and pass title, subtitle, and image data plus actions like show details or favorite.

Differentiate stateful components (containers) from presentational components to manage data locally and present data from outside, keeping the app maintainable with a few sources of truth.

Create a presentational meetup item component that outputs data using export let variables. Pass data from a parent component to title, subtitle, image URL, description, address, and contact email.

Create a meetup grid component in the meetups folder, render a two-column responsive grid with meetup items, and pass meetups from app.svelte, keeping the app state minimal.

Create a Svelte meetup form with two-way binding for title, subtitle, description, image URL, URL, address, and contact email, and add a new meetup using spread syntax.

Create a reusable text input component in Svelte that supports input and text area via a control type prop, with configurable id, label, rows, and value.

Explore creating a reusable custom button component in a Svelte.js project, with props for type and caption, conditional rendering for anchor tags, and optional outline mode for styling.

Wrap up the meetup item styling by fixing button positioning with a fixed content height, and review the single stateful app component, presentational components, and communication up the component tree.

Learn how to structure Svelte components, address prop warnings, and create custom events to propagate information from nested components to a parent app component for a highly reactive app.

Explore the two key component roles in Svelte: data-managing stateful components and data-output presentational components. Learn nesting, inter-component communication, and data storage techniques to share state across the app.

Explore how nested components in a svelte app communicate through props and custom events, from root app to product components, to a cart, with data flowing up and down.

Learn how to emit custom events from a child and forward them to the parent using the on directive and forwarding syntax in Svelte.

Learn to emit custom events in Svelte using createEventDispatcher to differentiate add to cart and delete actions, passing data like product IDs to the parent.

Learn how to extract data from custom events in Svelte by inspecting the browser event object, accessing event.detail, and passing data up the component tree.

Pass data through props and events in Svelte using export for title and price, then use the spread operator to pass object props; set default values for optional props.

Learn how slots let you project arbitrary markup into a reusable modal component by using opening and closing tags, avoiding raw string HTML and reducing duplication.

Explore named and default slots in Svelte to target header, content, and footer, define default content, and assign content to slots with slot attributes such as header.

Toggle a show modal variable to display the modal with a Svelte if block, and dispatch cancel and close events for backdrop or button interactions to close it.

Learn to pass data back from a slot in Svelte using the let directive, enabling the parent to react to internal modal state like agreeing to terms to enable closing.

Explore the Svelte component life cycle from creation with script execution, props, and initialization through onMount for server data fetch, to onDestroy cleanup, and update stages beforeUpdate, afterUpdate, and tick.

Learn to use svelte's creation and update lifecycle hooks—onMount, onDestroy, beforeUpdate, and afterUpdate—through a modal component, illustrating dom updates and automatic scrolling.

Show how to use tick to run code after the next micro task in a Svelte app, with a tab-triggered text transformation and after update timing.

Master custom events with createEventDispatcher, named and default slots with slot props, and lifecycle hooks to load data, update the DOM, and scroll to targets.

Apply newly gained knowledge by refining the course project with slots and custom events, improving component communication and creating reusable component shells.

Learn how to add default props in Svelte by explicitly defaulting values like null for unused props and adjusting button types and modes to eliminate warnings.

Learn custom events in Svelte with createEventDispatcher. Dispatch toggle favorite by meetup id and update meetups immutably in the app component, plus move the form to a separate modal.

Create an edit meetup component in svelte and move the form into its own component. Dispatch a save event with meetup data to manage meetups in the app.

Learn to communicate between components in Svelte by dispatching a save event, handling it across components, and extracting data from event.detail to add a meetup and close the form.

Utilize slots to replace caption props on buttons and anchors, using unnamed slots and conditional rendering. Update meetups to employ slots across edit and item buttons with dynamic content.

Demonstrates building a reusable modal component in Svelte, with backdrop, title and content slots, a default close button, and event-driven cancel to wrap an edit meetup form.

Enable submit and cancel actions in the modal by adjusting slot usage and button placement, wiring a type button to submit or emit custom save and cancel events.

Advance your Svelte skills by practicing core bindings and form mechanics, binding data to HTML elements and custom components, and exploring basic form validation.

Explore bindings in Svelte, using the bind directive to form elements and custom components, extract values from forms, and assess validation with swell.

Explore two-way binding in Svelte through a hands-on example, binding an input value to a variable, handling input events, and using the bind directive to simplify code.

Bind to custom components by exporting variables and binding to their props, including a toggle. Learn that two-way binding with dynamic type is not supported; use events for changes.

Explore how Svelte's two-way binding with the bind directive handles input type number, converting values to numbers and preventing string concatenation when performing arithmetic.

Learn to bind checkboxes and radio buttons in forms using bind syntax, including using checked binding for checkboxes and bind:group for radio selections, plus managing checkbox arrays.

Bind the select's value to a variable, set a default red, and update on change to reflect the selected color, with options defined and dynamically renderable via an each block.

Learn how to bind to a custom component in Svelte, including exporting a function to clear its value, and why props and custom events are preferred; note initialization timing.

Build your own form validation in Svelte by creating custom input logic, since there is no built-in solution, with an email check, disabled submit until valid, and optional packages.

Explore binding in Svelte to elements, custom components, and values, using bind this to access element or component, with no built-in validation; implement your own logic or use third-party packages.

Learn how to add form validation in a Svelte.js course project to ensure only valid data is submitted for new meetups, preventing empty inputs and improving data quality.

Explore validation strategies in a Svelte form, comparing validators as input props versus a global validity state, and design a mostly stateless text input with a stateful edit meetup form.

Add client-side validation to the text input in a Svelte component by introducing valid and validityMessage props, styling invalid inputs, and conditionally displaying an error message when invalid.

Create a shared validation module in a Svelte app with isEmpty in helpers/validation.js, import it into edit meetup, and use a reactive title validity variable to manage valid state.

Build robust text input validation in svelte by tracking touched state with blur events, conditionally showing error messages and invalid styling, and validating fields with custom checks.

Combine individual input validities to compute the overall form validity with the and operator. Bind the form's validity to enable the save button only when all fields are valid.

See how svelte cleans up validation logic and maintains behavior with leaner code, using bind on text areas and non-dynamic input types for reliable form handling.

Explore data management and in-app data storage within your Svelte app, moving beyond component state to manage meetups and other data as apps grow, avoiding server storage for now.

Explore how two loosely connected features, the products and the cart, share data via add to cart actions that currently log to the console, and how Svelte solves this.

Create a writable store with a default value and import it into components; subscribe to changes and update with set, enabling a shared cart across product and cart components.

Import the cart store into the product item and use set or update to add items immutably (id, title, price), ensuring the cart stays synchronized with changes.

Leverage a central store to manage state across product and cart components, keeping them mostly presentational while avoiding excessive data passing via props and custom events.

Manage store subscriptions in Svelte by using the unsubscribe function returned by subscribe and cleaning it up in ondestroy to prevent memory leaks when each component unmounts.

Learn how autosubscriptions simplify Svelte store usage by prefixing stores with a dollar sign in markup, enabling automatic subscribe and unsubscribe and seamless array iteration.

Master cart management in Svelte by using a store to remove items with update and filter, toggle item descriptions, and fetch descriptions from a separate products store.

Explore subscribing to a product store in Svelte, fetch products on demand, and display descriptions by ID, with proper unsubscribe handling and one-time data retrieval.

Understand the readable store in svelte: initializes a value, exposes a set function via the second argument, and lets outside code subscribe only for timer or geolocation updates with cleanup.

Create a custom store from a writable store to centralize cart logic, exposing add item and remove item actions while keeping subscribe, ensuring components dispatch actions only.