Svelte 5 Quickstart

This tutorial assumes you’re already familiar with HTML, CSS, and JS. It also assumes you know what a JS framework is for.

Online Setup

If you prefer to work online, you can open the Svelte training ground repo on Stackblitz and start coding right away in your browser. You don’t have to run any of the npm commands if you use Stackblitz.

Local Setup

If you prefer to work locally, you can follow these steps (you will need Node and npm installed).

First, visit the Svelte 5 training ground repo. Press the green Code button and click Download ZIP. Unzip the file and then open it in your editor. Then, run this command in the terminal to install the packages listed in package.json.

npm install

Then run this command to start the dev server.

npm run dev

You should see something like this in your terminal.

  VITE v6.3.5  ready in 312 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Visit localhost:5173 in your browser. The web page should say Hello World.

In your editor, you’ll see several files. However, for now you’ll mainly be working in HelloWorld.svelte.

HTML

Hello World

The simplest Svelte component you can have is an empty file.

In our file, we have an <h1> element already added.

1
<h1>Hello World</h1>

Task: To make it more personal, change World to your name.

1
<h1>Hello John</h1>

After saving, you should see the browser show your name.

Multiple roots

Unlike some other JS frameworks, you can have more than one root element.

Task: Add a <p> element after the <h1> element with some placeholder text.

1
<h1>Hello John</h1>
2
<p>Lorem ipsum dolor...</p>

After saving, you should now see both elements in the browser.

App.svelte

Before we look at our next topic, open up App.svelte so you can see how it’s importing HelloWorld.svelte. All you have to do is add an import statement inside the <script> element and then use the component as a tag in the HTML.

1
<script>
2
  import HelloWorld from './lib/HelloWorld.svelte'
3
</script>
4

5
<HelloWorld />

CSS

style attribute

You can add a style attribute to an element just like in normal HTML.

Task: Add style="color: red;" to the h1 element.

1
<h1 style="color: red;">Hello World</h1>
2
<p>Lorem ipsum dolor...</p>

After saving, you should see the <h1> element turn red in the browser.

There is another syntax called the style: directive. You type style, then a colon, then the property name, then an equals sign, and finally the value in quotes. This is useful if you have a lot of inline styles.

1
<h1 style:color = "red">Hello World</h1>
2
<p>Lorem ipsum dolor...</p>

References

style element

You can also add a <style> element to style a component. The styles are limited to just the component by default.

Task: Delete the style attribute. Then add the <style> element with the following rule.

1
<h1>Hello World</h1>
2
<p>Lorem ipsum dolor...</p>
3

4
<style>
5
  h1 {
6
    color: red;
7
  }
8
</style>

References

class attribute

You can use a class attribute just like in normal HTML.

Task: Add a class attribute with the value of heading. Change the h1 selector to .red.

1
<h1 class="red">Hello World</h1>
2
  <p>Lorem ipsum dolor...</p>
3

4
<style>
5
  .red {
6
    color: red;
7
  }
8
</style>

After saving, you should see that the <h1> element is still red.

References

JS

Add a variable

For this section, create a new file called Counter.svelte. Add the following code to it.

1
<button>Count: 0</button>

Next, make sure to import it into App.svelte.

1
<script>
2
  import HelloWorld from './lib/HelloWorld.svelte';
3
  import Counter from './lib/Counter.svelte';
4
</script>
5

6
<Counter />

After saving you should see the button appear on screen. It doesn’t do anything yet if you click on it.

Add a <script> element above the <button> element.

1
<script>
2

3
</script>
4

5
<button>Count: 0</button>

Make it reactive

Svelte 5 uses runes to make things reactive.

Create a count variable and use the $state() rune to initialize it. Also, replace 0 with { count } in the <button> element. (To display a variable in Svelte, you wrap it in curly braces {}.)

1
<script>
2
  let count = $state(0);
3
</script>
4

5
<button>Count: { count }</button>

After saving, the button should still look the same. It still doesn’t do anything yet.

Next, add onclick={ count++ } to the <button> tag.

1
<script>
2
  let count = $state(0);
3
</script>
4

5
<button onclick={ count++ }>Count: { count }</button>

After saving, the number on the button will go up when you click on it.

The $state() rune makes count reactive, which means it will automatically update the UI when its value changes.

References

Use a function

Create a function called increment(). Then replace count++ with increment.

1
<script>
2
  let count = $state(0);
3

4
  function increment() {
5
    count++;
6
  }
7
</script>
8

9
<button onclick={increment}>Count: { count }</button>

After saving, the number on the button should still go up when you click on it.

