html2wp / Blog / Lovable naar WordPress
Lovable naar WordPress: een project omgezet naar een echt thema
Lovable naar WordPress omzetten is hetzelfde werk als HTML omzetten naar WordPress, met één extra stap. Een ouder Lovable-project is een React-app, dus de HTML ervan bevat niets om om te zetten: de pagina verschijnt pas in de browser, als de JavaScript draait. Nieuwere projecten (TanStack Start, sinds mei 2026) renderen hun pagina's op de server, en html2wp zet beide soorten op dezelfde manier om. Deze handleiding brengt je van zo'n project naar een WordPress-thema dat jouw code bevat, geen nagebouwde versie ervan. Elke stap komt uit een echte conversie, en je kunt beide kanten ervan openen.
Een voorbeeld van Lovable naar WordPress, open aan beide kanten
Alles hieronder beschrijft een conversie die we echt hebben gedraaid. Het origineel is een Lovable-app: bruce-banner.lovable.app, een fotografieportfolio. Het resultaat is bruce.html2wp.dev, dat op WordPress draait. In het beheer kom je via /wp-admin met de gebruikersnaam demo en het wachtwoord demo.
De conversie leverde vijf pagina's en vijf berichten op, op het thema bruce-banner. Dat past in de gratis versie, die tot vijf pagina's per conversie omzet en geen sleutel nodig heeft. Open beide sites naast elkaar voordat je verder leest. Dit artikel gaat over het verschil tussen de twee, zodat je het zelf kunt meten.
Nog twee Lovable-conversies staan op dezelfde manier open. Eerst werd spark-remix-kindred.lovable.app tot terra.html2wp.dev, een shop voor breimode op WooCommerce. Daarna werd bloom-echo-remix.lovable.app tot soria.html2wp.dev, de site van een trouwfotograaf. Op alle drie is de login voor het WordPress-beheer demo / demo.
Wat “1:1” hier precies betekent
De code die de Lovable-app in de browser opbouwt, is dezelfde code die in het thema komt. Niemand bouwt je secties na als widgets van een page builder, dus je krijgt nooit een benadering van het ontwerp, pagina voor pagina. Elke stap hieronder volgt daaruit.
Wat je computer nodig heeft om Lovable naar WordPress om te zetten
De build, het browserwerk en alle controles draaien op je machine. Alleen de gebouwde uitvoer gaat naar de dienst die het thema genereert. Dit is dus geen webdienst waar je een ZIP uploadt, en er zijn vereisten die je vooraf moet kennen:
- Node 20 of nieuwer voor de build en de lokale scripts.
- Python 3 met de pakketten Playwright en Pillow. Playwright bestuurt een echte browser, en zo wordt een React-app HTML.
- Docker met het commando
docker compose. Het start een tijdelijke WordPress op je computer, en de converter controleert het thema daar voordat jij het ziet. - php-cli, omdat elk PHP-bestand een syntaxcontrole krijgt voordat het in de ZIP gaat.
jq,curl,bashentar. De WordPress waar het thema op komt, moet versie 6.6 of nieuwer zijn.
De plugin controleert dit allemaal in de eerste stap en drukt twee lijsten af. Lijst één toont wat hij zelf in je eigen mappen kan installeren. Lijst twee toont waar jij over beslist: Docker, een nieuwere Node en Docker starten. Die tweede groep installeert hij nooit achter je rug om.
Docker verrast mensen het meest
Andere converters hebben het niet nodig, omdat ze deze stap overslaan. Hier installeert de converter het gegenereerde thema in een echte WordPress en test hij het daar. Daarvoor dienen de browser en de container. Zoek je een tool van vijf minuten in de browser, dan is dit hem niet.
De plugin installeren
We publiceren de plugin twee keer, één keer voor elke agent. De scripts en het versienummer zijn voor Claude Code en Codex hetzelfde. Kies degene die je gebruikt.
Claude Code
/plugin marketplace add iOSDevSK/html2wp-cc-plugin /plugin install html2wp@html2wp
Daarna, één keer, in een terminal:
python3 -m playwright install chromium
Codex
codex plugin marketplace add iOSDevSK/html2wp-codex-plugin codex plugin add html2wp@html2wp
Voor de gratis versie hoef je verder niets in te stellen: geen sleutel, geen registratie, geen kaart. Werk je liever niet in een terminal, dan kun je dezelfde conversie draaien in de html2wp-desktop-app (een handleiding met screenshots).
Zo krijg je je Lovable-project op je schijf
Het adres van een live site is geen ondersteunde invoer, en dat is met opzet. Een kopie van een gepubliceerde pagina bewaart alleen het weergegeven resultaat. Ze verliest wat de broncode weet: welke routes er bestaan, wat de componenten zijn en wat de build oplevert.
De invoer is dus een map. Lovable synchroniseert je project met een GitHub-repository. Koppel die, clone hem, en je hebt het project lokaal. Hoe de interface van Lovable er deze maand ook uitziet, de repository is wat je wilt: dezelfde bestanden waaruit Lovable de site bouwt.
git clone https://github.com/<you>/<your-lovable-project>.git cd <your-lovable-project>
Je hoeft niet eerst npm install of een build te draaien. Dat doet de conversie zelf.
Zeg “convert this project”
Typ in die map, met je agent open:
/html2wp:html2wp
convert this project
Codex heeft geen slashcommando. Zeg er in plaats daarvan convert this project into a verified WordPress block theme tegen, en het vindt de skill zelf. Met Claude Code of Codex is die zin de hele instructie. Je schrijft geen configuratiebestand en je kiest geen buildcommando.
Flash duurt ongeveer 30 minuten en Full ongeveer een uur, afhankelijk van het aantal pagina's en de snelheid van je computer. Het loopt grotendeels zonder toezicht en meldt na elke stap waar het is, dus verwacht geen stilte.
Wat er met de React gebeurt als je Lovable naar WordPress omzet
Dit is de stap die een Lovable-project toevoegt.
Een oudere Lovable-app (React en Vite) heeft één index.html. De body daarvan is een leeg element waarin de React-app wordt geladen, plus een scripttag, dus er valt niets om te zetten. Eerst bouwt de converter het project. Daarna loopt een echte browser door elke route terwijl een recorder meekijkt. Het resultaat is platte HTML per route, precies wat de rest van het proces nodig heeft. Een nieuwer project op TanStack Start rendert zijn pagina's al op de server. De converter bouwt het toch en loopt op dezelfde manier door elke route.
Wat de recorder vastlegt
- Toestanden die pas bestaan als JavaScript draait. Geopende accordeons, de inhoud van uitklapmenu's, classes die een script wijzigt. De recorder slaat ze op als data op de elementen, en een kleine generieke runtime speelt ze terug. Niemand schrijft ze uit het hoofd over.
- Scrolldrempels, tot op de pixel. Een header die verandert bij
scrollY > 40gebruikt een getal dat iemand heeft verzonnen. De recorder vindt het en bepaalt precies waar het ligt. Een afgeronde gok zou de header voorgoed op het verkeerde moment laten veranderen. - Relaties van het type “er kan er maar één open zijn”. Je opent A, daarna B. Ging A dicht? Elk element apart opnemen kan dat niet zien, dus de recorder test het afzonderlijk.
- Animaties bij het scrollen blijven bestaan. De recorder legt ze vast, en het thema speelt ze precies zo af als het origineel. Inhoud blijft zichtbaar zonder JavaScript, een element verbergt zich alleen zolang de runtime draait, en met
prefers-reduced-motionslaat het thema de animatie over. De 1:1-overeenkomst meten we in rust, als de animaties klaar zijn.
Wat de recorder niet nadoet
- Gedrag dat hij niet kon opnemen, komt op een lijst. Elke pagina heeft een eigen lijst. Lees hem.
Deze stap heeft een eigen controle, omdat geen latere controle hem kan zien. De converter maakt van elke route live een screenshot en vergelijkt die met de statische opname op 1440, 820 en 390 pixels breed. Verschillen ze, dan faalt de stap. Elke latere stap meet vanaf de opname tot WordPress, dus een fout die hier ontstaat, zou aan alle controles ontsnappen.
De controle die je niet kunt overslaan
Als de automatische controles klaar zijn, is de conversie nog niet voorbij. De converter zet elke pagina in één afbeelding naast het origineel, en jij leest ze allemaal van boven tot onder.
Bij één conversie ontbrak een hele sectie lager op de pagina, en de pixelvergelijking gaf maar 0,4% verschil. Die pagina komt zonder de sectie door de controle. Automatische controles kunnen van nature drie soorten fouten niet zien. De eerste is een bedieningselement dat perfect lijkt maar niets doet. Een tweede is een waarde die is vastgezet vanuit de ene pagina waar een sjabloon vandaan kwam. Ten derde is er alles wat pas na scrollen, klikken of het versturen van een formulier zichtbaar wordt.
Controleer ook of je de inhoud kunt bewerken, niet alleen of hij er goed uitziet. Een pagina kan tot op de pixel kloppen terwijl de eigenaar de FAQ of het raster met functies toch niet kan bewerken. We zagen het live: een accordeon met vijf vragen zag er identiek uit, maar geen enkele editor bood hem aan. Een controle die alleen naar het uiterlijk keek, liet hem door. Vraag je dus bij elke pagina af of je elke herhalende groep en elk tekstblok vanuit wp-admin kunt bewerken.
Het thema installeren
Je projectmap krijgt een ZIP met het thema en daarnaast CONVERSION-REPORT.md. Verder niets. De werkmap met de build staat buiten je project, in een cachemap, zodat je repository schoon blijft. Het rapport is de uitzondering, want de lezer ervan ben jij. Het noemt wat de conversie omvatte, wat de controle vond, elke waarschuwing (ook de aanvaardbare) en wat er nog openstaat.
Ga in WordPress naar Weergave → Thema's → Nieuw thema toevoegen → Thema uploaden, kies de ZIP en activeer hem. Het thema staat op zichzelf. Pagina's, blog, formulieren, menu's, SEO en redirects zijn allemaal eigen code. Het heeft geen plugin nodig om te draaien en maakt nooit contact met een server van ons.
De site bewerken na de omzetting van Lovable naar WordPress: drie routes
Blogberichten worden gewone WordPress-berichten, die je meteen in de blokeditor schrijft. De tekst van de pagina's blijft in je HTML. Om die zonder code te bewerken, zijn er twee opties die het kennen waard zijn. Een daarvan is een page builder.
| Route | Wat je krijgt | Wat het je kost |
|---|---|---|
| Alleen het thema | Je code, onveranderd. Geen plugin, geen afhankelijkheid, niets te verlengen. Berichten schrijf je in de blokeditor. | Zonder plugin verander je de tekst van pagina's in de HTML. Wil de klant die zelf bewerken, dan doet Visual Edit dat (Lite is gratis). |
| Visual Edit, onze plugin | Je klikt direct op de pagina op een kop, typt eroverheen en slaat op. Je bewerkt tekst, afbeeldingen, links, formulieren en menu's waar ze staan, en de code blijft zoals ze was. Lite is gratis en heeft geen sleutel nodig. | Het is één plugin extra in WordPress. Lite bewaart 10 stappen geschiedenis en heeft geen AI-chat. Pro kost € 59 per jaar. |
| Elementor of een andere page builder |
Wie Elementor kent, kan de pagina zelf herschikken, en veel mensen kennen het. Voor een klant die de lay-out zelf gaat veranderen, heeft die bekendheid waarde. | De code wordt nagebouwd als widgets van de builder, dus ze is niet meer van jou. Daarna kan de site niet meer zonder Elementor worden weergegeven, en je erft de structuur, de CSS en de updates ervan. |
Zet je om zodat het ontwerp overeind blijft, dan is een page builder precies wat het vernietigt. Een ontwerp met de hand in een builder overzetten is de stap waarna de site er niet meer uitziet als het ontwerp, en daarom bestaat deze converter. Is het ontwerp alleen een vertrekpunt en bouwt de klant volgend kwartaal toch de helft om, geef hem dan gerust Elementor.
Lite of Pro, als je voor Visual Edit kiest
| Lite (gratis) | Pro | |
|---|---|---|
| Inhoud bewerken met een klik | ✓ | ✓ |
| Formulieren, menu's, SEO-velden | ✓ | ✓ |
| Bewerken via AI-chat | – | ✓, met je eigen API-sleutel |
| Thema-export | – | ✓ |
| Formulierbeveiliging met Turnstile | – | ✓ |
| Afbeeldingen bewerken met AI en animaties uit afbeeldingen | – | ✓ |
| Bewerkgeschiedenis | 10 stappen | 300 stappen |
De AI-chat in Pro draait op je eigen API-sleutel. We verkopen je geen tokens, en de kosten van het gebruik reken je direct af met je provider.
Lovable of WordPress? Je hoeft niet te kiezen
Meestal wordt het als het een of het ander voorgesteld. Voor een contentsite hoeft dat niet. In Lovable maak je snel een ontwerp. In WordPress leeft een site jarenlang en bewerkt iemand anders hem. De conversie houdt het eerste en verhuist het tweede. Het thema draait op elke WordPress-hosting, dus de site hoeft niet meer te wonen waar je hem bouwde.
Wat verhuist, is de website: pagina's, blog, formulieren, menu's, SEO en redirects. Wat niet verhuist, is de applicatie erachter: inloggen, de database en aanroepen naar je eigen API. Bestaat je Lovable-project vooral daaruit, houd het dan in Lovable. Een shop zit ertussenin. Met een Pro-licentie wordt de catalogus WooCommerce, zoals bij Terra Studios.
Wat de omzetting van Lovable naar WordPress kost en wat de converter weigert
De gratis versie staat open voor iedereen, zonder sleutel en zonder registratie: drie conversies van elk vijf pagina's en in totaal vijf herhaalde runs. Beide aantallen tellen per IP-adres, dus een kantoor dat één adres deelt, krijgt één tegoed voor iedereen. De gratis versie is om de tool te proberen, voor persoonlijke sites en voor niet-commercieel werk.
Een Pro-licentie haalt de paginalimiet weg en maakt conversies en herhaalde runs onbeperkt. Ze voegt ook de stap toe die een shop omzet naar WooCommerce. Die stap zit helemaal niet in de gratis versie: de app weigert een gratis conversie van een site met een shop volledig, in plaats van de helft te doen. Pro kost € 49 per maand of € 490 per jaar, en de prijzen staan op de prijspagina. Tijdens de bèta is de eerste betaling 30% goedkoper, en de sleutel komt per e-mail.
Twee weigeringen zijn goed om vooraf te kennen. Een React-project waarvan de routes alleen per record bestaan (/product/:id zonder gegevens om weer te geven), is een webapp en geen site om om te zetten. De converter weigert het openlijk in plaats van één willekeurig exemplaar van de sjabloon op te leveren. En dit is een bèta: de controles vangen de meeste verschillen op, niet allemaal. Daarom hoort de controle pagina voor pagina bij het proces en is ze geen optionele afwerking.
Een handleiding stap voor stap voor het hele proces staat in de documentatie van de html2wp-app. De drie Lovable-conversies die je aan beide kanten kunt openen, staan in het voorbeeld aan het begin van dit artikel.