Svelte

Présentation

Svelte est un framework open source pour construire des interfaces Web à partir de composants utilisant HTML, CSS et JavaScript.

Sa particularité tient largement à son compilateur. Une grande partie du travail est réalisée pendant le build : les composants déclaratifs sont transformés en JavaScript capable de mettre à jour précisément le DOM dans le navigateur.

Cette approche diffère des bibliothèques qui réalisent davantage de travail à l’exécution et permet à Svelte de proposer une syntaxe relativement concise.

Un fichier .svelte peut regrouper logique, markup et styles dans un même composant. Svelte prend également en charge TypeScript, les styles encapsulés, les animations, les transitions et différents mécanismes de partage d’état.

Depuis Svelte 5, le système moderne de réactivité repose principalement sur les runes, notamment $state, $derived, $effect et $props.

Pour construire une application complète avec routing, rendu serveur et fonctions backend, l’écosystème officiel s’appuie sur SvelteKit, qui reste distinct du framework Svelte lui-même.

Au 3 octobre 2026, Svelte 5.57.1 constitue la dernière version stable.

Fonctionnalités

Composants compilés

Les interfaces Svelte sont organisées en composants.

Un fichier .svelte peut contenir un bloc <script>, le markup de l’interface et un bloc <style>.

Le compilateur transforme ensuite ce composant en JavaScript destiné au navigateur ou au rendu serveur.

Cette compilation permet à Svelte de générer directement les opérations nécessaires à la mise à jour de l’interface.

Runes et réactivité

Svelte 5 introduit les runes comme mécanisme moderne de réactivité.

$state déclare un état réactif, tandis que $derived représente une valeur calculée à partir d’autres données réactives.

$effect permet d’exécuter une logique lorsque ses dépendances changent, notamment pour communiquer avec une API externe, manipuler un canvas ou intégrer une bibliothèque tierce.

Les dépendances sont suivies automatiquement lorsque les valeurs réactives sont utilisées.

Props

Dans les composants utilisant la syntaxe moderne, $props() permet de récupérer les propriétés transmises par le composant parent.

Les props peuvent être typées avec TypeScript et destructurées comme des valeurs JavaScript classiques.

Svelte prend également en charge les bindings lorsque certaines données doivent pouvoir être modifiées entre composants de manière contrôlée.

Templates

Les templates Svelte utilisent une syntaxe proche du HTML.

