Test complet de Lovable en 2026 j'ai construit le même site avec Lovable

Introduction : pourquoi j'ai refait mon site web avec Lovable en 2026

Mon site web professionnel tournait depuis trois ans sur une stack React 18 + Next.js, hébergé chez Vercel. Mise à jour de dépendances, correctifs de sécurité, factures d'hébergement : le travail de maintenance occupait presque autant de temps que le contenu lui-même. En 2026, j'ai donc reconstruit exactement le même site avec Lovable, la plateforme IA qui génère du code React, pour vérifier sur un cas réel si l'outil répondait vraiment à mon besoin et tenait ses promesses.

Peut-on reconstruire un site web professionnel sérieux avec Lovable en 2026 ? Cet article est mon test complet de Lovable, fondé sur cette reconstruction à l'identique, pour aider les développeurs, fondateurs non-techniques et professionnels qui veulent créer ou migrer un site web ou une application légère plus vite, sans sacrifier le niveau attendu. Le test porte sur un site vitrine couplé à une mini application web interne, avec formulaires, base de données, paiements et design du site, pour du e commerce de services.

Voici les axes couverts dans cette lecture :

• Le plan gratuit et ses limites réelles

• La qualité du code React généré

• Lovable Cloud pour le backend et les formulaires

• La vitesse d'itération et les Visual Edits

• L'intégration e-commerce avec Stripe

• Les coûts, les performances et les limites face à une stack classique

Lovable en 2026 : rappel rapide de ce que fait l'outil

Lovable est une plateforme IA de « vibe coding » qui génère un site web ou une application web complète à partir d'une description en français. L'outil produit du vrai code React TypeScript avec Tailwind CSS, le tout construit sur Vite avec TanStack Router. Selon la page Wikipedia de l'entreprise, Lovable a été officiellement renommé en décembre 2024.

La différence avec le no code classique : ici, on obtient un code source modifiable, exportable vers GitHub, réutilisable dans une stack professionnelle. Lovable synchronise le code avec GitHub pour le versionner et le modifier à l'extérieur.

Lovable Cloud est le backend managé intégré. Il provisionne automatiquement une instance Supabase (PostgreSQL), solution open source, pour l'authentification, la base de données, le stockage de fichiers et les fonctions Edge, sans configuration manuelle.

Les principaux modes de travail en 2026 :

• Agent : génération complète d'une app à partir d'un prompt

• Chat : explications et questions sans écrire de code

• Visual Edits : modifications visuelles directes de l'interface

• Code : édition directe du code via un éditeur intégré pour les comptes payants

• Mode Plan : structurer un projet avant d'écrire du code

Lovable utilise une approche conversationnelle pour concevoir des sites web, ce qui le rend idéal pour les fondateurs non-techniques, tout en coexistant avec des outils comme Cursor pour des usages plus centrés sur le développement assisté par IA.

Mon projet de test : reconstruire le même site web de A à Z

Le site original est un site web professionnel pour une activité de conseil B2B. Voici sa composition :

• Page d'accueil avec hero section, témoignages clients, bloc services

• Page services détaillée avec grille de prestations

• Page blog statique (5 articles)

• Page « À propos » avec historique et équipe

• Page contact avec formulaire connecté à Supabase

Le site inclut aussi une petite application web interne : un tableau de bord simple pour suivre les demandes de devis, un formulaire de création de devis, et un module de suivi des paiements via Stripe pour les prestations vendues.

La version originale utilisait React 18 + Next.js, hébergée sur Vercel, avec Tailwind CSS et des formulaires connectés à une BDD Supabase externe. L'objectif du test : reconstruire à l'identique en utilisant uniquement Lovable, sans ouvrir VS Code, sans toucher au code manuellement.

Étape 1 : inscription, plan gratuit et prise en main en 2026

L'inscription sur lovable.dev propose trois options : Google, GitHub ou e mail. Après vérification, on choisit le mode sombre ou clair, et on crée son premier projet en quelques secondes.

Le plan gratuit en 2026 offre 5 messages par jour, plafonné à environ 30 crédits de création par mois, plus 20 crédits mensuels pour Lovable Cloud. Le badge Lovable reste visible sur le site déployé, les projets privés ne sont pas disponibles, et l'édition directe du code est réservée aux plans payants.

Ces limites suffisent pour un prototype ou une maquette. Mais dès qu'on reconstruit un site entier avec 6 pages et une mini app, les 5 messages quotidiens se consomment en moins d'une heure. Le plan gratuit limite les requêtes à 5 messages par jour ; il faut planifier ses prompts avec soin.

