Créer une application SvelteKit avec Claude Code : le guide complet 2026

SvelteKit et Claude Code : le duo pour créer une application web rapide et légère

SvelteKit est le framework applicatif officiel de Svelte, l'un des outils frontend les plus appréciés des développeurs. Sa philosophie est radicale : plutôt qu'un framework qui embarque un gros runtime dans le navigateur, Svelte compile vos composants en JavaScript minimal et ultra-performant. Résultat : des bundles légers, une réactivité fluide et un code souvent plus court que ses concurrents. Avec Svelte 5 et les *runes*, écrire des composants réactifs n'a jamais été aussi clair. Mais entre le routing basé sur les fichiers, les load functions, le rendu serveur, les stores et le déploiement, monter un projet complet reste intimidant quand on débute.

En 2026, Claude Code change la donne. Cet agent de développement autonome, piloté en langage naturel depuis le terminal, sait échafauder un projet SvelteKit, écrire les composants, brancher une API, corriger ses propres erreurs et vous accompagner jusqu'au déploiement. Vous décrivez ce que vous voulez en français, l'agent produit du code idiomatique Svelte 5. Ce guide montre, étape par étape, comment créer une application SvelteKit avec Claude Code : installation, CLAUDE.md, composants, runes, routing, stores, appels réseau, tests et mise en production. Si vous découvrez l'agent, gardez à portée notre guide complet de Claude Code, qui pose les bases du travail en mode agent.

Sommaire

Pourquoi SvelteKit est un terrain idéal pour Claude Code<a id="pourquoi-svelte"></a>

Svelte est particulièrement adapté au développement assisté par IA, pour plusieurs raisons concrètes.

D'abord, la concision du code. Un composant Svelte contient son template, sa logique et son style dans un seul fichier .svelte, avec très peu de cérémonie. L'agent raisonne facilement sur un composant autonome et court, et vous relisez le résultat d'un coup d'œil — moins de lignes, moins de surface pour les bugs.

Ensuite, des conventions fortes et stables. SvelteKit impose un routing basé sur la structure des dossiers, des load functions clairement nommées et une organisation prévisible. Ce socle bien défini réduit les hallucinations : Claude Code génère du code conforme aux pratiques officielles, pas un patchwork improbable.

Enfin, une réactivité explicite avec les runes. Avec $state, $derived et $effect, le flux de données est facile à suivre — pour vous comme pour l'agent qui doit débuguer. Résultat : les cycles « je décris, l'agent code, je teste, l'agent corrige » sont rapides et fiables. C'est exactement l'esprit du vibe coding avec Claude Code.

Installer Node.js, SvelteKit et Claude Code en 2026<a id="installation"></a>

SvelteKit s'appuie sur Node.js. Installez une version LTS récente (Node 20 ou 22) depuis nodejs.org ou via un gestionnaire de versions comme nvm. Vérifiez :

node --version   # v22.x
npm --version    # 10.x

Installez ensuite Claude Code en global :

npm install -g @anthropic-ai/claude-code
claude --version

Au premier lancement, l'agent vous demande de vous authentifier (abonnement Claude Pro/Max ou clé API). Si vous êtes sous Windows, l'installation passe idéalement par WSL : suivez notre guide d'installation de Claude Code sur Mac, Windows et Linux pour éviter les pièges classiques. Vous pouvez aussi piloter l'agent depuis votre éditeur grâce à l'extension Claude Code pour VS Code.

Créer le squelette du projet avec Vite<a id="squelette"></a>

Le meilleur point de départ pour un projet SvelteKit moderne est l'outil officiel sv, basé sur Vite. Plutôt que de tout taper vous-même, ouvrez Claude Code dans un dossier vide et demandez :

« Initialise un nouveau projet SvelteKit avec TypeScript via l'outil officiel `npx sv create`. Ajoute ESLint, Prettier, Vitest et Playwright, puis lance le serveur de dev pour vérifier que la page d'accueil s'affiche. »

