Zum Inhalt springen

Svelte

Männliche Person, frontal, schaut in die Kamera; trägt kariertes Hemd über dunkelfarbigem T‑Shirt; heller Innenraum mit unscharfem Monitor oder Poster links und Fenster rechts.

von Richard Albrecht am 08.11.2026

Svelte ist ein JavaScript-Framework für Benutzeroberflächen, das Rich Harris 2016 vorgestellt hat. Es arbeitet als Compiler und rechnet Komponenten schon beim Bauen der Seite in Browsercode um. Im Browser des Besuchers läuft danach nur noch das Ergebnis.

Svelte

Ein JavaScript-Framework, das Komponenten beim Bauen in kleines, direkt ausführbares JavaScript übersetzt.
Beispiel: „Das Svelte-Widget für den Tarifrechner wiegt nach dem Bauen nur ein paar Kilobyte.“

Verwandt: SvelteKit, das Meta-Framework auf Basis von Svelte, vergleichbar mit Next.js für React.

Abgrenzung zu React: React liefert eine Bibliothek mit, die im Browser Änderungen abgleicht. Svelte schreibt den Code für jede Änderung schon vorher aus.

Wie Svelte als Compiler arbeitet

Eine Svelte-Komponente sieht aus wie eine HTML-Datei mit einem Script- und einem Style-Block. Beim Bauen erzeugt der Compiler daraus JavaScript, das genau die Stellen der Seite ändert, die von einem Wert abhängen.

Ein virtuelles Abbild der Seite, wie React es verwendet, entfällt dadurch. Das spart Rechenarbeit im Browser und Bytes in der Leitung, vor allem auf schwächeren Smartphones.

Wofür Svelte sich eignet

Für interaktive Teile, die schnell laden müssen: eingebettete Rechner, Karten und Datenvisualisierungen. Rich Harris kam aus der Grafikredaktion von Zeitungen, und das merkt man dem Werkzeug an.

Seit 2021 arbeitet er bei Vercel, dem Unternehmen hinter Next.js, an Svelte und SvelteKit weiter. Mit Version 5 hat Svelte seine Reaktivität auf sogenannte Runes umgestellt, die ausdrücklicher festlegen, welcher Wert sich ändern kann.

Was Svelte gegenüber React fehlt

Vor allem die Größe des Ökosystems. Für React gibt es zu fast jeder Aufgabe mehrere fertige Pakete und viele Entwickler auf dem Markt; bei Svelte ist beides kleiner.

Für ein Projekt, das jahrelang gepflegt werden soll, ist das ein echter Faktor. Die Frage ist dann weniger, welches Framework technisch eleganter ist, als ob sich in drei Jahren noch jemand findet, der den Code übernimmt.

Siehe auch:

React

Eine JavaScript-Bibliothek von Meta, die Benutzeroberflächen aus Komponenten zusammensetzt.

#Programmiersprachen

Vue.js

Ein JavaScript-Framework für Benutzeroberflächen, das sich schrittweise in bestehende Seiten einbauen lässt.

#Programmiersprachen

Compiler

Übersetzt Quelltext vollständig, bevor das Programm startet.

#Programmiersprachen

Reaktivität (Data Binding)

Die Fähigkeit eines Frameworks, die Oberfläche bei jeder Datenänderung von selbst nachzuziehen.

#Programmiersprachen

Meta-Framework

Ein Framework, das auf einer UI-Bibliothek aufsetzt und sie um Routing, Rendering und Serverseite ergänzt.

#Programmiersprachen

Core Web Vitals

Drei Messwerte von Google für das, was Besucher beim Laden und Bedienen einer Seite erleben.

#Suchmaschinenoptimierung (SEO)