Svelte 5 und Runes: Das moderne Reactive-Framework im Praxiseinsatz

Seit dem Release im Oktober 2024 hat Svelte 5 das Frontend-Entwicklungslandschaft nachhaltig verändert. Mit dem Runes-System führt das Framework eine explizite, compiler-optimierte Reaktivität ein, die sowohl die Developer Experience als auch die Runtime-Performance auf ein neues Level hebt. In diesem Beitrag beleuchte ich die Kernkonzepte, ziehe Vergleiche zu React und Vue und zeige, wann Svelte 5 die überlegene Wahl ist.

Was sind Runes?

Runes sind Compiler-Direktiven - keine gewöhnlichen Funktionsaufrufe. Das Dollar-Zeichen signalisiert dem Svelte-Compiler, dass es sich um reaktive Primitiven handelt. Im Gegensatz zu Svelte 4, wo Reaktivität implizit über let-Deklarationen auf Top-Level funktionierte, macht Svelte 5 den reaktiven Zustand explizit und portabel.

Die vier zentralen Runes sind:

• $state - Deklariert reaktiven Zustand
• $derived - Berechnet abgeleitete Werte (memoized)
• $effect - Führt Seiteneffekte bei Zustandsänderungen aus
• $props - Empfängt und destrukturiert Component-Properties

Die Runes im Detail

$state - Reaktiver Zustand

$state ersetzt die implizite Reaktivität von Svelte 4. Jede Variable, die sich ändern und das UI aktualisieren soll, wird explizit als State markiert:

<script>
  let count = $state(0);
  let items = $state([]);
  let user = $state({ name: 'Eric', role: 'Developer' });
</script>

<button onclick={() => count++}>
  Zähler: {count}
</button>

Der entscheidende Vorteil gegenüber Svelte 4: $state funktioniert nicht nur in .svelte-Dateien, sondern überall - in separaten .ts-Modulen, Utility-Funktionen oder Stores. Damit ist reaktiver Zustand endlich portabel.

$derived - Abgeleitete Werte

$derived berechnet Werte, die von reaktivem State abhängen. Die Berechnung erfolgt memoized - nur wenn sich Abhängigkeiten tatsächlich ändern:

<script>
  let items = $state([
    { name: 'Aufgabe A', done: false },
    { name: 'Aufgabe B', done: true },
    { name: 'Aufgabe C', done: false }
  ]);

  let remaining = $derived(items.filter(item => !item.done).length);
  let allDone = $derived(remaining === 0);
</script>

