Basics

This works when var names and attribute names are the same

<img src={src}>
<img {src}

Styles are scoped to the component

Strings that contain html:

<script>
    let string = `this string contains some <strong>HTML!!!</strong>`;
</script>

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

<button on:click={increment}>
    Clicked {count}
    {count === 1 ? 'time' : 'times'}
</button>

<script>
function increment() {
    count += 1;
}
</script>

Rendering Strings as HTML

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

Reactive Values

let count = 0;
// every time count changes, doubled recomputes
$: doubled = count * 2;

// it can also be functions, or in front of if statements
// This gets logged every time the value changes
$: console.log(`the count is ${count}`);

// or
$: {
  console.log(`the count is ${count}`);
  console.log(`this will also be logged whenever count changes`);
}

Reactivity is triggered by assignment. So methods like `numbers.push()` don't cause updates. But this does:

numbes = [...numbers, newNumber]

Logic

{#if count > 10}
    <p>{count} is greater than 10</p>
{:else if count < 5}
    <p>{count} is less than 5</p>
{:else}
    <p>{count} is between 0 and 10</p>
{/if}

{#each colors as color, i}
    <button
        aria-current={selected === color}
        aria-label={color}
        style="background: {color}"
        on:click={() => selected = color}
    >{i + 1}</button>
{/each}

Specifying a key for the iteration. Update when thing.id changes

{#each things as thing (thing.id)}
    <Thing name={thing.name}/>
{/each}

Async

{#await promise then number}
    <p>The number is {number}</p>
{/await}

Props

Pass data into a component or to the children of a component

Nested.svelte
<script>
  export let answer = 'default'
</script>

<script>
    import Nested from './Nested.svelte';
</script>

<Nested answer={42} />
<Nested /> defaults to 'default'

Passing values into props:

PackageInfo.svelte
<script>
  export let name;
   export let version;
   export let speed;
   export let website;
</script>

<script>
   import PackageInfo from './PackageInfo.svelte';

   const pkg = {
     name: 'svelte',
     speed: 'blazing',
     version: 4,
     website: 'https://svelte.dev'
   };
</script>

<PackageInfo {...pkg} />

Basically use props for repeated frontend components that optionally have variable inputs

Handling Events

<!-- modifier - only run it once -->
<div on:pointermove|once={handleMove}>

<div
on:pointermove={(e) => {
    m = { x: e.clientX, y: e.clientY };
}}
>

<script>
    import { getRandomNumber } from './utils.js';

    let promise = getRandomNumber();

    function handleClick() {
        promise = getRandomNumber();
    }
</script>

{#await promise}
    <p>...waiting</p>
{:then number}
    <p>The number is {number}</p>
{:catch error}
    <p style="color: red">{error.message}</p>
{/await}

Event forwarding

The intermediate components (deeply nested components) must forward the event to the outer components

Components

<script>
  import Nested from './Nested.svelte'
</script>

<Nested />

Svelte