TodayTools

Svelte flashcards

A compiler-first framework with runes for small, fast pages, plus SvelteKit for full sites.

Donate
Beginner friendly, starts from zero
Section
How to study
0
SvelteStart from zero · 1 of 11

What is Svelte, in one plain sentence?

Svelte is a free tool for building web pages that change as you use them, like a live shopping cart, where you write less code and the result is small and fast.

Svelte writes the busy code for you at build time.
Show again
11 left
Got it

Tap to turn over. Swipe right if you know it, left to see it again.

All topics

What you will learn

  1. Start from zero

    • What Svelte and SvelteKit are5 cards
    • First words and setup6 cards

  2. Core basics

    • Runes for state5 cards
    • Props, callbacks and bindings4 cards
    • Template blocks3 cards
    • Snippets and composition2 cards
    • Styles and motion3 cards

  3. Next steps

    • Routing and loading data5 cards
    • Forms and server code4 cards
    • Auth and secrets3 cards
    • Shared state and reuse3 cards
    • Testing and deployment2 cards

  4. Go deeper

    • Reactivity internals5 cards
    • Rendering and data performance5 cards
    • Security3 cards
    • Modern patterns and upgrades4 cards

Final test and certificate

10 questions drawn fresh from the whole topic, about 15 minutes. Sign in, score 80% or more and get a free certificate with your name and a public check link anyone can open, such as an employer or a teacher. Not signed in? Try a practice test from the cards.

Take the final test

About these cards

  • Reviewed 26 October 2026
  • CoversSvelte 5SvelteKit 2Vite
How these cards are made

Svelte at a glance

Svelte is a framework that turns your components into small, fast JavaScript before the site goes live; SvelteKit builds full sites with it.

Other frameworks pack the whole toolbox into the browser; Svelte ships only the finished furniture.

Words you will meet

Component
A reusable piece of a page kept in one .svelte file
State
Data a component remembers that can change
Rune
A special $ word like $state that the compiler understands
Props
Values a parent gives a child component
Compiler
The tool that turns your components into plain JavaScript before launch
SvelteKit
The framework that builds whole websites from Svelte components

The steps

  1. 1. Start from zero (11 cards): What Svelte and SvelteKit are, why a compiler helps, and the words you need for your first component.
  2. 2. Core basics (17 cards): Runes, props, callbacks, bindings, each and if blocks, snippets, effects, scoped styles, transitions and shared state.
  3. 3. Next steps (17 cards): SvelteKit routing, load functions, form actions, remote functions, endpoints, hooks, env, context, tests and adapters.
  4. 4. Go deeper (17 cards): Fine-grained reactivity, raw and snapshot state, page options, streaming, CSRF, CSP, async mode and migration.
All 11 cards in Start from zero
What is Svelte, in one plain sentence?
Svelte is a free tool for building web pages that change as you use them, like a live shopping cart, where you write less code and the result is small and fast.
What makes Svelte different from many other frameworks?
Svelte is a compiler: before your site goes live, it turns your components into plain, small JavaScript. Many other frameworks ship a big library to the browser and do that work while the page runs.
What is SvelteKit, and how is it related to Svelte?
Svelte builds the pieces of a page. SvelteKit builds the whole website around them: page addresses, loading data from servers, forms and making the site ready to put online.
Where do you meet Svelte-style pages in daily life?
News sites with interactive charts and maps, online stores, booking widgets and small business sites that must load fast on a phone.
Give an everyday picture of how Svelte updates the screen.
Think of a price tag connected to a till. When the price in the till changes, only that one tag changes. Svelte works out ahead of time which spots on the page each value touches.
Key word: what is a component?
A component is a reusable piece of a page, like a button or a product card, kept in one .svelte file with its script, HTML and styles.
Key word: what is state?
State is data a component remembers that can change, like a counter or what is typed in a box. In Svelte 5 you mark it with $state, and the page updates when it changes.
Key words: what are props and events?
Props are values a parent gives to a child component, like the product name. Events are things that happen, like a click; you react to them with handlers such as onclick.
Key word: what is a rune?
A rune is a special word starting with $, like $state or $props, that tells the Svelte compiler to give a value superpowers, such as updating the page when it changes.
What do you need before learning Svelte?
Basic HTML, CSS and JavaScript, and Node.js installed. The sv command makes a ready SvelteKit project.
What will you be able to do after this topic?
Build components with runes, handle lists and forms, make a full SvelteKit site with pages, server data and form actions, deploy it, and keep it fast and safe.
Svelte cheatsheet

Runes

  • let x = $state(0) Reactive state
  • let y = $derived(x * 2) Derived value
  • $derived.by(() => ...) Multi-line derived
  • $effect(() => ...) Side effect
  • let { a, b = 1 } = $props() Props
  • $bindable() Allow bind: on a prop
  • $state.raw / $state.snapshot No proxy / plain copy

Markup

  • {value} Show escaped text
  • onclick={fn} Event handler
  • bind:value={x} Two-way bind
  • {#if} {:else} {/if} Condition
  • {#each list as x (x.id)} Keyed loop
  • {#await p} {:then v} {/await} Promise states
  • {#snippet s()} / {@render s()} Reusable markup

SvelteKit files

  • +page.svelte Page component
  • +page.server.ts Server load and actions
  • +layout.svelte Wraps child pages
  • +server.ts API endpoint
  • +error.svelte Error page
  • hooks.server.ts Runs on every request

SvelteKit modules

  • $app/state Current page and URL
  • $app/navigation goto, invalidate
  • $app/forms enhance
  • $env/static/private Server secrets
  • @sveltejs/kit error, redirect, fail, json

CLI

  • npx sv create app New project
  • npm run dev Dev server
  • npm run build Production build
  • npx sv check Type and a11y check
  • npx sv add tailwindcss Add an integration
Donate