<p>{remaining} Aufgaben offen</p>
{#if allDone}
  <p>Alles erledigt.</p>
{/if}

Für komplexere Berechnungen gibt es $derived.by(), das eine Funktion mit mehreren Statements akzeptiert:

<script>
  let cart = $state([]);

  let total = $derived.by(() => {
    let sum = 0;
    for (const item of cart) {
      sum += item.price * item.quantity;
    }
    return sum;
  });
</script>

$effect - Seiteneffekte

$effect führt Code aus, nachdem das DOM aktualisiert wurde. Es trackt Abhängigkeiten automatisch und führt bei Änderungen erneut aus:

<script>
  let searchTerm = $state('');
  let results = $state([]);

  $effect(() => {
    if (searchTerm.length < 3) return;

    const controller = new AbortController();

    fetch(`/api/search?q=${searchTerm}`, { signal: controller.signal })
      .then(r => r.json())
      .then(data => { results = data; });

    return () => controller.abort();
  });
</script>

Die Cleanup-Funktion (Return-Wert) wird automatisch vor jeder erneuten Ausführung und beim Unmount aufgerufen. Eine wichtige Regel: $derived ist für pure Berechnungen, $effect für Seiteneffekte mit der Außenwelt (Fetching, DOM-Manipulation, Logging).

$props - Component-Properties

$props ersetzt das bisherige export let Pattern und ermöglicht Destrukturierung mit Standardwerten:

<script>
  let { title, description = '', variant = 'default' } = $props();
</script>

<article class="card card--{variant}">
  <h2>{title}</h2>
  {#if description}
    <p>{description}</p>
  {/if}
</article>

Properties, die von außen gebunden werden sollen, erfordern das $bindable() Rune - ein bewusster Opt-in für bidirektionalen Datenfluss.

Migration von Svelte 4 zu Svelte 5

Die Migration muss nicht auf einen Schlag erfolgen. Svelte 5 unterstützt weiterhin die alte Syntax, sodass alte und neue Komponenten gemischt werden können.

Automatische Migration

Das offizielle CLI-Tool sv migrate übernimmt den Großteil der Konvertierung:

npx sv migrate svelte-5

Es wandelt let-Deklarationen in $state, reaktive Statements ($:) in $derived oder $effect und export let in $props um.

Manuelle Anpassungen

Einige Patterns erfordern manuelle Arbeit:

Svelte 4	Svelte 5	Anmerkung
createEventDispatcher()	Callback-Props	Manuell umschreiben
beforeUpdate / afterUpdate	$effect.pre() / $effect()	Intent-abhängig
<slot />	Snippets	Neues Konzept
Implizites bind:	$bindable() Rune	Opt-in erforderlich
Component-Klassen	mount() / hydrate()	Neue Instanziierung

Snippets statt Slots

Eine der größten konzeptionellen Änderungen: Slots werden durch Snippets ersetzt. Snippets sind typsichere, wiederverwendbare UI-Fragmente:

<!-- Parent -->
{#snippet row(item)}
  <tr>
    <td>{item.name}</td>
    <td>{item.value}</td>
  </tr>
{/snippet}

<DataTable data={items} {row} />

<!-- DataTable.svelte -->
<script>
  import type { Snippet } from 'svelte';
  let { data, row }: { data: any[], row: Snippet<[any]> } = $props();
</script>

<table>
  {#each data as item}
    {@render row(item)}
  {/each}
</table>

Vergleich: Svelte 5 vs. React 19 vs. Vue 3.6

Reaktivitätsmodelle

React 19 mit Compiler: React setzt auf einen virtuellen DOM mit automatischer Memoization durch den React Compiler (seit Oktober 2025). State wird über useState und useReducer verwaltet, abgeleitete Werte über useMemo. Der Compiler eliminiert viel Boilerplate, aber das Grundprinzip bleibt: Bei jeder State-Änderung wird die gesamte Komponente neu evaluiert.

Vue 3.6 Composition API: Vue nutzt Proxy-basierte Reaktivität mit ref() und reactive(). Abhängigkeiten werden automatisch auf Variablen-Ebene getrackt. Der Vapor Mode (compiler-optimiertes Rendering) schließt die Performance-Lücke zu Svelte zunehmend.

Svelte 5 Runes: Svelte kompiliert Reaktivität zu direkten DOM-Manipulationen - ohne Virtual DOM, ohne Runtime-Overhead. $state erzeugt Signale, $derived memoized automatisch, $effect ersetzt useEffect mit sauberer Cleanup-Semantik.

Code-Vergleich: Counter mit abgeleitetem Wert

React 19:

import { useState, useMemo } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  const doubled = useMemo(() => count * 2, [count]);

  return (
    <div>
      <button onClick={() => setCount(c => c + 1)}>{count}</button>
      <p>Doppelt: {doubled}</p>
    </div>
  );
}

Vue 3.6:

<script setup>
import { ref, computed } from 'vue';

const count = ref(0);
const doubled = computed(() => count.value * 2);
</script>

<template>
  <button @click="count++">{{ count }}</button>
  <p>Doppelt: {{ doubled }}</p>
</template>

Svelte 5:

<script>
  let count = $state(0);
  let doubled = $derived(count * 2);
</script>

<button onclick={() => count++}>{count}</button>
<p>Doppelt: {doubled}</p>

Svelte 5 liefert das kürzeste, lesbarste Ergebnis - ohne Imports, ohne .value-Zugriffe, ohne Dependency-Arrays.

Performance und Bundle-Grösse

Die Benchmark-Ergebnisse in 2026 sprechen eine deutliche Sprache:

Metrik	Svelte 5	React 19 (mit Compiler)	Vue 3.6
Bundle (gzipped, minimal)	2-5 KB	42 KB	16 KB
Bundle (Production-App)	ca. 47 KB	ca. 156 KB	ca. 85 KB
TTI (Time to Interactive)	Baseline	+30-40%	+15-20%
Memory (1000 Rows)	4.2 MB	8.8 MB	6.1 MB
Geometric Mean (JS Framework Benchmark)	Baseline	+20-40%	+10-15%

Svelte 5 ist rund 40 Prozent schneller als React 19 ohne Compiler und immer noch 20 Prozent schneller mit aktiviertem React Compiler. Bei Listen-Operationen (Erstellen, Aktualisieren, Löschen von 1000+ Rows) erreicht Svelte bis zu 5-6x schnellere Ausführung.

Der Grund: Svelte kompiliert zu chirurgischen DOM-Updates. Kein Virtual DOM Diffing, kein Reconciliation-Overhead, keine Runtime-Bibliothek die mitgeliefert werden muss.

Svelte + Astro: Die optimale Kombination

Astro und Svelte ergänzen sich hervorragend. Astro liefert standardmäßig Zero-JavaScript-HTML und hydratisiert Svelte-Komponenten nur dort, wo Interaktivität benötigt wird.

Setup

npx astro add svelte

Die Integration (@astrojs/svelte v6+) unterstützt Svelte 5 vollständig und nutzt den @sveltejs/vite-plugin-svelte unter der Haube.

Selective Hydration

---
import Counter from '../components/Counter.svelte';
import HeroSection from '../components/HeroSection.svelte';
---

<!-- Statisch gerendert, kein JS -->
<HeroSection title="Willkommen" />

<!-- Nur diese Komponente wird hydratisiert -->
<Counter client:visible />

Mit Astros Island-Architektur und Sveltes minimaler Bundle-Grösse entsteht eine Kombination, die bei Lighthouse-Scores konsistent 95+ erreicht. Seit der Übernahme durch Cloudflare Anfang 2026 ist Astro zudem eng mit dem Edge-Netzwerk integriert, was die Deployment-Pipeline weiter vereinfacht.

Wann ist Svelte die bessere Wahl als React?

Svelte 5 ist besonders stark in folgenden Szenarien:

Performance-kritische Anwendungen: Dashboards, Datenvisualisierungen oder Echtzeitanwendungen profitieren direkt von Sveltes schlankem Output und geringem Memory-Footprint.

Content-lastige Websites: In Kombination mit Astro oder SvelteKit liefert Svelte minimale Bundles für Seiten, die primär Inhalte darstellen.

Kleine bis mittlere Teams: Die geringere Komplexität (keine Hook-Regeln, kein Dependency-Array-Debugging, kein State-Management-Boilerplate) bedeutet weniger Fehlerquellen und schnellere Onboarding-Zeiten.

Mobile-First-Projekte: Wo jedes Kilobyte zählt und die Time to Interactive entscheidend ist.

Wann React weiterhin sinnvoll bleibt: Bei Großprojekten mit bestehendem React-Stack, wenn das Team React-Expertise mitbringt, oder wenn spezifische Bibliotheken aus dem React-Ökosystem benötigt werden (z.B. React Native für Cross-Platform).

Das Svelte-Ökosystem 2026

Das Ökosystem hat sich in den letzten 18 Monaten deutlich weiterentwickelt:

SvelteKit 2.x ist der Standard für Full-Stack-Anwendungen mit Server-Side Rendering, API-Routes und File-based Routing. Die Developer Satisfaction liegt bei 93 Prozent. Die Arbeit an SvelteKit 3 hat offiziell begonnen.

Svelte CLI (sv) bietet seit Version 0.12 offizielle Addons wie better-auth und unterstützt das vollständige Setup für Cloudflare Workers/Pages-Deployments.

TypeScript 6.0 Support ist seit Mai 2026 offiziell integriert.

Community-Bibliotheken: shadcn-svelte, Skeleton UI, Melt UI und Superforms sind ausgereift und produktionsreif. Das Plugin-System des Svelte CLI erhält experimentelle Community-Erweiterungen.

Sicherheit: Die Svelte-Maintainer haben im Januar 2026 fünf CVEs gepatcht. Wer SvelteKit produktiv einsetzt, sollte regelmäßig aktualisieren.

Fazit

Svelte 5 mit Runes ist kein experimentelles Spielzeug mehr - es ist ein ausgereiftes Framework mit einem klaren Vorteil: weniger Code, bessere Performance, geringere Komplexität. Die explizite Reaktivität über $state, $derived und $effect vereint das Beste aus der Signal-Welt (SolidJS, Angular Signals) mit Sveltes Compile-Time-Philosophie.

Für neue Projekte, bei denen Performance und Developer Experience gleichermaßen zählen, ist Svelte 5 in Kombination mit Astro oder SvelteKit eine der stärksten Optionen im Frontend-Stack 2026. Die Frage ist nicht mehr, ob Svelte produktionsreif ist - sondern warum man es nicht längst evaluiert hat.

---

Eric Menge ist Webentwickler und KI-Spezialist bei EMIT Solution. Er setzt Svelte 5 und Astro in Kundenprojekten produktiv ein und beratet Unternehmen bei der Framework-Wahl für performante Web-Anwendungen.