Grundlagen
Alle ansehen- 01 Was ist Svelte? Compiler-Framework statt Laufzeit-Bibliothek
- 02 Svelte vs. React, Vue und Angular Direkter Vergleich der vier großen UI-Frameworks
- 03 Svelte 5 vs. Svelte 4 Was sich mit Svelte 5 geändert hat
- 04 Setup mit SvelteKit Projekt mit sv create und SvelteKit aufsetzen
- 05 Erste Komponente Schritt für Schritt zur ersten .svelte-Komponente
- 06 Aufbau einer .svelte-Datei Script, Markup und Style im Detail
Reactivity (Runes)
Alle ansehen- 01 Einführung in Runes Übersicht über alle Runes und ihre Regeln
- 02 $state Reaktive Variablen mit $state
- 03 $derived Aus $state-Werten abgeleitete Werte
- 04 $effect Side Effects bei reaktiven Änderungen
- 05 $props Komponenten-Properties auslesen mit $props
- 06 $bindable Props als zwei-weg-bindbar markieren
- 07 $inspect Reaktive Werte debuggen
- 08 Legacy-Reactivity (Svelte 4) Wie Reaktivität in Svelte 4 funktionierte
Components
Alle ansehen- 01 Einführung Components Was Komponenten sind und wie sie verwendet werden
- 02 Props Daten von Eltern zu Kindern weiterreichen
- 03 Events DOM-Events und Component-Events
- 04 Snippets statt Slots Slots ersetzt durch flexiblere Snippets
- 05 Component-Bindings bind:value und bind:this auf Komponenten
- 06 Composition Komposition statt Vererbung
- 07 Dynamic Components Komponenten zur Laufzeit wechseln
- 08 Special Elements Spezielle svelte:-Tags
Template-Syntax
Alle ansehen- 01 Text-Expressions Werte und Ausdrücke im Markup einbinden
- 02 {#if} – Bedingungen Conditional Rendering mit {#if} und {:else}
- 03 {#each} – Schleifen Listen mit {#each} rendern, Keys verwenden
- 04 {#await} – Promises im Template Loading-, Erfolgs- und Fehler-Zustand für Promises
- 05 {#key} – Block bei Wert-Wechsel neu erzeugen Block neu mounten bei Wert-Änderung
- 06 Special Tags – @html, @const, @render, @debug @html, @const, @render, @debug
Bindings
Alle ansehenEvents
Alle ansehenLifecycle
Alle ansehenStores
Alle ansehenTransitions & Animations
Alle ansehenActions
Alle ansehen- 01 Einführung Actions Eigenes DOM-Verhalten an Elemente hängen
- 02 Custom Actions schreiben Eigene Actions strukturiert aufbauen
- 03 Action-Parameter & Updates Wie Actions mit reaktiven Parametern umgehen
- 04 Praxis-Actions: Tooltip, ClickOutside, Focus-Trap Drei häufig gebrauchte Actions in vollständig
Styling
Alle ansehen- 01 Einführung Styling Wie Sveltes Style-Scoping wirklich funktioniert
- 02 CSS-Variablen in Komponenten CSS-Variablen als Brücke zwischen Komponenten
- 03 class:- und style:-Direktiven Klassen und Inline-Styles reaktiv setzen
- 04 Tailwind in Svelte Tailwind im Svelte-Projekt einrichten und sinnvoll nutzen
Context API
Alle ansehenForms
Alle ansehen- 01 Einführung Forms Form-Patterns von Svelte 5 im Überblick
- 02 Validation mit Zod und Valibot Schema-basierte Validierung mit modernen Libraries
- 03 SvelteKit Form Actions Server-Form-Submits mit Progressive Enhancement
- 04 File Uploads und Multi-Step-Formulare Datei-Uploads und mehrstufige Formulare bauen