L'agent va exécuter la commande d'échafaudage, répondre aux questions du CLI, installer les dépendances et démarrer npm run dev. En quelques instants, vous avez une base propre. La commande sous-jacente ressemble à :

npx sv create mon-app
cd mon-app
npm install
npm run dev

Prenez l'habitude de laisser l'agent vérifier son travail : lancer le serveur, ouvrir l'URL locale, confirmer qu'il n'y a pas d'erreur dans la console. C'est cette boucle de vérification qui distingue un vrai workflow agentique d'une simple génération de code à l'aveugle.

Le fichier CLAUDE.md, cerveau de votre projet SvelteKit<a id="claude-md"></a>

Avant de générer la moindre fonctionnalité, créez un fichier CLAUDE.md à la racine. C'est la mémoire de projet que l'agent lit automatiquement à chaque session : vos conventions y sont gravées une fois pour toutes.

# Projet : Mon application SvelteKit

## Stack
- SvelteKit avec Svelte 5 (runes)
- TypeScript strict
- Vite pour le build
- Tailwind CSS pour le style
- Vitest + Playwright pour les tests

## Conventions
- Un composant par fichier .svelte, PascalCase pour les noms
- Composants réutilisables dans src/lib/components
- Runes Svelte 5 : $state, $derived, $effect, $props (pas de let réactif hérité)
- Routing dans src/routes, load functions dans +page.ts / +page.server.ts
- Toujours typer les props et les données de load
- Pas de any : préférer des types explicites

## Commandes
- Dev : npm run dev
- Build : npm run build
- Tests : npm run test
- Lint : npm run lint

Ce fichier évite les allers-retours : l'agent sait d'emblée qu'il doit écrire du TypeScript typé, utiliser les runes et respecter votre arborescence. Pour aller plus loin sur cet outil décisif, consultez notre guide complet du fichier CLAUDE.md.

Du prompt au composant : runes Svelte 5<a id="composants"></a>

Place au concret. Demandez à Claude Code un premier composant :

« Crée un composant `CompteurTaches.svelte` qui affiche une liste de tâches et un champ pour en ajouter. Utilise les runes Svelte 5 et TypeScript. Chaque tâche a un id, un libellé et un booléen `terminee`. On peut cocher une tâche et la supprimer. »

L'agent produit un composant idiomatique et concis, du type :

<script lang="ts">
  interface Tache {
    id: number;
    libelle: string;
    terminee: boolean;
  }

  let taches = $state<Tache[]>([]);
  let nouveau = $state('');
  let compteur = 0;

  function ajouter() {
    if (!nouveau.trim()) return;
    taches.push({ id: ++compteur, libelle: nouveau, terminee: false });
    nouveau = '';
  }

  function supprimer(id: number) {
    taches = taches.filter((t) => t.id !== id);
  }
</script>

<form onsubmit={(e) => { e.preventDefault(); ajouter(); }}>
  <input bind:value={nouveau} placeholder="Nouvelle tâche" />
  <button type="submit">Ajouter</button>
