Svelte Programming from Basics to Advance

Discover svelte, a declarative component framework that compiles to smaller bundles, provides svelte stores, motion and transitions, and scoped CSS for building web apps.

Install Node.js LTS and Visual Studio Code, add Svelte extensions, and create a new Svelte project with npx; install dependencies and run the dev server on localhost:8080.

Discover the svelte project structure, including package.json, rollup config, public assets, and the source folder. Learn how yarn dev serves index.html and compiles to main.js using app.svelte.

Understand how a dot svelte file describes a portion of the user interface with script, markup, and style, represents a component, and binds data to the markup through declarative binding.

Learn to bind text from the script to the markup in a Svelte component using curly braces, with a constant name and dynamic JavaScript expressions.

Master binding in Svelte by using curly braces for plain text and the @html prefix to render real HTML, with cautions about cross-site scripting and trusted content.

Bind dynamic attributes in Svelte by linking data to id, class, style, and boolean attributes like disabled, using curly brace syntax and optional shorthand for the same name.

Explore static and dynamic class attributes in Svelte, bind classes with curly braces, and toggle via the class directive, including the shorthand class: promoted.

Explore conditional rendering in Svelte using if block, else block, and else if block to show HTML based on a number being zero, negative, positive, or not a number.

Explore list rendering in Svelte using the each block to repeat html for array items, bind names and indices, and render objects like full names in a user interface.

Learn how key expressions in Svelte's each block enable efficient list diffing, prevent UI bugs during data changes, and keep item state with a practical anime ratings example.

master event handling in Svelte using the on directive to respond to clicks and other events, increment a counter with inline or script-defined handlers, and work with the event object.

Learn how to handle forms in svelte by binding inputs, textareas, and selects to a form values object with the bind directive, including single and multi-select examples.

Learn to handle forms in Svelte by binding checkboxes, checkbox groups, and radio groups to form values, and submit data with event binding and prevent default.

Explore Svelte reactivity by building reactive declarations that derive full name from first and last names and compute a cart total from an items array, with automatic updates on changes.

Explore reactive statements in svelte using the dollar colon syntax to react to changes in dependent values, with examples like volume control from 0 to 20 using conditions and alerts.

Explore Svelte's component-based architecture by building encapsulated, reusable UI parts that compose a full application, and learn how to create, import, and register new components.

Learn how to pass data to reusable Svelte components using props, export let, and binding, including default values and spreading objects across parent and child grids.

Learn how to use the context API in Svelte to share data by setting the context in the root and retrieving it in deep components with setContext and getContext.

Learn to implement custom events in svelte with createEventDispatcher to communicate from child to parent. Build a popup example that emits a close event and reads event.detail data.

Learn how to forward events in Svelte from a deeply nested inner component to the app by omitting a handler and dispatching a greet event with data.

Explore slots in Svelte, letting a parent control the inner content of a child component, illustrated by a card component that renders text, headings, or images.

Learn to build reusable Svelte components with named slots for header, content, and footer, passed from the parent, including multiple slots and conditional rendering with the $slots object.

Learn slot props in Svelte by building a names list component that uses an each block and slots to pass first and last names to the parent for flexible rendering.

Discover how svelte scopes component styles by default and applies global styles with the global modifier across app and child components.