Svelte 5: A Comprehensive Tutorial (with examples)

Svelte 5, also known as the "Runes" release, brings a significant paradigm shift to Svelte development. It introduces a new way to manage state and reactivity, based on runes, which are special symbols that attach behaviors to variables. This tutorial covers the core concepts and practical applications of Svelte 5.

Why Runes?

Runes provide:

• Explicit reactivity: You explicitly mark variables that should be reactive, making code easier to understand and debug.


• Fine-grained control: You have more control over when and how updates happen.


• Improved performance: Svelte can optimize reactivity more effectively with explicit signals.


• Better tooling: The explicit nature of runes enables better IDE support and linting.

• Basic understanding of HTML, CSS, and JavaScript.


• Node.js and npm (or a similar package manager) installed.

• Create a Svelte project:

npm create svelte@latest my-svelte-app
    cd my-svelte-app
    npm install
    npm run dev

Choose the "skeleton project" option.

• Update Svelte and Vite:

npm install svelte@next vite@next

• Configure svelte.config.js:

import adapter from '@sveltejs/adapter-auto';
    import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
    /** @type {import('@sveltejs/kit').Config} */
    const config = {
        kit: {
            adapter: adapter(),
            // Override http methods in the Todo list example
            methodOverride: {
                allowed: ['PATCH', 'DELETE']
            }
        },
        preprocess: [vitePreprocess()],
        compilerOptions: {
            runes: true
        }
    };
    export default config;

Core Concepts: Runes

Svelte 5 introduces several runes. Here are the key ones:

• $ (Dollar Sign): This is the most fundamental rune. It's used to create reactive variables. When the value of a reactive variable changes, Svelte automatically updates the parts of the component that depend on it.


• $derived: Creates derived signals. Derived signals are automatically updated when their dependencies (other signals) change. Think of them as computed properties.


• $effect: Runs a function whenever its dependencies change. Useful for side effects like logging, DOM manipulation, or fetching data.


• $state: (Less frequently used directly in components, mainly for libraries) Declares a variable as stateful, allowing it to be passed to components using bind: or let:.


