Que sont les Runes dans Svelte 5 ?

Un nouveau système de réactivité remplaçant la syntaxe $:

Cours Svelte et SvelteKit · Module 3: Réactivité et Runes

Chambre des Runes - La magie de la réactivité

2 min de lecture · Mis à jour le 13 août 2026

Dans cette leçon4

Bienvenue dans le lieu le plus sacré d'Asgard : la Chambre des Runes ! Ici, tu vas découvrir la véritable magie de Svelte : la réactivité. Dans Svelte 5, cette magie a pris une nouvelle forme : le système des Runes.

Qu'est-ce que la réactivité ?

La réactivité, c'est la mise à jour automatique de l'interface quand les données changent. En Svelte, cela fonctionne comme les runes : une fois gravées, elles réagissent automatiquement aux changements.

Svelte 4 vs Svelte 5

Ancienne magie (Svelte 4)

<!-- Svelte 4 (legacy) -->
<script>
  let count = 0;

  // Déclaration réactive - $:
  $: doubled = count * 2;
  $: console.log('Count changed to:', count);
</script>

Nouvelle magie - Les Runes (Svelte 5)

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

  // Valeur dérivée réactive
  let doubled = $derived(count * 2);

  // Effet de bord
  $effect(() => {
    console.log('Count changed to:', count);
  });
</script>

Les Runes de base

Rune	Description	Équivalent ancien
`$state`	État réactif	`let x = ...`
`$derived`	Valeur dérivée	`$: x = ...`
`$effect`	Effet de bord	`$: { ... }`
`$props`	Props du composant	`export let`
`$bindable`	Prop avec bind	`export let` + `bind:`
`$inspect`	Suivre les changements dans la console (debug)	`$: console.log(x)`

Pourquoi les Runes ?

Clarté - on voit clairement ce qui est réactif
TypeScript - meilleur typage
Performance - réactivité à grain fin
Cohérence - les mêmes règles partout

<script>
  // Svelte 5 avec les Runes
  let warriors = $state(['Ragnar', 'Bjorn']);
  let count = $derived(warriors.length);

  function addWarrior(name) {
    warriors.push(name); // Ça marche ! Les Runes suivent les mutations
  }
</script>

Les runes sont gravées : la magie est active !

Code de cette leçon : App.svelte

<script>
  // Rune Chamber - Magic of Reactivity
  // Svelte 5 Runes: $state, $derived, $effect

  // $state - reactive state
  let count = $state(0);
  let warriors = $state(['Ragnar', 'Bjorn']);

  // $derived - derived value
  let doubled = $derived(count * 2);
  let totalWarriors = $derived(warriors.length);

  // $effect - side effect
  $effect(() => {
    console.log('Count changed to:', count);
  });

  function addWarrior() {
    warriors.push('New Warrior');
  }
</script>

<main class="rune-chamber">
  <h1>Rune Chamber</h1>
  <p class="subtitle">Svelte 5 Runes - A new era of reactivity</p>

  <section class="rune">
    <h2>$state - Reactive state</h2>
    <p>Count: <strong>{count}</strong></p>
    <div class="buttons">
      <button onclick={() => count--}>-</button>
      <button onclick={() => count++}>+</button>
    </div>
  </section>

  <section class="rune">
    <h2>$derived - Derived value</h2>
    <p>Doubled: <strong>{doubled}</strong></p>
    <p class="hint">Automatically = count * 2</p>
  </section>

  <section class="rune">
    <h2>$state with array</h2>
    <p>Warriors ({totalWarriors}):</p>
    <ul>
      {#each warriors as w}
        <li>{w}</li>
      {/each}
    </ul>
    <button onclick={addWarrior}>+ Add warrior</button>
    <p class="hint">In Svelte 5 array mutations work!</p>
  </section>
</main>

<style>
  .rune-chamber {
    font-family: 'Georgia', serif;
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 100%);
    color: #e8d5f7;
    min-height: 100vh;
  }

  h1 {
    color: #b19cd9;
    text-align: center;
  }

  .subtitle {
    text-align: center;
    color: #8b7ca8;
  }

  .rune {
    background: rgba(177, 156, 217, 0.1);
    border: 1px solid #b19cd9;
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1rem 0;
  }

  h2 {
    color: #b19cd9;
    margin-top: 0;
    font-size: 1.1rem;
  }

  strong {
    color: #ffd700;
    font-size: 1.5rem;
  }

  .buttons {
    display: flex;
    gap: 0.5rem;
  }

  button {
    padding: 0.5rem 1rem;
    background: #4a2c7a;
    color: white;
    border: 1px solid #b19cd9;
    border-radius: 4px;
    cursor: pointer;
  }

  button:hover {
    background: #5a3c8a;
  }

  ul {
    list-style: none;
    padding: 0;
  }

  li {
    padding: 0.25rem 0.5rem;
    background: rgba(0,0,0,0.3);
    margin: 0.25rem 0;
    border-radius: 4px;
  }

  .hint {
    font-size: 0.85rem;
    color: #8b7ca8;
    font-style: italic;
  }
</style>

Entrées de la documentation utilisées dans cette leçon

Tu as repéré une erreur dans cette leçon ?

Teste tes connaissances

Réponds aux questions de cette leçon. Choisis une réponse pour voir tout de suite si elle est correcte.

1. Que sont les Runes dans Svelte 5 ?
2. Quelles sont les Runes de base dans Svelte 5 ?

Articles utiles

TypeScript 7, le compilateur natif et la migration