Learn Svelte in 3 minutes

Written by Rico Sta. Cruz
(@rstacruz) · 5 Aug 2022
I’ve been learning Svelte. Here are my notes as I learned it! If you’re already familiar with JavaScript and other frameworks, I’m hoping this guide can help you learn Svelte quickly. 👇

Svelte basics

Svelte is a web framework for writing rich user interfaces. Here’s a quick guide on Svelte 3.0.


The easiest way to learn Svelte (in my opinion) is the examples documentation. It’s comprehensive and straight-to-the-point.

Basic component

Svelte components store the markup, script and CSS styles in one .svelte file.

let name = "Rico";
hello {name}!
div { color: dodgerblue; }

Nested components

Using export let will define a component property.

import Nested from './Nested.svelte';
My message is:
<Nested message="Hello there" />
export let message;
div { color: purple; }


Styles are scoped per component, but :global(…) will allow styling elements outside the component.

Only this will be red.
p { color: red; }
p :global(a) { color: blue; }

Attributes markup

Attributes are in HTML syntax, and can contain JavaScript expressions inside {…} brackets.

<img src={src}>
<img src="{src}">
<img src="https://{src}">
<img {src}> <!-- shorthand -->
<img {...props}> <!-- spread -->


State & events

Updating variables declared with let will trigger DOM updates.

let count = 0; // state
<button on:click={() => { count++ }}>
I was clicked {count} times

Computed state

Prefixing statements with $: will make it run with changes to the states it depends on.

let count;
// reactive state derived from `count`
$: doubled = count * 2;
6 collapsed lines
<button on:click={() => { count++ }}>
Count: {count}
<p>{count} * 2 = {doubled}</p>

Reactive statements

$: works with blocks too. Only values which directly appear within the $: block will become dependencies of the reactive statement.

// runs when the `title` prop changes
$: document.title = title;
// reactive block
$: {
console.log('title is', title);

Template syntax

If conditionals (#if)

{#if answer === 42}

Else-if and else (:else)

{#if answer === 42 && a !== b}
{:else if answer === 74 || b > c}

Loops (#each)

{#each items as item}
<li>{item.name} x {item.qty}</li>
<!-- With index: -->
{#each items as item, index}
<li>{i + 1}: {item.name} x {item.qty}</li>

Loops with keys

The key expression allows for efficient adding and removing of items.

{#each users as user (user.id)}
<UserCard {user} />

Text markup

Text expressions are automatically escaped unless @html is used.

<p>{@html string}</p>


Text inputs

bind:value forms a two-way binding to a state variable.

let name = '';
<input bind:value={name} />
<p>Hello {name || 'stranger'}!</p>


bind:checked binds the checked state of a checkbox to a state variable.

let subscribed = false;
<input bind:checked={subscribed} />
Subscribe to the newsletter
{#if subscribed}
<p>Thank you for subscribing!</p>

Radio buttons

bind:group binds a variable to a group of elements, such as a radio button group.

let flavor;
<input type='radio'
bind:group={flavor} value='vanilla'>
<input type='radio'
bind:group={flavor} value='mint'>

Special components

Head elements

<svelte:head> allows inserting elements into the document head.

<meta name="robots" content="noindex">

Body events

<svelte:body> allows binding DOM events to the body element.


Window props

svelte:window allows manipulating window properties.

  • innerWidth
  • innerHeight
  • outerWidth
  • outerHeight
  • scrollX (rw)
  • scrollY (rw)
  • online

Window events

<svelte:window> also allows binding DOM events to the window object.




Slots allow passing content to a component (“children”).

import Notice from './Notice.svelte'
There will be rain today.
<div class='notice'>

Named slots

Use named slots to pass more than 1 group of children elements.

<h1 slot='header'>Forecast:</h1>
There will be rain today.
<div slot='footer'>23°C, Rain</div>
<dialog class='my-dialog'>
<slot name='header'></slot>
<slot name='footer'></slot>

Fragments in named slots

<svelte:fragment slot="items">
<slot name="items"></slot>

Slot props

<slot prop={value}></slot>

Slot fallbacks

<slot prop={value}>
This is fallback content

Other features


import { onMount } from 'svelte';
let canvasEl;
onMount(() => {
<canvas bind:this={canvasEl}></canvas>

Docs: bind:this

Written by Rico Sta. Cruz

I am a web developer helping make the world a better place through JavaScript, Ruby, and UI design. I write articles like these often. If you'd like to stay in touch, subscribe to my list.


More articles

← More articles