Svelte 5 Tutorial: Modern Reactivity and Beyond

1. Getting Started

1.1 Installation

To start with Svelte 5, run the following command in your terminal:

npm install svelte@next

1.2 Opting into Runes

To enable the new runes reactivity system, create or update your svelte.config.js file:

module.exports = {
  compilerOptions: {
    runes: true
  }
};

2. Runes Reactivity

2.1 State ($state)

The $state rune is used to create reactive state. It replaces the $: syntax for simple state management.

$state counter = 0;

function increment() {
  counter += 1;
}

2.2 Derived ($derived)

The $derived rune allows you to create derived state that depends on other state variables.

$state counter = 0;
$derived doubled = $state(() => counter * 2);

function increment() {
  counter += 1;
}

2.3 Effects ($effect)

The $effect rune is used to perform side effects when certain values change.

$state counter = 0;
$effect(() => {
  document.title = `Count: ${counter}`;
});

3. Universal Reactivity

3.1 App-wide Runes

With Svelte 5, you can expose runes app-wide by creating .svelte.js or .svelte.ts files. This eliminates the need for prop-drilling and ad-hoc stores.

// global-runes.svelte.js
$state user = null;
$derived isLoggedIn = $state(() => user !== null);

<!-- App.svelte -->
<script>
  import './global-runes.svelte.js';
</script>

{#if $isLoggedIn}
  <div>Welcome, {$user.name}</div>
{/if}

4. Snippets

4.1 Creating Reusable Components

Snippets allow you to create inline reusable chunks of code using the {@snippet} directive.

<!-- Button.svelte -->
 {@snippet Button --}
   <button class="btn">
     <slot></slot>
   </button>
 {/--}

 <!-- Usage -->
 {@render Button}Click me{/render}

5. Compiler Upgrades

5.1 Smaller Bundles and Better Performance

Svelte 5 compiles your components into plain JavaScript functions, resulting in smaller bundle sizes and zero runtime overhead.

5.2 No More Store Overhead

With runes, you no longer need to create separate stores for reactive state management. Everything is handled at the component level.

6. Native TypeScript Support

6.1 Writing TypeScript in Svelte

You can now write TypeScript directly in your Svelte components without any pre-processing.

<!-- Counter.svelte -->
<script lang="ts">
  let count = 0;

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

<button on:click={increment}>
  Count: {count}
</button>

7. Components as Functions

7.1 Functional Components

Svelte 5 allows you to define components as functions for better tree-shaking and inlining.

<!-- Button.svelte -->
<script lang="ts">
  export default function Button() {
    return <button class="btn"><slot></slot></button>;
  }
</script>

8. Conclusion

Svelte 5 introduces a new era of reactivity and component-first development. With runes, universal reactivity, snippets, and native TypeScript support, you can build faster, smaller, and more maintainable applications. Start exploring these features today!