Contents
Svelte
A compiled UI framework: components, runes, stores and SvelteKit.
1.Getting started
- What Svelte isSvelte as a UI compiler: how it differs from React and Vue, what runes and SvelteKit are.
- Creating a projectHow to create a project with npx sv create, run it, and what lives in which folder.
- ComponentsWhat a .svelte file is made of: script, markup and styles. How to create a component and render it on a page.
- Markup and expressionsHow to insert values into text and attributes, the attribute shorthand, @html and comments.
2.Reactivity
- State: $stateHow to declare changing data with the $state rune so the page updates by itself, and how to work with arrays and objects.
- Derived values: $derivedHow to declare a value that recalculates itself from state: the $derived and $derived.by runes.
- Side effects: $effectHow to run code after state changes: the tab title, localStorage, timers and cleaning them up.
3.Template logic
- Conditions: the if blockHow to show different markup depending on a condition: if, else if and else blocks.
- Lists: the each blockHow to render an array with an each block, get the index, set a key and show fallback text for an empty list.
- Promises: the await blockHow to show loading, the result and the error of a promise right in the markup with an await block.
4.Components
- Props: $propsHow to pass data into a component through attributes and receive it with the $props rune, default values and rest props.
- Events and handler functionsHow to handle clicks and form submission with the onclick and onsubmit attributes, and how to pass a function to a child component.
- Bindings: bindHow to connect an input to a variable with bind:value and bind:checked, and get a reference to an element with bind:this.
- Nested content and snippetsHow to pass markup into a component: the children prop, snippet blocks and the @render tag.
- Styles and the class: directiveHow scoped component styles work, global styles with :global, and toggling classes with the class: directive.
- Transitions and animationsHow to show and hide elements smoothly with the transition directive and animate list reordering with animate:flip.
5.Shared state
6.SvelteKit
- Routes: +page.svelte pagesHow SvelteKit builds site addresses from folders in src/routes, how to add a page and link to it.
- Layouts: +layout.svelteHow to move a shared header and menu into a layout, make a nested layout for a section and highlight the current link.
- Loading data: the load functionHow to fetch data for a page with a load function in +page.server.js and +page.js and receive it in the component through data.
- Dynamic routes and parametersHow to serve many addresses with one page through a [slug] folder, read the parameter in load and return 404.
- Forms and actionsHow to handle a form submission on the server with actions in +page.server.js, validate data with fail and enhance the form with use:enhance.
- API routes: +server.jsHow to make a route that answers with JSON instead of a page: GET and POST functions in a +server.js file.
- Hooks: hooks.server.jsHow to run code for every request with the handle function, pass data in event.locals and log errors with handleError.
- Error pages: +error.svelteHow to design an error page in a +error.svelte file, show the code and message, and make a separate page for a section.
7.Going to production
- Environment variables: the $env modulesHow to keep settings and secrets in a .env file and read them through $env/static/private, $env/static/public and the dynamic modules.
- Adapters and deploymentWhat a SvelteKit adapter is, how to build the project for your own Node.js server with adapter-node and how to make a static site.
- Testing basicsHow to add Vitest with sv add, test a plain function and a Svelte component, and where Playwright end-to-end tests fit.