L'interface de départ est claire : une grande zone de prompt centrale, un aperçu du site à droite, la liste de projets sur la gauche, et l'onglet Lovable Cloud dans le menu. L'ensemble fonctionne dans le navigateur : toute la prise en main se fait au même place dans l'interface, sans installation locale.

Étape 2 : décrire le site à Lovable et générer la V1

Mon prompt initial décrivait chaque page : structure, sections, style graphique (palette bleu marine / blanc, typographie Inter, ton professionnel), responsive mobile, et les formulaires à prévoir. Le tout rédigé en français, environ 400 mots.

Lovable génère des applications en 4 à 10 minutes. Pour mon site de 6 pages, la V1 complète est apparue en 7 minutes, avec chargement progressif et aperçu en direct. Lovable génère du code React et TypeScript en temps réel ; on voit les composants apparaître un par un.

La structure générée comprenait :

• 6 routes React avec navigation fonctionnelle

• Header collant avec menu responsive

• Footer avec liens et mentions légales

• Formulaires de contact et de devis (vides, prêts à connecter)

• Grille de services et section témoignages

• Composants séparés et typés en TypeScript

Lovable a généré directement du code React moderne avec TypeScript, Tailwind CSS, configuration Vite, et un projet structuré par composants. Un projet simple peut être construit en moins de 30 minutes ; mon site vitrine seul (sans la mini app) était fonctionnel en 22 minutes.

Qualité du code React généré : peut-on l'utiliser en production ?

J'ai ouvert le code source exporté sur GitHub pour l'examiner composant par composant. La qualité du code généré par Lovable peut nécessiter une revue humaine pour des projets complexes, mais le niveau de base est solide.

Constats principaux sur la qualité du code :

• Séparation des composants : chaque section (hero, services grid, contact form, testimonials) est un composant React isolé, avec ses props typées en TypeScript

• Nommage : les variables et fichiers suivent les conventions React standard (PascalCase pour les composants, camelCase pour les fonctions)

• Organisation des dossiers : structure /components, /pages, /lib, /hooks, cohérente avec les standards du domaine