Les blocs {#if}, {#each} et {#await} permettent respectivement de gérer conditions, collections et opérations asynchrones.

Les expressions JavaScript peuvent être insérées directement dans le markup.

Svelte 5 utilise également les snippets et {@render} pour composer et transmettre certaines portions de contenu réutilisables entre composants.

Événements et bindings

Les gestionnaires d’événements peuvent être déclarés directement comme des propriétés, par exemple onclick.

La directive bind: permet de synchroniser une valeur avec certains éléments de formulaire ou propriétés DOM.

Elle peut notamment être utilisée avec bind:value, bind:checked ou bind:this.

Ces mécanismes couvrent une grande partie des interactions courantes sans ajouter une couche importante de code intermédiaire.

Styles encapsulés

Les styles déclarés dans un composant .svelte sont encapsulés par défaut.

Le compilateur adapte les sélecteurs pour limiter leur portée au composant concerné.

Il reste possible de définir volontairement des styles globaux lorsque l’application le nécessite.

Cette approche facilite la création de composants autonomes sans imposer une bibliothèque CSS particulière.

Transitions et animations

Svelte fournit des outils intégrés pour gérer transitions et animations.

Des fonctions comme fade, fly, slide ou crossfade peuvent accompagner l’apparition et la disparition d’éléments.

La directive animate: peut gérer certains déplacements liés à des changements de liste.

Ces fonctions permettent de couvrir de nombreux besoins d’animation sans dépendance supplémentaire.

Attachments et actions

Svelte permet d’associer une logique à un élément DOM.

Les actions, historiquement utilisées avec use:, restent disponibles.

Depuis Svelte 5.29, les attachments proposent une approche plus flexible et composable pour exécuter une logique lorsqu’un élément est monté ou lorsque certaines dépendances changent.

Ils peuvent servir notamment à connecter une bibliothèque externe ou une API DOM spécifique à un élément.

Stores

Svelte dispose toujours de stores avec les variantes writable, readable et derived.

Ils offrent un contrat de souscription simple pour partager ou connecter un état réactif.

Avec Svelte 5, les runes permettent cependant de gérer beaucoup plus facilement de l’état réactif dans des fichiers .svelte.js ou .svelte.ts.

Les stores restent particulièrement utiles pour certaines bibliothèques existantes, sources de données asynchrones ou systèmes respectant leur contrat de souscription.

TypeScript

Svelte prend directement en charge TypeScript dans les composants.

Un bloc <script lang="ts"> peut utiliser annotations de types, interfaces et autres fonctions ne nécessitant pas de transformation TypeScript spécifique au runtime.

Les outils Svelte fournissent également analyse des composants et vérification de types.

La commande svelte-check peut être utilisée dans un projet ou une chaîne d’intégration continue pour détecter différents problèmes.

Vite et outils de développement

Svelte s’intègre avec Vite pour les nouveaux projets modernes.

La chaîne de développement fournit compilation rapide, Hot Module Replacement et production builds.

Le CLI officiel sv permet de créer et maintenir les applications de l’écosystème Svelte.

Pour une nouvelle application complète, sv create génère aujourd’hui un projet basé sur SvelteKit.

Svelte et SvelteKit

Svelte se concentre principalement sur les composants et l’interface utilisateur.

Il ne fournit pas seul une architecture complète de routing, chargement de données serveur ou backend comparable à un framework full-stack.

SvelteKit complète Svelte avec routing basé sur les fichiers, SSR, génération statique, endpoints serveur, formulaires, data loading et déploiement via différents adapters.

SvelteKit 3 constitue depuis octobre 2026 la génération actuelle du framework d’application officiel.

Cas d’usage

Construire une interface Web interactive

Svelte convient aux interfaces composées de formulaires, tableaux, composants dynamiques et interactions fréquentes.

La réactivité intégrée permet de relier directement l’état à l’affichage.

Ajouter un composant à un projet existant

Le compilateur Svelte permet également de produire des composants destinés à être intégrés dans une architecture plus large.

Il n’est donc pas nécessaire d’adopter immédiatement SvelteKit pour chaque usage.

Développer une SPA

Svelte peut servir de couche UI pour une application monopage.

Pour une application structurée avec véritable routing et chargement de données, SvelteKit constitue généralement la solution recommandée.

Construire une application full-stack

Associé à SvelteKit, Svelte peut servir de base à une application comprenant rendu serveur, routes, formulaires et logique backend.

Le même écosystème peut ainsi couvrir aussi bien les composants interactifs que la structure complète du site.

Créer une bibliothèque de composants

Les composants .svelte, leurs styles encapsulés et leur support TypeScript conviennent à la création de design systems et bibliothèques d’interface réutilisables.

Conclusion

Svelte se distingue par une approche où le compilateur prend en charge une partie importante du travail avant l’exécution dans le navigateur.

Ses composants regroupent naturellement markup, logique et styles, tandis que les runes de Svelte 5 fournissent un modèle de réactivité explicite capable de fonctionner aussi à l’extérieur des composants.

Transitions, bindings, TypeScript et styles encapsulés complètent le framework sans imposer une architecture très lourde.

Svelte reste toutefois avant tout centré sur l’interface. Pour le routing, le rendu serveur et les fonctions full-stack, SvelteKit constitue le prolongement officiel.

Pour créer des interfaces Web modernes avec une syntaxe compacte, une forte intégration du compilateur et un écosystème relativement cohérent, Svelte propose une alternative distinctive aux frameworks frontend plus traditionnels.

Points d’attention

• Svelte 5.57.1 est la dernière version stable au 3 octobre 2026.

• Svelte est gratuit et open source sous licence MIT, y compris pour un usage commercial.

• Svelte 5 utilise les runes comme syntaxe moderne de réactivité. $state, $derived, $effect et $props remplacent plusieurs mécanismes implicites utilisés dans les versions précédentes.

• L’ancienne syntaxe de Svelte 3 et 4 reste largement compatible dans Svelte 5. Une migration complète vers les runes n’est donc pas nécessaire immédiatement pour tous les composants existants.

• Svelte est avant tout un framework UI. Pour construire une application complète, l’équipe Svelte recommande généralement SvelteKit.

• SvelteKit est un projet distinct. Sa version 3.0 est sortie le 1er octobre 2026 et ne correspond pas au numéro de version de Svelte lui-même.

• Les stores restent supportés, mais les runes couvrent désormais une partie des besoins qui nécessitaient auparavant un store.

• Les actions restent utilisables, même si les attachments introduits dans Svelte 5 proposent désormais une solution plus flexible pour de nouveaux usages.

• Svelte 5 nécessite un navigateur moderne. Les anciens navigateurs comme Internet Explorer ne sont pas pris en charge.

• TypeScript est pris en charge directement, mais certaines fonctions TypeScript nécessitant une transformation en JavaScript peuvent demander un préprocesseur.

• Le code HTML non fiable doit toujours être traité avec prudence. Comme dans tout framework Web, injecter du contenu utilisateur non assaini peut créer des vulnérabilités XSS.

• Les dépendances Svelte doivent être maintenues à jour. Plusieurs correctifs de sécurité liés notamment au SSR et à l’injection de contenu ont été publiés en 2026.