5 August 2022

A quickdive into Svelte

I've been learning Svelte. Here are my notes as I learned it!

Rico Sta. Cruz @rstacruz

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.

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;

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

Thanks for reading! I'm Rico Sta Cruz, I write about web development and more. Subscribe to my newsletter!