</form>
<ul>
  {#each taches as t (t.id)}
    <li>
      <input type="checkbox" bind:checked={t.terminee} />
      <span class:fait={t.terminee}>{t.libelle}</span>
      <button onclick={() => supprimer(t.id)}>✕</button>
    </li>
  {/each}
</ul>

Remarquez la clarté : la réactivité avec $state, les liaisons bind:value et bind:checked, le bloc {#each} dans le template. Vous demandez ensuite des variantes en langage naturel — « ajoute un compteur de tâches restantes avec $derived », « range les tâches terminées en bas » — et l'agent itère. C'est là toute la puissance du vibe coding avec un framework aussi lisible que Svelte.

Routing basé sur les fichiers et load functions<a id="routing"></a>

Une vraie application a plusieurs pages. SvelteKit gère la navigation via le système de fichiers : chaque dossier dans src/routes devient une route, et le fichier +page.svelte en est la vue. Demandez à l'agent :

« Ajoute trois routes : Accueil (/), Tâches (/taches) et À propos (/apropos). Crée les fichiers `+page.svelte` correspondants et une barre de navigation avec des liens SvelteKit. »

Claude Code crée l'arborescence, déclare les pages et met en place la navigation. Il maîtrise aussi les concepts avancés : routes dynamiques (/taches/[id]), *layouts* partagés (+layout.svelte), et surtout les load functions. Une load function dans +page.ts ou +page.server.ts récupère les données *avant* le rendu de la page :

// src/routes/taches/+page.ts
import type { PageLoad } from './$types';

export const load: PageLoad = async ({ fetch }) => {
  const res = await fetch('/api/taches');
  const taches = await res.json();
  return { taches };
};

Décrivez le besoin, relisez le code généré, testez dans le navigateur. C'est ce modèle de chargement des données côté serveur qui rend SvelteKit particulièrement performant pour le SEO et le temps de premier affichage.

Gérer l'état global avec les stores Svelte<a id="stores"></a>

Dès que plusieurs composants partagent des données — l'utilisateur connecté, un panier, un thème — vous avez besoin d'un état partagé. Svelte propose ses *stores* natifs, sans bibliothèque externe, et Claude Code les maîtrise parfaitement.

« Crée un store `taches` avec `writable` qui centralise la liste des tâches, avec des fonctions pour ajouter, cocher et supprimer, et un store dérivé `tachesRestantes`. Branche-le dans le composant de liste. »

L'agent génère un store typé et lisible :

import { writable, derived } from 'svelte/store';

interface Tache { id: number; libelle: string; terminee: boolean }

export const taches = writable<Tache[]>([]);

export const tachesRestantes = derived(
  taches,
  ($taches) => $taches.filter((t) => !t.terminee).length
);

export function ajouter(libelle: string) {
  taches.update((liste) => [...liste, { id: Date.now(), libelle, terminee: false }]);
}

Vos composants consomment le store via la syntaxe $taches, et la réactivité fait le reste. En Svelte 5, vous pouvez aussi centraliser l'état dans un module exportant des runes $state — l'agent vous proposera l'approche adaptée à votre projet. Cette centralisation de l'état est aussi ce qui rapproche une application SvelteKit d'une architecture full-stack : côté backend, la même logique de délégation à l'agent s'applique, comme le montre notre guide pour créer un backend avec Supabase et Claude Code.

Consommer une API REST dans SvelteKit<a id="api"></a>

Une application réelle dialogue avec un serveur. SvelteKit offre deux endroits idéaux : les load functions (vues plus haut) pour charger les données au rendu, et les endpoints API (fichiers +server.ts) pour créer votre propre backend. Demandez à l'agent :

« Crée un endpoint GET /api/taches dans un fichier `+server.ts` qui renvoie une liste de tâches en JSON, puis affiche ces données dans la page Tâches via une load function, avec gestion des états de chargement et d'erreur. »

Claude Code écrit l'endpoint, la load function et le rendu, en gérant proprement chaque état. Il sait aussi extraire la logique réseau dans un module réutilisable de src/lib pour ne pas dupliquer le code dans dix endroits.

Le choix de l'API dépend de votre projet : backend maison, service tiers ou API de données spécialisée. Pour des données métier prêtes à l'emploi (par exemple immobilières), une API comme celle d'immoApi s'intègre en quelques minutes dans un front SvelteKit, et Claude Code se charge du câblage. Et si vous voulez construire vous-même le backend complet, comparez l'approche avec notre guide pour créer une application Next.js avec Claude Code.

Tester vos composants avec Vitest et Playwright<a id="tests"></a>

Un projet SvelteKit sérieux se teste. L'outil recommandé pour les tests unitaires est Vitest, rapide et parfaitement intégré à Vite ; pour les tests de bout en bout, Playwright simule un vrai navigateur. Demandez à l'agent :

« Écris des tests Vitest pour la logique du store `taches` : ajout, coche et suppression d'une tâche. Ajoute aussi un test Playwright qui vérifie qu'on peut ajouter une tâche depuis la page /taches. »

Claude Code produit des tests lisibles pour la logique métier et le parcours utilisateur :

import { describe, it, expect } from 'vitest';
import { get } from 'svelte/store';
import { taches, ajouter, tachesRestantes } from '../src/lib/stores/taches';

describe('store taches', () => {
  it('ajoute une tâche et met à jour le compteur', () => {
    ajouter('Écrire un test');
    expect(get(taches).length).toBe(1);
    expect(get(tachesRestantes)).toBe(1);
  });
});

Pour aller plus loin sur la méthode — écrire les tests d'abord, laisser l'agent les faire passer — lisez notre guide sur les tests automatisés et le TDD avec Claude Code.

Voir Claude Code en action

Avant de déployer, il est utile de visualiser la méthode de travail avec l'agent : cadrer une tâche, laisser Claude proposer une approche, puis avancer par incréments vérifiés. Cette vidéo de la chaîne Sophiène IA montre l'outil en action sur un vrai projet — une logique directement transposable au développement d'une application SvelteKit :

**Et si vous arrêtiez de coder à la main ce qu'un agent peut produire à votre place ?** Monter un front SvelteKit n'est que le début. Découvrez comment déléguer des pans entiers de votre développement à des agents Claude Code bien orchestrés : [**se faire remplacer par l'IA**](https://go.saas-ia.io/se-faire-remplacer-par-lia). Vous y verrez des workflows complets, du premier composant jusqu'aux équipes d'agents en production.

Déployer votre application SvelteKit<a id="deploiement"></a>

SvelteKit utilise un système d'adapters pour cibler chaque plateforme. Un adapter transforme votre application en un format optimisé pour l'hébergeur choisi : Vercel, Netlify, Cloudflare, ou un serveur Node autonome. Demandez à l'agent :

« Prépare le déploiement sur Vercel : installe et configure `@sveltejs/adapter-vercel`, vérifie le build, et explique-moi les étapes de mise en ligne. »

Claude Code installe le bon adapter, l'ajoute dans svelte.config.js, lance npm run build pour valider, et vous guide sur la connexion du dépôt Git. C'est l'un des grands atouts de SvelteKit : le même code se déploie en statique, en serverless ou en serveur Node selon l'adapter, sans réécriture. Pour un tour complet des plateformes et des réglages, suivez notre guide pour déployer une application Claude Code sur Vercel ou Netlify.

SvelteKit ou Next.js avec Claude Code ?<a id="svelte-vs-next"></a>

C'est la question qui revient toujours. Les deux frameworks sont parfaitement gérés par l'agent, alors le choix se fait sur d'autres critères :

Un point important : quel que soit le framework, la vraie compétence de 2026 n'est plus la syntaxe, mais la capacité à piloter un agent. Les patterns d'orchestration d'agents autonomes — découper une tâche, déléguer, vérifier — se généralisent bien au-delà du frontend. Si le sujet des agents IA open-source et auto-hébergés vous intéresse, la formation OpenClaw explore ces workflows d'automatisation en entreprise.

Bonnes pratiques et pièges à éviter<a id="bonnes-pratiques"></a>

Pour tirer le meilleur de Claude Code sur un projet SvelteKit, gardez ces réflexes :

Conclusion : SvelteKit + Claude Code, un accélérateur pour votre prochain projet

Vous l'avez vu : de l'échafaudage avec Vite au déploiement via adapter, en passant par les composants en runes Svelte 5, le routing basé sur les fichiers, les load functions, les stores et les tests, Claude Code couvre toute la chaîne d'une application SvelteKit moderne. Vous décrivez, l'agent code, vous vérifiez — et vous apprenez Svelte au passage, plus vite que seul.

La barrière technique du développement web s'effondre. La vraie question n'est plus « est-ce que je sais coder en Svelte ? » mais « quelle valeur je veux créer, et à quelle vitesse ? ». Si vous voulez apprendre à déléguer des pans entiers de votre travail de développeur à l'IA et livrer des produits plus vite, découvrez comment vous faire remplacer par l'IA et transformez votre façon de développer.

Pour aller plus loin