Creating your first Svelte5 reactive component

Welcome to the exciting era of Svelte 5!

After an intensive development period, Svelte 5 has officially launched, marking a significant milestone for the Svelte community. This latest stable release introduces a host of cutting-edge features and enhancements that developers can confidently use in production environments.

With the release of Svelte 5, the installer and other critical components have been fully refined and are now available, providing a streamlined setup process. This release signals a new chapter for Svelte, as developers can now take full advantage of its powerful, stable features to build performant and reactive web applications.

With this article, I'll guide you through the process of installing Svelte 5 on your local development environment and explore its powerful new features, including the revamped and more potent reactivity mechanism.

Install the Svelte 5 skeleton project

To set up a Svelte 5 project with SvelteKit, we’ll use the new sv Command Line Interface (CLI). With npx sv create (or bunx sv create), you can initialize a SvelteKit project with Svelte 5 fully integrated.

In previous versions, creating a Svelte project required the create svelte@latest command. However, with this release, Svelte 5 introduces sv, a CLI designed to simplify and streamline the setup process, allowing developers to explore Svelte 5's new capabilities effortlessly.

bunx sv create myapp-svelte5-sveltekit
cd myapp-svelte5-sveltekit
bun install

If you prefer using npx instead of bunx, you can use the npx sv create command.

During the execution of bunx sv create, the command will ask you some questions. For now, you can answer in this way:

◇  Which template would you like?
│  SvelteKit minimal
│
◇  Add type checking with Typescript?
│  Yes, using Typescript syntax
│
◇  What would you like to add to your project?
│  prettier
│
◇  Which package manager do you want to install dependencies with?
│  bun

The sv create command will create a new directory with a minimal SvelteKit application and install the needed dependencies.

cd myapp-svelte5-sveltekit
bun run dev -- --open

If you run the command bun pm ls (or npm list if you prefer to use npm), you can check the dependencies versions (at the moment, it is svelte@5.1.2):

bun pm ls
/Users/roberto/test/myapp-svelte5-sveltekit node_modules (138)
├── @sveltejs/adapter-auto@3.3.0
├── @sveltejs/kit@2.7.2
├── @sveltejs/vite-plugin-svelte@4.0.0
├── prettier@3.3.3
├── prettier-plugin-svelte@3.2.7
├── svelte@5.1.2
├── svelte-check@4.0.5
├── typescript@5.6.3
└── vite@5.4.10 

Now, if you run bun run dev, you can start using your new fresh Svelte 5 application, typically exposed by default at http://localhost:5173/ .

bun run dev -- --open

Now, we are going to create a new component with some reactivity.

Roll the dice web application

I want to create a simple “Roll the Dice” web application.

The user can click a button to generate a random number (from 1 to 6) and update the text showing the result and the list of the previous rolls.
This example is elementary but helpful in walking through the basic stuff of Svelte 5, understanding the main differences with Svelte4, and looking at the new Svelte5 reactivity mechanism via runes.

So now let’s jump on the code 🚀.

Creating the component

I will create the roller.svelte component in the file src/lib/components/roller.svelte.

If you are on macOS or Linux in your terminal, in the project directory you can first create the components directory and then the needed file:

mkdir -p src/lib/components
touch src/lib/components/roller.svelte

The component will contain two classical parts: the first one about the logic (the script section), and then the second one about the template (the HTML part).

The script section:

<script lang="ts">
let dice: number = $state(0);
let rolls: number[] = $state([]);
let average: number = $derived(rolls.reduce((t, n) => t + n, 0) / rolls.length);

function draw() {
    dice = Math.floor(Math.random() * Math.floor(5)) + 1;
    rolls.push(dice);
}
function reset() {
    dice = 0;
    rolls = [];
}
</script>

I defined two reactive variables via the $state() function.
Then, I implemented two functions, draw() and reset(), that act directly on the new variables dice and rolls.
So here I have 2 states and 1 derived function.
The two states are the random number generated and the rolls array to keep track of all the generated numbers.
The size of the rolls array indicates how many rolls we did.
Then, we have the average mathematical function, which is recalculated every time something changes in the array of rolls.
To make it reactive the average function we should set as $derived.
In the template part of the svelte component, you can use the variables and call the functions:

<section style="padding-top: 50px;">
  <button onclick={draw}> Let's draw </button>
  <button onclick={reset}> Let's restart </button>
</section>
<section>
  <h2 style="text-align: center">
    {dice == 0 ? "Let's start rolling" : 'Yes, another roll'}
  </h2>

  <section class="stats grid">
    <!-- Last number stat -->
    <div class="stats">
      <p class="label">Last number</p>
      <p class="count"><strong>{dice}</strong></p>
    </div>

    <!-- How many rolls stat -->
    <div class="stats">
      <p class="label">How many rolls</p>
      <p class="count"><strong>{rolls.length}</strong></p>
    </div>

    <!-- Average stat -->
    <div class="stats">
      <p class="label">Average</p>
      <p class="count"><strong>{average}</strong></p>
    </div>
  </section>

  {#each rolls as t, index}
    <p style="text-align: center">
      Rolling number {index + 1}, the dice says {t}
    </p>
  {/each}
</section>

The first button calls the draw() function on the click event.
The second button calls the reset() function on the click event.
In the template, I'm using the 2 "state" variables, dice and rolls in the typical Svelte way (with #each directive for looping the rolls array).

Managing state in Svelte 5 via $state declaration

In Svelte 5, the $state() function simplifies managing state. To make a variable reactive, you simply declare it using the $state() function. This function enables the variable to automatically respond to changes, updating the UI without any extra setup.

In the example, I defined two "reactive" variables, the dice number and the rolls array.

let dice: number = $state(0);
let rolls: number[] = $state([]);

Using the $derived function for reactive calculations in Svelte 5

In Svelte 5, the $derived function is perfect for creating reactive values that depend on other reactive state variables. For instance, if you want to calculate the average of values in the rolls array, you can define average as a $derived variable. This way, average will automatically re-calculate every time the roll changes, ensuring it stays in sync with the latest data.
To enhance execution performance, the derived function only recalculates when the underlying state (in this case, rolls) changes, rather than every time average is accessed. This optimization ensures efficient updates without unnecessary recalculations, improving responsiveness in Svelte 5 applications.

let average: number = $derived(rolls.reduce((t, n) => t + n, 0) / rolls.length);

Using the new component

In the src/routes/+page.svelte file, I can use the new Svelte component:

<script>
    import Roller from "$lib/components/roller.svelte";
</script>

<main class="container">
    <Roller />
</main>

Providing the style

For this quick example, I used the PicoCSS library, so in the src/app.html, you need to include it in your head section:

<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.indigo.min.css"
/>

Are you playing with the new Svelte 5?

I wrote this small article riding the excitement for the new announcement by Rich Harris on November 11th 2023 about Svelte 5 beta and then I've updated it with the official release of Svelte 5 (on October 2024): https://svelte.dev/blog/svelte-5-is-alive

Please share your thoughts in the comments section below if you have any feedback. I appreciate your input and value the community's insights. I am committed to keeping this article up-to-date with the latest developments in Svelte 5, so your contributions will be significant in ensuring it's accurate and relevant. Thank you for being part of this journey, and I look forward to exploring the exciting advancements that Svelte 5 has to offer together. Stay tuned for future updates!