This page contains a table of contents of the official Svelte docs, providing both links to the corresponding sections, the tutorial lessons and a short summary. It might come in handy for Svelte learners to track their learning progress, mark already 'mastered' features and quickly discover yet unknown ones.

  • Click on the title to open a section
  •  links to its counterpart in the official docs
  •  will bring you to the tutorial lesson
  • Track your progress via the checkboxes

Enjoy (learning) Svelte 🖤️

COMPONENT FORMAT

Component

<script>

component prop export

assignments are 'reactive'

$: reactive statement

$ store prefix

<script context="module">

<style>

TEMPLATE SYNTAX

Attributes & Props

{#if ...}

{#each ...}

{#await ...}

{#key ...}

{@html ...}

{@debug ...}

{@const ...}

Element directives

on:eventname

bind:property

bind:group

bind:this

class:name

style:property

use:action

transition:fn

in:fn/out:fn

animate:fn

Component directives

on:eventname

--style-props

bind:property

bind:this

<slot>

<slot>

<slot name="name">

$$slots

<slot key={value}>

<svelte:self>

<svelte:component>

<svelte:element>

<svelte:window>

<svelte:body>

<svelte:head>

<svelte:options>

<svelte:fragment>

RUN TIME
svelte

onMount

before/afterUpdate

onDestroy

tick

context

createEventDispatcher

svelte/store

writable

readable

derived

get

Custom stores

svelte/motion

tweened

spring

svelte/transition

transitions

crossfade

svelte/animate

flip

svelte/easing

easing

svelte/register

register

Client-side component API

Creating a component

$set, $on, $destroy

Component props

Custom element API

Server-side component API

COMPILE TIME

Svelte compiler

ACCESSIBILITY WARNINGS

a11y

This site was built with SvelteKit. You can find the source code in this repository.