Svelte 5 Quickstart (Coming Soon)

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

Setup

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.

Stackblitz

If you prefer to work online, you can also 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.

HTML

Hello World

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

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

HelloWorld.svelte

<h1>Hello World</h1>

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

HelloWorld.svelte

<h1>Hello John</h1>

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

Multiple roots

You can have more than one element.

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

HelloWorld.svelte

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

App.svelte

Before we look at our next topic, open up App.svelte so you can see how it’s importing HelloWorld.svelte.

App.svelte

<script>
  import HelloWorld from './lib/HelloWorld.svelte'
</script>

<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.

HelloWorld.svelte

<h1 style="color: red;">Hello World</h1>
<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.

HelloWorld.svelte

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

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.

HelloWorld.svelte

<h1>Hello World</h1>
<p>Lorem ipsum dolor...</p>

<style>
  h1 {
    color: red;
  }
</style>

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 .heading.

HelloWorld.svelte

<h1 class="heading">Hello World</h1>

<style>
  .heading {
    color: red;
  }
</style>

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

JS

Add a variable

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

Counter.svelte

<button>Count: 0</button>

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

App.svelte

<script>
  import Counter from './lib/Counter.svelte';
</script>

<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.

Counter.svelte

<script>

</script>

<button>Count: 0</button>

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

Counter.svelte

<script>
  let count = $state(0);
</script>

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

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

Make it reactive

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

Counter.svelte

<script>
  let count = $state(0);
</script>

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

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

Use a function

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

Counter.svelte

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

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

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

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

Conditional

.svelte

List

.svelte

Add items

.svelte

Remove items

.svelte

Derived state

.svelte

Props

.svelte

CSS + JS

.svelte