Conditional

Let’s add a message that will display when you reach a certain count.

Task: Add an <h1> element using an if block. The <h1> will show when the count is greater than 10.

1
<script>
2
  let count = $state(0);
3

4
  function increment() {
5
    count++;
6
  }
7
</script>
8

9
{#if count > 10}
10
  <h1>Good job!</h1>
11
{/if}
12
<button onclick={increment}>Count: { count }</button>

Now add an <h1> element with an else block. This <h1> will show when the count is 10 or less.

1
<script>
2
  let count = $state(0);
3

4
  function increment() {
5
    count++;
6
  }
7
</script>
8

9
{#if count > 10}
10
  <h1>Good job!</h1>
11
{:else}
12
  <h1>Let's get started</h1>
13
{/if}
14
<button onclick={increment}>Count: { count }</button>

Now add an <h1> with an else if block in the middle. This message will be displayed when count is greater than 5 but less than 11.

1
<script>
2
  let count = $state(0);
3

4
  function increment() {
5
    count++;
6
  }
7
</script>
8

9
{#if count > 10}
10
  <h1>Good job!</h1>
11
{:else if count > 5}
12
  <h1>Not bad</h1>
13
{:else}
14
  <h1>Let's get started</h1>
15
{/if}
16
<button onclick={increment}>Count: { count }</button>

References

Binding

Let’s learn about binding. Binding is the technique that is used to keep the value of an input in sync with a reactive variable.

Let’s reset the Hello World component back to this.

1
<h1>Hello World</h1>

Then, add the following code.

1
<script>
2
  let name = $state('');
3
</script>
4

5
<input bind:value={name} />
6

7
<h1>Hello {name}</h1>

The part that says bind:value={name} is how you bind the input to the name variable, which is reactive.

Now the heading will update whenever you type in the input.

References

List

Let’s create a new file called TodoList.svelte. Add the following code to it. This is the data we’re going to display.

Use an each block to loop through the todos array and display each todo item in a list. The part that says (todo.id) is a key that helps Svelte keep track of each item in the list.

1
<script>
2
  let id = 0;
3

4
  let todos = $state([
5
    { id: id++, text: 'Learn HTML' },
6
    { id: id++, text: 'Learn JavaScript' },
7
    { id: id++, text: 'Learn Svelte' }
8
  ]);
9
</script>
10

11
<ul>
12
  {#each todos as todo (todo.id)}
13
    <li>{todo.text}</li>
14
  {/each}
15
</ul>

Next, make sure to import it into App.svelte.

1
<script>
2
  import HelloWorld from './lib/HelloWorld.svelte';
3
  import Counter from './lib/Counter.svelte';
4
  import TodoList from './lib/TodoList.svelte';
5
</script>
6

7
<TodoList />

You should now see a list in your browser.

References

Add items

To add items to the list, first create the newTodo variable in the <script> element. Then create the addTodo() function. Lastly, add the <input> and <button> elements to the HTML.

1
<script>
2
  let id = 0;
3

4
  let newTodo = $state('');
5
  let todos = $state([
6
    { id: id++, text: 'Learn HTML' },
7
    { id: id++, text: 'Learn JavaScript' },
8
    { id: id++, text: 'Learn Svelte' }
9
  ]);
10

11
  function addTodo() {
12
    todos.push({ id: id++, text: newTodo });
13
    newTodo = '';
14
  }
15
</script>
16

17
<input bind:value={newTodo} />
18
<button onclick={addTodo}>Add Todo</button>
19
<ul>
20
  {#each todos as todo (todo.id)}
21
    <li>{todo.text}</li>
22
  {/each}
23
</ul>

You should now be able to add items to the list by typing in the input and clicking the button. The new items will appear at the end of the list.

Remove items

To remove elements from the list, first add the removeTodo() function. Then add a <button> to each list item that calls the function with the todo’s id.


15 collapsed lines
1
<script>
2
  let id = 0;
3

4
  let newTodo = $state('');
5
  let todos = $state([
6
    { id: id++, text: 'Learn HTML' },
7
    { id: id++, text: 'Learn JavaScript' },
8
    { id: id++, text: 'Learn Svelte' }
9
  ]);
10

11
  function addTodo() {
12
    todos.push({ id: id++, text: newTodo });
13
    newTodo = '';
14
  }
15

16
  function removeTodo(todoId) {
17
    const idx = todos.findIndex(todo => todo.id === todoId);
18
    if (idx !== -1) {
19
      todos.splice(idx, 1);
20
    }
21
  }
22
</script>
23

24
<input bind:value={newTodo} />
25
<button onclick={addTodo}>Add Todo</button>
26
<ul>
27
  {#each todos as todo (todo.id)}
28
    <li>
29
      {todo.text}
30
      <button onclick={() => removeTodo(todo.id)}>X</button>
31
    </li>
32
  {/each}
33
</ul>

You should now be able to delete items from the list now by clicking the “X” button next to each item.

Derived state

Let’s learn how to hide completed items. To do this, you need to use the $derived() rune. The $derived() rune allows you to create a variable that automatically updates when other variables update.

Add a done property to each todo item.
Add a hideCompleted variable that will be used to toggle the visibility of completed todos.
Add a checkbox input to each todo item to mark it as done.
Add a checkbox input to toggle the hideCompleted state.
Add a visibleTodos variable that filters the todos based on the hideCompleted state.
Don’t forget to change todos to visibleTodos inside the each block.

1
<script>
2
  let id = 0;
3

4
  let newTodo = $state('');
5
  let todos = $state([
6
    { id: id++, text: 'Learn HTML', done: false },
7
    { id: id++, text: 'Learn JavaScript', done: false },
8
    { id: id++, text: 'Learn Svelte', done: false }
9
  ]);
10

11
  let hideCompleted = $state(false);
13 collapsed lines
12

13
  function addTodo() {
14
      todos.push({ id: id++, text: newTodo, done: false });
15
      newTodo = '';
16
  }
17

18
  function removeTodo(todoId) {
19
    const idx = todos.findIndex(todo => todo.id === todoId);
20
    if (idx !== -1) {
21
      todos.splice(idx, 1);
22
    }
23
  }
24

25
  let visibleTodos = $derived(
26
    hideCompleted
27
      ? todos.filter(todo => !todo.done)
28
      : todos
29
  );
30
</script>
31

32
<input bind:value={newTodo} />
33
<button onclick={addTodo}>Add Todo</button>
34
<label>
35
  <input type="checkbox" bind:checked={hideCompleted} />
36
  Hide completed
37
</label>
38

39
<ul>
40
  {#each visibleTodos as todo (todo.id)}
41
    <li>
42
      <input type="checkbox" bind:checked={todo.done} />
43
      <span>{todo.text}</span>
44
      <button onclick={() => removeTodo(todo.id)}>X</button>
45
    </li>
46
  {/each}
47
</ul>

Notice that visibleTodos uses the $derived() rune. This means that it will automatically update whenever todos or hideCompleted changes.

References

Props

Let’s learn how to make components more flexible using props. Props allow you to pass data from a parent component into a child component. Let’s revisit the HelloWorld.svelte component and make it accept a name prop. This way, we can pass different names to it. To do this, we need to use the $props() rune.

1
<script>
2
  let { name } = $props();
3
</script>
4

5
<h1>Hello { name }</h1>

Inside App.svelte, you can now pass a name prop to the HelloWorld component.

1
<script>
2
  import HelloWorld from './lib/HelloWorld.svelte';
3
  import Counter from './lib/Counter.svelte';
4
  import TodoList from './lib/TodoList.svelte';
5
</script>
6

7
<HelloWorld name="John" />

The browser should now display the name you passed in.

References

CSS + JS

Let’s learn how to toggle a class in Svelte. First, reset the Hello World component back to this:

1
<h1 class="red">Hello World</h1>
2

3
<style>
4
  .red {
5
    color: red;
6
  }
7
</style>

Create a <script> element and an isActive variable inside it. Then, use the $state() rune to initialize it to false. Add a ternary statement to the class attribute. Then add a <button> element with an onclick attribute.

1
<script>
2
  let isActive = $state(false);
3
</script>
4

5
<h1 class="{isActive ? 'red' : ''}">Hello World</h1>
6
<button
7
  onclick={() => isActive = !isActive}
8
>
9
Toggle
10
</button>
11

12
<style>
13
  .red {
14
    color: red;
15
  }
16
</style>

The text should now change colors when you click the button.

AI & Prompting

Svelte 5 was released in October 2024, so most LLMs do not know how to generate Svelte code with runes in it yet. One thing you can do to fix this is to download the llms-full.txt file for Svelte 5 and give it to the LLM you’re using. This file contains all of the Svelte 5 documentation. Tip: you should name the file svelte-5-docs.md so that the LLM can recognize it as Svelte 5 documentation.

As an example, we created a custom Svelte 5 GPT that you can try. It already has the llms-full.txt file loaded into it.

Here are the instructions we used to create it:

1
Answer questions about Svelte 5 and generate code using the attached svelte-5-docs.md file.