• $const: Declares a variable whose value should not be changed after initialization. (Note: While it prevents reassignment, the underlying value could still change if it's an object or array.)


• $inspect: A debugging tool. Prints the current value of a signal to the console whenever it changes.

Let's create a simple counter component using runes:

src/routes/+page.svelte:

<script>
  import { $state } from '@sveltejs/svelte';
  let count = $state(0);
  function increment() {
    count.set(count.get() + 1);
  }
  function decrement() {
    count.set(count.get() - 1);
  }
</script>
<h1>Counter: {count.get()}</h1>
<button on:click={increment}>Increment</button>
<button on:click={decrement}>Decrement</button>

Explanation:

• import { $state } from '@sveltejs/svelte';: Imports the $state rune. This rune is provided by the Svelte runtime library.


• let count = $state(0);: Declares a reactive variable named count initialized to 0. $state takes the initial value as an argument. Critically, count is now an object with get() and set() methods.



• Counter: {count.get()}

  : Displays the current value of count. Because count is a state variable we access it using its get method


• count.set(count.get() + 1);: Increments the value of count by 1. The .set() method triggers reactivity. Svelte knows to update the component because count is a reactive variable.

<script>
  import { $state, $derived } from '@sveltejs/svelte';
  let count = $state(0);
  let doubled = $derived(count.get() * 2);
  function increment() {
    count.set(count.get() + 1);
  }
</script>
<h1>Counter: {count.get()}</h1>
<h2>Doubled: {doubled.get()}</h2>
<button on:click={increment}>Increment</button>

Explanation:

• **let doubled = $derived(count.get() * 2);**: Creates a derived signal called doubled. Its value is calculated as count * 2. Whenever count changes, doubled is automatically updated.

<script>
  import { $state, $effect } from '@sveltejs/svelte';
  let count = $state(0);
  $effect(() => {
    console.log("Count changed to:", count.get());
    document.title = `Count: ${count.get()}`; // Example DOM manipulation
  });
  function increment() {
    count.set(count.get() + 1);
  }
</script>
<h1>Counter: {count.get()}</h1>
<button on:click={increment}>Increment</button>

Explanation:

• $effect(() => { ... });: Creates an effect. The function inside $effect will run whenever count changes. In this example, it logs the new value of count to the console and updates the page title.

<!-- Parent Component (Parent.svelte) -->
<script>
    import Child from './Child.svelte';
    import { $state } from '@sveltejs/svelte';
    let message = $state("Hello from Parent!");
    let counter = $state(0);
    function incrementParent() {
      counter.set(counter.get() + 1);
    }
</script>
<h1>Parent Component</h1>
<p>Message: {message.get()}</p>
<p>Parent Counter: {counter.get()}</p>
<button on:click={incrementParent}>Increment Parent</button>
<Child boundMessage={message} myCounter={counter} />
<!-- Child Component (Child.svelte) -->
<script>
  import { $state, $effect } from '@sveltejs/svelte';
  //Props are state variables, and are auto declared for runes
  export let boundMessage;
  export let myCounter;
  let localCounter = $state(0);
  $effect(() => {
    console.log('Message received in Child: ', boundMessage.get());
  })
  function incrementChild() {
    localCounter.set(localCounter.get() + 1);
  }
</script>
<h2>Child Component</h2>
<p>Bound Message: {boundMessage.get()}</p>
<p>My Counter (from parent): {myCounter.get()}</p>
<p>Child Local Counter: {localCounter.get()}</p>
<button on:click={incrementChild}>Increment Child</button>

• In the Parent Component, we declare message and counter as reactive state variables with $state().


• We pass these signals to the child component Child via props boundMessage and myCounter.


• In the Child.svelte the props are declared as standard svelte export let variables. Because Svelte knows that the props were passed as runes it will automatically handle reactivity


• We can access the values inside of the child using the get() method.

• Use $state sparingly. Avoid overusing $state. Use it only for values that need to be truly reactive. For simple variables that don't need to trigger updates, use regular let declarations.


• Use $derived for computed values. Whenever you have a value that depends on other reactive values, use $derived to ensure it's automatically updated.


• Effects for side effects. Use $effect only for side effects like DOM manipulation, logging, or fetching data. Avoid using $effect for updating state, as it can lead to infinite loops.


• $const for immutability (with caveats). Use $const to declare constants that shouldn't be reassigned. Be aware that if the "constant" is an object or array, its contents can still be modified.


• Use .set for modifying reactive variables. Always use the .set() method to update reactive variables created with $state. Direct assignment (e.g., count = newValue;) will not trigger reactivity.


• Avoid complex logic in $derived. Keep the logic inside $derived functions simple and pure. Complex logic is better placed in separate functions.


• Be mindful of dependencies in $effect. Svelte automatically tracks the dependencies of $effect functions. However, it's a good practice to explicitly list dependencies using bind: or let:, especially for complex components.

<script>
  import { $state, $effect } from '@sveltejs/svelte';
  let todos = $state([]);
  let loading = $state(true);
  let error = $state(null);
  $effect(async () => {
    loading.set(true);
    error.set(null);
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/todos');
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      const data = await response.json();
      todos.set(data);
    } catch (e) {
      error.set(e.message);
    } finally {
      loading.set(false);
    }
  });
</script>
{#if loading.get()}
  <p>Loading...</p>
{:else if error.get()}
  <p>Error: {error.get()}</p>
{:else}
  <ul>
    {#each todos.get() as todo}
      <li>{todo.title}</li>
    {/each}
  </ul>
{/if}

Key Takeaways:

• Svelte 5's runes offer a more explicit and controllable way to manage reactivity.


• $ (with $state and $derived) and $effect are the most commonly used runes.


• Use runes judiciously, focusing on truly reactive values.


• Understand the .get() and .set() methods for accessing and modifying rune based state.


• Runes enable better performance and tooling.

• Svelte Documentation: The official Svelte documentation is the best resource for in-depth information: https://svelte.dev/ (Pay close attention to the "5.0" or "next" documentation).


• Svelte Discord: Join the Svelte Discord community for help and discussions: https://svelte.dev/chat


• Svelte Examples: Explore real-world examples of Svelte 5 applications to learn best practices.