What Svelte is

Svelte is a tool for building interfaces out of components, like React and Vue. The main difference: Svelte is a compiler. It turns your components into plain JavaScript while the project is built, so the browser does not need to download a large library that interprets components on the fly.

A compiler instead of a library

React and Vue work in the browser: their code receives a description of the page, compares it with the previous version and changes the DOM. Svelte does most of the work ahead of time. It reads a component file and writes code that knows exactly which element to update when a particular variable changes.

	React	Vue	Svelte
Where the main logic runs	in the browser	in the browser	at build time
Component format	function with JSX	`.vue` file	`.svelte` file
Changing data	`useState`	`ref`	`$state`

For you this means less code in the browser and less boilerplate in components.

What a component looks like

A Svelte component is a file with the .svelte extension. It holds plain HTML, a <script> block with logic and, if needed, a <style> block:

<!-- src/lib/components/Greeting.svelte -->
<script>
  let name = 'Anna';
</script>
 
<h1>Hello, {name}!</h1>

The page shows the heading "Hello, Anna!". A value in curly braces is inserted into the markup.

Runes

Runes are special words starting with $ that tell the compiler how to treat a variable. For example, $state makes a variable reactive: when it changes, the page updates by itself.

<script>
  let count = $state(0);
</script>
 
<button onclick={() => count++}>Clicked: {count}</button>

Each click increases the number on the button. Runes are not imported — the compiler understands them.

Versions

This course is written for Svelte 5, the version that introduced runes. Older articles use Svelte 4 syntax (export let, $:, on:click) — it is outdated, do not mix it with the new one.

For routes, data loading and server code we use SvelteKit 2, the official framework built on top of Svelte. It is also what npx sv create creates by default, so the whole course happens in one SvelteKit project.

What we will build

First, a to-do list: adding tasks, marking them done, filters. It covers components and reactivity. Then a small blog in SvelteKit: a list of posts, a post page, a form to add a post and an API.

You already know JavaScript: modules, functions, arrays, promises. The course builds on that and does not repeat it.

Common mistake

Copying examples written for Svelte 4. If a component contains export let title or $: total = ..., it is the old syntax. In Svelte 5 you write let { title } = $props() and let total = $derived(...).

Thanks for reading!