• Points faibles : certaines duplications dans les styles, quelques composants génériques trop verbeux (un composant "Card" réécrit trois fois avec des variantes mineures au lieu d'accepter des props)

Par comparaison avec mon ancienne version manuelle, Lovable produit des composants plus cohérents stylistiquement (tout passe par Tailwind, pas de CSS custom éparpillé). En revanche, la logique de validation des formulaires était plus naïve que ce que j'avais écrit manuellement.

Le composant de formulaire de contact, par exemple, contenait 45 lignes avec gestion d'état, validation basique des champs e mail et nom, et un appel API prêt à brancher. Lisible, fonctionnel, mais sans gestion des erreurs réseau ni feedback utilisateur détaillé.

Un dev confirmé pourrait reprendre ce code sans tout réécrire, à condition que le projet reste sous 15 à 20 composants. Au-delà, l'architecture imposée par Lovable commence à montrer des limites de personnalisation.

Lovable Cloud en action : backend, base de données et formulaires

L'intégration avec Supabase est native et simplifie le backend. J'ai activé Lovable Cloud via un prompt : « Crée une base de données avec une table leads (nom, email, message, date) et une table demandes_devis (client, prestation, montant, statut). Ajoute une authentification basique pour le dashboard. »

Lovable permet la création simultanée de l'interface, de la logique, de la base de données et de l'authentification à partir de prompts. En une génération, j'avais :

• Deux tables PostgreSQL avec colonnes typées

• Row Level Security (RLS) activée sur les deux tables

• Routes protégées pour le tableau de bord interne avec auth Supabase

• Templates d'e mail de confirmation pour les inscriptions

Les formulaires du site (contact, devis, inscription newsletter) ont été connectés à Lovable Cloud en trois prompts supplémentaires, sans écrire manuellement de requêtes SQL. Lovable intègre Supabase pour le backend sans configuration manuelle, et génère des fonctions serverless pour d'autres APIs via Supabase.

Limites rencontrées :

• Un champ personnalisé « budget estimé » (range slider) a nécessité un prompt de correction spécifique

• La validation côté serveur pour les adresses e mail jetables n'était pas générée automatiquement

• La gestion d'erreurs sur les formulaires renvoyait un message générique ; après reformulation du prompt, Lovable a pu try to fix une partie du problème automatiquement et produire des messages plus contextuels

Intégration e commerce : Stripe et mini facturation de services

Mon site vend trois prestations au forfait : consultation (150 €), accompagnement mensuel (500 €/mois) et formation sur mesure (1 200 €). Chaque produit nécessite un checkout Stripe avec redirection de succès et d'échec.

Lovable a la capacité d'intégrer des services tiers comme Stripe et des outils de marketing. En suivant la documentation d'intégration Stripe, j'ai connecté une clef API restreinte en mode test, puis demandé à l'agent de construire le flow de paiement.

Ce que Lovable a automatisé :

• Création d'une page pricing avec trois cartes produit et boutons « Acheter »

• Appel à l'API Stripe Checkout via une fonction Edge Supabase

• Redirection vers une page succès ou échec selon le résultat

• Stockage du statut de paiement dans la base Lovable Cloud

• L'intégration Stripe permet des paiements sécurisés et automatisés

Ce qui a nécessité de la vigilance :

• Les webhooks Stripe pour synchroniser les états de facture (paiement réussi, échoué, remboursé) contenaient une erreur dans la vérification de signature ; il a fallu deux prompts de correction

• La logique de reçus fiscaux n'est pas générée ; c'est un ajout manuel

• La gestion multi-devises n'est pas prise en charge automatiquement

Vitesse d'itération et Visual Edits : affiner la mise en page

Une fois la V1 générée, l'ajustement de l'interface et du design commence. Lovable permet d'ajuster l'interface de manière visuelle directement via un éditeur visuel : on clique sur une section, on modifie les marges, les couleurs, les textes, sans prompt.

Exemple concret : la hero section affichait un titre trop long sur mobile. En un clic dans Visual Edits, j'ai réduit la taille de police, ajusté le padding, et changé le texte du CTA de « Découvrir nos services » à « Voir les offres ». Temps total : 40 secondes.

Lovable permet des itérations rapides avec des prompts en langage naturel. Pour la réorganisation des blocs services (passer de 2 colonnes à 3), un prompt d'une ligne a suffi, avec un résultat visible en 35 secondes.

Problèmes rencontrés pendant l'itération :

• Un prompt trop vague (« rends la page plus moderne ») a modifié les couleurs de tout le site au lieu de la seule page ciblée

• Après 12 itérations successives sur la même page, un composant a perdu son alignement ; j'ai utilisé le retour en arrière (undo) pour revenir à la version précédente

• Lovable excelle dans la gestion des itérations par rapport à Bolt.new, son concurrent direct ; les modifications successives ne cassent pas la structure aussi facilement

Plan gratuit vs plans payants : combien m'a vraiment coûté ce site ?

Avec le plan gratuit, j'ai pu générer la V1 du site vitrine (sans la mini app) et effectuer 4 ajustements visuels. Le cinquième jour, les crédits étaient épuisés.

Voici la grille tarifaire en 2026 :

• Plan gratuit : 5 messages par jour, badge Lovable, pas de projets privés

• Plan Starter : 20 $/mois pour 500 messages

• Plan Launch : 50 $/mois pour 1 500 messages

• Plan Scale : 100 $/mois pour 4 000 messages

• Les étudiants bénéficient d'une réduction de 50 % sur les plans payants

J'ai souscrit au plan Launch à 50 $/mois. En 6 jours de travail (environ 3 heures par jour), j'ai consommé 247 messages pour reconstruire le site complet avec la mini app, le backend et l'intégration Stripe. La plateforme nécessite des crédits pour certaines fonctionnalités de génération et d'hébergement.

Estimation du coût total :

• Abonnement Lovable : 50 $/mois

• Infrastructure Lovable Cloud : incluse dans les crédits du plan

• Temps de travail : 18 heures sur 6 jours

• Équivalent en développement freelance (à 80 €/h) : environ 1 440 €

• Coût réel avec Lovable : 50 $ + mon temps

Le pricing reste avantageux pour un MVP ou un site de service. Pour tout le monde, l'essentiel est de bien préparer ses prompts : chaque génération mal formulée consomme un crédit inutile.

Comparaison avec mon ancienne stack : performance, SEO et maintenance

Performance : le bundle généré par Vite pèse 142 Ko gzippé pour la page d'accueil, contre 198 Ko sur mon ancienne version Next.js (qui incluait le runtime SSR). Le temps de chargement mesuré avec Lighthouse est passé de 2,1 secondes à 1,6 seconde. L'optimisation d'images n'est pas automatique ; j'ai dû convertir mes visuels en WebP manuellement.

SEO : Lovable génère les balises meta, les titres H1/H2, des URLs propres et un sitemap basique. Les vues sur les pages sont bien indexables. En revanche, les balises OpenGraph pour le partage sur les réseaux sociaux et le lazy loading des images demandent des prompts spécifiques. Un site généré par Lovable est une SPA React, pas du SSR ; pour du SEO très compétitif, Next.js conserve un avantage grâce au rendu côté serveur.

Maintenabilité : ajouter une nouvelle page prend un prompt et 2 minutes. Brancher un outil analytics (Google Analytics, pixel pub) fonctionne via un prompt. Lovable offre une synchronisation bidirectionnelle avec GitHub ; les utilisateurs peuvent connecter leur dépôt GitHub pour le code source et reprendre le projet dans un IDE classique. Le déploiement d'une application avec Lovable se fait en un clic.

Pour la plupart des sites vitrines et applications web simples, Lovable tient la comparaison. L'écart se creuse sur les projets nécessitant du SSR, du rendu conditionnel côté serveur, ou un CMS headless sophistiqué.

Limites rencontrées : où Lovable décroche encore en 2026

Les limites concrètes observées en refaisant ce site :

• Logique métier complexe : les remises conditionnelles (« -15 % si le client achète deux formations ») ont nécessité 4 prompts et 2 corrections manuelles via l'éditeur de code. Les utilisateurs rapportent que même si le transfert vers des logiques métiers complexes est géré, cela pose des défis. Lovable excelle pour des MVP simples mais faiblit sur la logique complexe.

• Personnalisation marketing avancée : pas d'A/B testing natif, pas de personnalisation par segment visiteur, pas d'intégration CRM directe

• Domaine personnalisé : connecter un domaine personnalisé sans assistance technique reste un problème pour les non-devs ; la documentation existe mais suppose des notions DNS

• Dette technique : après 247 prompts, 3 composants étaient dupliqués avec des variantes mineures, et les styles divergeaient entre pages sur certains détails (padding, tailles de police)

• Sécurité : Lovable intègre des scanners de sécurité pour auditer le code, mais la relecture humaine reste indispensable pour l'auth, le RLS Supabase, et les formulaires sensibles avant de passer sur un vrai trafic

• Conflits de version : lors de modifications concurrentes entre Visual Edits et prompts textuels, deux conflits ont nécessité un retour à une version antérieure

L'expérience de création avec Lovable peut varier en complexité selon les besoins. Pour un site de 6 pages avec backend simple, les erreurs restent gérables. Un produit SaaS complet avec gestion multi-utilisateurs serait un autre défi.

Verdict : est-ce que je garderais ce site Lovable en production ?

Oui, pour ce cas précis. Mon site vitrine + mini app de gestion de devis et paiements reste en production sur Lovable depuis la fin du test. Le prototypage d'un MVP avec Lovable permet un gain de temps mesurable : 18 heures contre 60 à 80 heures estimées sur ma stack classique.

La vitesse d'exécution pour générer un prototype est réelle : Lovable permet de créer des applications en moins de 10 minutes, et il permet de créer des applications sans compétences techniques. Lovable permet d'ajouter des intégrations via des prompts en langage naturel, ce qui rend le guide de prise en main quasi inutile pour les cas standards. Lovable s'intègre nativement avec Supabase pour le backend, et les applications web générées basées sur React, TypeScript et Tailwind CSS sont de qualité suffisante pour de la production légère.

Selon Stripe, Lovable a généré 400 millions de dollars de revenu annuel récurrent en 14 mois, et les apps créées sur la plateforme reçoivent plus de 300 millions de visites par mois. Ce n'est plus un jouet.

Je migrerais vers une stack classique si :

• Le projet dépasse 20 composants complexes avec logique métier avancée

• Le SEO est un canal d'acquisition principal nécessitant du SSR

• L'équipe technique compte plus de 2 développeurs travaillant en parallèle sur le même projet

À retenir :

• Lovable en 2026 tient ses promesses pour un site vitrine, un MVP ou un SaaS léger

• Le plan gratuit sert à tester ; la création sérieuse commence au plan Launch (50 $/mois)

• Exportez le code sur GitHub dès le début pour garder votre liberté

• Faites relire la sécurité (auth, RLS, webhooks) par un humain avant mise en production

• Testez Lovable sur lovable.dev avec un petit projet avant de migrer tout votre écosystème digital