Introduction to Svelte 5

What is Svelte?

Svelte is a radical new approach to building user interfaces. While traditional frameworks like React and Vue do much of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

Svelte is a compiler that turns declarative components into efficient, vanilla JavaScript at build time.

Instead of interpreting your application code at run time, your code is converted into small, framework-less vanilla JavaScript. This means no virtual DOM, no complex state management libraries, just efficient code that surgically updates the DOM when your state changes. The result is often faster apps with smaller bundle sizes.

Setting Up Your First Project

Getting started with a Svelte project is straightforward. You'll need to have Node.js installed on your machine. Once that's ready, you can create a new project using the official scaffolding tool, SvelteKit. Open your terminal and run the following command.

# create a new project in the my-first-svelte-app directory
npm create svelte@latest my-first-svelte-app

# navigate into the project folder
cd my-first-svelte-app

# install dependencies
npm install

# start the development server
npm run dev

This will walk you through a few setup questions and create a complete, running SvelteKit application. SvelteKit is the official framework built around Svelte, providing a full-featured development experience with routing, server-side rendering, and more, right out of the box.

Understanding Svelte Components

Svelte applications are built from components. A Svelte component is a reusable, self-contained block of code that combines its structure, styling, and behavior in a single .svelte file.

A Svelte component consists of

This structure keeps everything related to a piece of your UI in one place, making it easy to understand and manage.

<script>: This block contains the JavaScript that controls the component's logic and state.
HTML: This is the structure of your component. You can use standard HTML tags and even embed JavaScript expressions directly inside curly braces {}.
<style>: CSS written here is scoped by default, meaning it only affects the current component and won't leak out to style other parts of your application.

<script>
  let count = 0;

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

<h1>Simple Counter</h1>

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

<button on:click={increment}>
  Click me!
</button>

<style>
  p {
    color: rebeccapurple; /* This style only applies to the <p> in this file */
  }
</style>

In the example above, we define a count variable. Svelte's compiler automatically makes this variable reactive. When we call the increment function, Svelte knows that the value of count has changed and automatically updates the <p> tag in the DOM to reflect the new value. This is the core of Svelte's magic: it feels like writing plain JavaScript.

A New Reactivity Model

For years, Svelte's reactivity was triggered by assignments (=). While simple, this had some limitations. Svelte 5 introduces a new, more powerful and explicit way to handle reactive state called "runes."

Runes are special signals that tell the Svelte compiler exactly what parts of your application's state need to be tracked. This makes reactivity clearer and easier to reason about, especially in complex components. For simple state, you can use $state().

<script>
  // Use $state to declare a reactive variable
  let count = $state(0);

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

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

<button on:click={increment}>
  Click me!
</button>

As you can see, the change is minimal. You simply wrap your initial value with $state(). This small shift makes the reactive system more transparent without sacrificing the simplicity Svelte is known for. Don't worry, the older syntax still works, allowing for a gradual transition to the new model.

Svelte 5 Fundamentals