html2wp / Blog / De Lovable à WordPress
De Lovable à WordPress : un projet converti en vrai thème
Migrer un projet Lovable vers WordPress, c'est le même travail que la conversion de HTML en WordPress, avec une étape en plus. Un ancien projet Lovable est une application React, donc son HTML ne contient rien à convertir : la page n'apparaît que dans le navigateur, une fois le JavaScript exécuté. Les projets plus récents (TanStack Start, depuis mai 2026) rendent leurs pages sur le serveur, et html2wp convertit les deux de la même façon. Ce guide vous mène d'un tel projet à un thème WordPress qui reprend votre code au lieu de le reconstruire. Chaque étape vient d'une vraie conversion, et vous pouvez ouvrir l'original comme le résultat.
Un exemple de Lovable à WordPress, ouvert des deux côtés
Tout ce qui suit décrit une conversion que nous avons réellement faite. L'original est une app Lovable : bruce-banner.lovable.app, un portfolio de photographe. Le résultat est bruce.html2wp.dev, qui tourne sur WordPress. Vous pouvez entrer dans son administration via /wp-admin avec l'identifiant demo et le mot de passe demo.
La conversion a produit cinq pages et cinq articles sur le thème bruce-banner. Cela tient dans l'offre gratuite, qui convertit jusqu'à cinq pages par conversion et ne demande aucune clé. Ouvrez les deux sites côte à côte avant de continuer. Cet article parle de la différence entre eux, et vous pouvez la mesurer vous-même.
Deux autres conversions Lovable sont ouvertes de la même façon. D'abord, spark-remix-kindred.lovable.app est devenu terra.html2wp.dev, une boutique de tricots sous WooCommerce. Ensuite, bloom-echo-remix.lovable.app est devenu soria.html2wp.dev, le site d'un photographe de mariage. Sur les trois, l'accès à l'administration WordPress est demo / demo.
Ce que « 1:1 » veut dire ici, exactement
Le code que l'app Lovable construit dans le navigateur est le même code qui entre dans le thème. Personne ne reconstruit vos sections en widgets de constructeur de pages, donc vous n'obtenez jamais une approximation du design page par page. Toutes les étapes ci-dessous en découlent.
Ce qu'il faut sur votre ordinateur pour convertir Lovable en WordPress
La construction, le travail dans le navigateur et toutes les vérifications se font sur votre machine. Seul le résultat construit part vers le service qui génère le thème. Ce n'est donc pas un service web où l'on envoie un ZIP, et il a des prérequis à connaître dès le départ :
- Node 20 ou plus récent pour la construction et les scripts locaux.
- Python 3 avec les paquets Playwright et Pillow. Playwright pilote un vrai navigateur, et c'est ainsi qu'une app React devient du HTML.
- Docker avec la commande
docker compose. Il lance un WordPress temporaire sur votre ordinateur, et le convertisseur y vérifie le thème avant que vous ne le voyiez. - php-cli, car chaque fichier PHP passe un contrôle de syntaxe avant d'entrer dans le ZIP.
jq,curl,bashettar. Le WordPress cible doit être en version 6.6 ou plus récente.
Le plugin vérifie tout cela à la première étape et affiche deux listes. La première montre ce qu'il peut installer seul, dans vos propres dossiers. La seconde montre ce que vous devez décider : Docker, un Node plus récent et le démarrage de Docker. Il n'installe jamais ce second groupe dans votre dos.
Docker est ce qui surprend le plus
Les autres convertisseurs n'en ont pas besoin, parce qu'ils sautent cette étape. Ici, le convertisseur installe le thème généré dans un vrai WordPress et le teste là. C'est à cela que servent le navigateur et le conteneur. Si vous cherchez un outil de cinq minutes dans le navigateur, ce n'est pas celui-ci.
Installer le plugin
Nous publions le plugin deux fois, une fois pour chaque agent. Les scripts et le numéro de version sont les mêmes pour Claude Code et Codex. Prenez celui que vous utilisez.
Claude Code
/plugin marketplace add iOSDevSK/html2wp-cc-plugin /plugin install html2wp@html2wp
Ensuite, une seule fois, dans un terminal :
python3 -m playwright install chromium
Codex
codex plugin marketplace add iOSDevSK/html2wp-codex-plugin codex plugin add html2wp@html2wp
Pour l'offre gratuite, il n'y a rien d'autre à configurer : ni clé, ni inscription, ni carte. Si vous préférez ne pas travailler dans un terminal, vous pouvez lancer la même conversion dans l'app de bureau html2wp (un guide avec captures d'écran).
Comment récupérer votre projet Lovable sur votre disque
L'adresse d'un site en ligne n'est pas une entrée acceptée, et c'est voulu. Une copie d'une page publiée ne garde que le résultat affiché. Elle perd ce que sait le code source : quelles routes existent, quels sont les composants et ce que produit la construction.
L'entrée est donc un dossier. Lovable synchronise votre projet avec un dépôt GitHub. Connectez-le, clonez-le, et vous avez le projet en local. Quelle que soit l'apparence de l'interface Lovable ce mois-ci, c'est le dépôt qu'il vous faut : les mêmes fichiers à partir desquels Lovable construit le site.
git clone https://github.com/<you>/<your-lovable-project>.git cd <your-lovable-project>
Inutile de lancer npm install ou une construction avant. La conversion s'en charge elle-même.
Dites « convert this project »
Dans ce dossier, avec votre agent ouvert, tapez :
/html2wp:html2wp
convert this project
Codex n'a pas de commande avec barre oblique. Dites-lui plutôt convert this project into a verified WordPress block theme et il trouve le skill tout seul. Avec Claude Code comme avec Codex, cette phrase est toute la consigne. Vous n'écrivez aucun fichier de configuration et ne choisissez aucune commande de construction.
Flash prend environ 30 minutes et Full environ une heure, selon le nombre de pages et la vitesse de votre ordinateur. La conversion tourne surtout sans vous et indique où elle en est après chaque étape, donc ne vous attendez pas au silence.
Ce que devient le React de Lovable dans WordPress
C'est l'étape qu'ajoute un projet Lovable.
Une ancienne app Lovable (React et Vite) n'a qu'un seul index.html. Son body est un élément vide dans lequel l'app React se monte, plus une balise script : il n'y a donc rien à convertir. Le convertisseur commence par construire le projet. Puis un vrai navigateur parcourt chaque route pendant qu'un enregistreur observe. Le résultat est un HTML plat par route, exactement ce dont la suite du processus a besoin. Un projet plus récent sur TanStack Start rend déjà ses pages sur le serveur ; le convertisseur le construit quand même et parcourt chaque route de la même façon.
Ce que l'enregistreur capture
- L'état qui n'existe qu'après l'exécution du JavaScript. Accordéons ouverts, contenu des menus déroulants, classes modifiées par un script. L'enregistreur les stocke comme données sur les éléments, et un petit runtime générique les rejoue. Personne ne les réécrit de mémoire.
- Les seuils de défilement, au pixel près. Un en-tête qui change à
scrollY > 40utilise un nombre que quelqu'un a choisi arbitrairement. L'enregistreur le trouve et calcule exactement où il se situe. Une estimation arrondie changerait l'en-tête au mauvais moment, pour toujours. - Les relations « un seul ouvert à la fois ». Vous ouvrez A, puis B. A s'est-il fermé ? Enregistrer chaque élément seul ne permet pas de le savoir, donc l'enregistreur le teste à part.
- Les animations au défilement sont conservées. L'enregistreur les capture, et le thème les rejoue exactement comme l'original. Le contenu reste visible sans JavaScript, un élément n'est masqué que pendant l'exécution du runtime, et avec
prefers-reduced-motionle thème saute l'animation. Nous mesurons la correspondance 1:1 au repos, une fois les animations terminées.
Ce qu'il ne simule pas
- Le comportement qu'il n'a pas pu enregistrer va sur une liste. Chaque page a la sienne. Lisez-la.
Cette étape a sa propre vérification, car aucune vérification ultérieure ne peut la voir. Le convertisseur fait une capture d'écran de chaque route en direct et la compare à la version statique enregistrée, à 1440, 820 et 390 pixels de large. S'il y a une différence, l'étape échoue. Toutes les étapes suivantes mesurent l'écart entre cette version statique et WordPress, donc un défaut créé ici leur échapperait à toutes.
La revue à ne pas sauter
Quand les vérifications automatiques se terminent, la conversion n'est pas encore finie. Le convertisseur place chaque page dans une image à côté de son original, et vous lisez chacune de haut en bas.
Lors d'une conversion, toute une section plus bas dans la page manquait, et la comparaison des pixels n'indiquait que 0,4 % d'écart. Cette page passe la vérification sans la section. Par nature, les vérifications automatiques ne voient pas trois sortes de défauts. Il y a d'abord un élément interactif qui a l'air parfait mais ne fait rien. Ensuite vient une valeur codée en dur, reprise de la seule page dont un template est issu. Le troisième défaut, c'est tout ce qui n'apparaît qu'après un défilement, un clic ou l'envoi d'un formulaire.
Vérifiez l'apparence, et vérifiez aussi que le contenu se modifie. Une page peut correspondre au pixel près sans que son propriétaire puisse modifier sa FAQ ou sa grille de fonctionnalités. Nous l'avons vu en direct : un accordéon de cinq questions avait l'air identique, mais aucun éditeur ne le proposait. Une revue qui ne regardait que l'apparence l'a laissé passer. Pour chaque page, demandez-vous donc si chaque groupe répété et chaque bloc de texte se modifie depuis wp-admin.
Installer le thème
Votre dossier de projet reçoit un ZIP du thème et, à côté, CONVERSION-REPORT.md. Rien d'autre. Le dossier de travail avec la construction se trouve hors de votre projet, dans un dossier de cache, donc votre dépôt reste propre. Le rapport fait exception, parce qu'il s'adresse à vous. Il liste ce que la conversion a couvert, ce que la revue a trouvé, chaque avertissement (y compris les acceptables) et ce qui reste ouvert.
Dans WordPress, allez dans Apparence → Thèmes → Ajouter un thème → Téléverser un thème, choisissez le ZIP et activez-le. Le thème est autonome. Pages, blog, formulaires, menus, SEO et redirections font tous partie de son propre code. Il n'a besoin d'aucune extension pour fonctionner et ne contacte jamais aucun de nos serveurs.
Modifier le site WordPress issu de Lovable : trois voies
Les articles de blog deviennent des articles WordPress ordinaires, que vous écrivez tout de suite dans l'éditeur de blocs. Le texte des pages reste dans votre HTML, et pour le modifier il existe deux options à connaître. L'une d'elles est un constructeur de pages.
| Voie | Ce que vous obtenez | Ce que cela vous coûte |
|---|---|---|
| Le thème seul | Votre code, inchangé. Aucune extension, aucune dépendance, rien à renouveler. Les articles passent par l'éditeur de blocs. | Sans extension, le texte des pages se modifie dans le HTML. Si le client veut le modifier lui-même, Visual Edit s'en charge (Lite est gratuit). |
| Visual Edit, notre extension | Vous cliquez sur un titre directement dans la page, tapez par-dessus et enregistrez. Vous modifiez textes, images, liens, formulaires et menus là où ils sont, et le code reste tel quel. Lite est gratuit et ne demande aucune clé. | C'est une extension de plus installée sur WordPress. Lite garde 10 étapes d'historique et n'a pas de chat IA. Pro coûte 59 € par an. |
| Elementor ou un autre constructeur de pages |
Quiconque connaît Elementor peut réorganiser la page seul, et beaucoup de gens le connaissent. Pour un client qui changera lui-même la mise en page, cette familiarité a de la valeur. | Le code devient des widgets du constructeur et n'est plus le vôtre. Le site ne peut alors plus s'afficher sans Elementor, et vous héritez de sa structure, de son CSS et de ses mises à jour. |
Si vous convertissez pour que le design survive, un constructeur de pages est justement ce qui le détruit. Transférer un design à la main dans un constructeur est l'étape après laquelle le site ne ressemble plus au design, et c'est pour cela que ce convertisseur existe. Mais si le design n'est qu'un point de départ et que le client en refera la moitié au prochain trimestre de toute façon, donnez-lui Elementor.
Lite ou Pro, si vous choisissez Visual Edit
| Lite (gratuit) | Pro | |
|---|---|---|
| Modification du contenu au clic | ✓ | ✓ |
| Formulaires, menus, champs SEO | ✓ | ✓ |
| Modification via le chat IA | – | ✓, avec votre propre clé API |
| Export du thème | – | ✓ |
| Protection des formulaires par Turnstile | – | ✓ |
| Retouche d'images par IA et animations à partir d'images | – | ✓ |
| Historique des modifications | 10 étapes | 300 étapes |
Le chat IA de Pro fonctionne avec votre propre clé API. Nous ne vous vendons pas de tokens, et vous réglez leur coût directement auprès de votre fournisseur.
Lovable ou WordPress ? Pas besoin de choisir
On présente souvent la question comme un choix entre les deux. Pour un site de contenu, ce n'est pas forcément le cas. Dans Lovable, vous faites un design vite. Dans WordPress, un site vit des années et quelqu'un d'autre le modifie. La conversion garde ce que vous avez fait dans Lovable et fait passer le site du côté WordPress. Le thème tourne sur n'importe quel hébergement WordPress, donc le site n'a plus à vivre là où vous l'avez construit.
Ce qui part, c'est le site web : pages, blog, formulaires, menus, SEO et redirections. Ce qui ne part pas, c'est l'application derrière : connexion des utilisateurs, base de données et appels à votre propre API. Si votre projet Lovable est surtout cela, gardez-le dans Lovable. Une boutique se situe entre les deux. Avec une licence Pro, son catalogue devient du WooCommerce, comme pour Terra Studios.
Combien coûte la conversion de Lovable en WordPress et ce qu'elle refuse
L'offre gratuite est ouverte à tous, sans clé ni inscription : trois conversions de cinq pages chacune et cinq relances au total. Les deux chiffres se comptent par adresse IP, donc un bureau qui partage une adresse reçoit un seul quota pour tout le monde. L'offre gratuite sert à essayer l'outil, aux sites personnels et aux projets non commerciaux.
Une licence Pro supprime la limite de pages et rend les conversions et les relances illimitées. Elle ajoute aussi l'étape qui transforme une boutique en WooCommerce. Cette étape n'existe pas du tout dans l'offre gratuite : l'app refuse d'emblée la conversion gratuite d'un site avec boutique, au lieu d'en faire la moitié. Pro coûte 49 € par mois ou 490 € par an, et les prix sont sur la page des tarifs. Pendant la bêta, le premier paiement est 30 % moins cher et la clé arrive par e-mail.
Deux refus sont bons à connaître à l'avance. Un projet React dont les routes n'existent que par enregistrement (/product/:id sans données à afficher) est une application web, pas un site à convertir. Le convertisseur le refuse ouvertement au lieu de livrer une instance quelconque du template. Et c'est une bêta : les vérifications attrapent la plupart des différences, pas toutes. C'est pourquoi la revue page par page fait partie du processus et n'est pas une finition facultative.
Un guide pas à pas de tout le processus se trouve dans la documentation de l'app html2wp. Les trois conversions Lovable que vous pouvez ouvrir des deux côtés sont dans l'exemple au début de cet article.