html2wp / Blog / Lovable in WordPress
Lovable in WordPress: ein Projekt als echtes Theme
Lovable in WordPress umzuwandeln ist dieselbe Arbeit wie bei HTML, mit einem zusätzlichen Schritt. Ein älteres Lovable-Projekt ist eine React-App, also enthält sein HTML nichts, was sich konvertieren ließe: Die Seite erscheint erst im Browser, wenn das JavaScript läuft. Neuere Projekte (TanStack Start, seit Mai 2026) rendern ihre Seiten auf dem Server, und html2wp wandelt beide Arten gleich um. Diese Anleitung führt dich von so einem Projekt zu einem WordPress-Theme, das deinen Code enthält und keinen Nachbau davon. Jeder Schritt stammt aus einer echten Konvertierung, und du kannst beide Enden öffnen.
Ein Beispiel für Lovable in WordPress, an beiden Enden offen
Alles hier beschreibt eine Konvertierung, die wir wirklich durchgeführt haben. Das Original ist eine Lovable-App: bruce-banner.lovable.app, ein Fotografie-Portfolio. Das Ergebnis ist bruce.html2wp.dev und läuft auf WordPress. In den Admin-Bereich kommst du unter /wp-admin mit dem Benutzernamen demo und dem Passwort demo.
Die Konvertierung ergab fünf Seiten und fünf Beiträge auf dem Theme bruce-banner. Das passt in die Gratis-Version, die bis zu fünf Seiten pro Konvertierung umwandelt und keinen Schlüssel braucht. Öffne beide Websites nebeneinander, bevor du weiterliest. Dieser Artikel handelt vom Unterschied zwischen ihnen, also kannst du ihn selbst messen.
Zwei weitere Konvertierungen aus Lovable sind genauso offen. Aus spark-remix-kindred.lovable.app wurde terra.html2wp.dev, ein Shop für Strickmode auf WooCommerce. Aus bloom-echo-remix.lovable.app wurde soria.html2wp.dev, die Website einer Hochzeitsfotografin. Bei allen dreien lautet der Login für den WordPress-Admin demo / demo.
Was „1:1“ hier genau heißt
Der Code, den die Lovable-App im Browser baut, ist derselbe Code, der ins Theme kommt. Niemand baut deine Abschnitte als Widgets eines Page Builders nach, also bekommst du nie eine Annäherung an das Design, Seite für Seite. Jeder Schritt unten folgt daraus.
Was dein Computer braucht, um Lovable in WordPress umzuwandeln
Der Build, die Arbeit im Browser und alle Prüfungen laufen auf deinem Rechner. Nur die gebaute Ausgabe geht an den Dienst, der das Theme erzeugt. Das ist also kein Webdienst, bei dem du eine ZIP hochlädst, und es gibt Voraussetzungen, die du vorher kennen solltest:
- Node 20 oder neuer für den Build und die lokalen Skripte.
- Python 3 mit den Paketen Playwright und Pillow. Playwright steuert einen echten Browser, und so wird aus einer React-App HTML.
- Docker mit dem Befehl
docker compose. Er startet ein temporäres WordPress auf deinem Computer, und der Konverter prüft das Theme dort, bevor du es siehst. - php-cli, weil jede PHP-Datei eine Syntaxprüfung durchläuft, bevor sie in die ZIP kommt.
jq,curl,bashundtar. Das Ziel-WordPress muss Version 6.6 oder neuer sein.
Das Plugin prüft all das im ersten Schritt und gibt zwei Listen aus. Die erste zeigt, was es selbst in deinen eigenen Ordnern installieren kann. Die zweite zeigt, worüber du entscheiden musst: Docker, ein neueres Node und das Starten von Docker. Die zweite Gruppe installiert es nie hinter deinem Rücken.
Docker überrascht die meisten
Andere Konverter brauchen es nicht, weil sie diesen Schritt auslassen. Hier installiert der Konverter das erzeugte Theme in ein echtes WordPress und testet es dort. Dafür sind der Browser und der Container da. Suchst du ein Tool, das im Browser in fünf Minuten fertig ist, ist das hier nicht das richtige.
Das Plugin installieren
Wir veröffentlichen das Plugin zweimal, einmal für jeden Agenten. Die Skripte und die Versionsnummer sind für Claude Code und Codex gleich. Nimm das, was du nutzt.
Claude Code
/plugin marketplace add iOSDevSK/html2wp-cc-plugin /plugin install html2wp@html2wp
Dann einmal in einem Terminal:
python3 -m playwright install chromium
Codex
codex plugin marketplace add iOSDevSK/html2wp-codex-plugin codex plugin add html2wp@html2wp
Für die Gratis-Version musst du sonst nichts einrichten: kein Schlüssel, keine Registrierung, keine Karte. Arbeitest du lieber nicht im Terminal, kannst du dieselbe Konvertierung in der Desktop-App von html2wp ausführen (eine Anleitung mit Screenshots).
So kommt dein Lovable-Projekt auf deine Festplatte
Die Adresse einer Live-Website ist kein unterstützter Input, und das ist Absicht. Eine Kopie einer veröffentlichten Seite behält nur das gerenderte Ergebnis. Sie verliert, was der Quellcode weiß: welche Routen es gibt, welche Komponenten und was der Build erzeugt.
Der Input ist deshalb ein Ordner. Lovable synchronisiert dein Projekt mit einem GitHub-Repository. Verbinde es, klone es, und du hast das Projekt lokal. Wie die Oberfläche von Lovable diesen Monat auch aussieht, das Repository ist, was du willst: dieselben Dateien, aus denen Lovable die Website baut.
git clone https://github.com/<you>/<your-lovable-project>.git cd <your-lovable-project>
Du musst vorher weder npm install noch einen Build ausführen. Das erledigt die Konvertierung selbst.
Sag „convert this project“
Tippe in diesem Ordner, mit geöffnetem Agenten:
/html2wp:html2wp
convert this project
Codex hat keinen Slash-Befehl. Sag ihm stattdessen convert this project into a verified WordPress block theme, und es findet den Skill selbst. Mit Claude Code oder Codex ist dieser Satz die ganze Anweisung. Du schreibst keine Konfigurationsdatei und wählst keinen Build-Befehl.
Flash dauert etwa 30 Minuten und Full etwa eine Stunde, je nach Anzahl der Seiten und Tempo deines Computers. Es läuft meist ohne dich und meldet nach jedem Schritt, wo es steht. Rechne also nicht mit Stille.
Was mit dem React passiert, wenn du Lovable in WordPress umwandelst
Das ist der Schritt, den ein Lovable-Projekt hinzufügt.
Eine ältere Lovable-App (React und Vite) hat eine einzige index.html. Ihr Body ist ein leeres Element, in das sich die React-App einhängt, dazu ein Script-Tag. Es gibt also nichts zu konvertieren. Zuerst baut der Konverter das Projekt. Dann geht ein echter Browser jede Route durch, während ein Rekorder zusieht. Das Ergebnis ist flaches HTML pro Route, genau das, was der Rest des Ablaufs braucht. Ein neueres Projekt auf TanStack Start rendert seine Seiten schon auf dem Server. Der Konverter baut es trotzdem und geht jede Route genauso durch.
Was der Rekorder erfasst
- Zustände, die es erst gibt, wenn JavaScript läuft. Geöffnete Akkordeons, Inhalte von Dropdowns, Klassen, die ein Skript ändert. Der Rekorder speichert sie als Daten an den Elementen, und eine kleine generische Laufzeit spielt sie ab. Niemand schreibt sie aus dem Gedächtnis von Hand.
- Schwellen beim Scrollen, auf den Pixel genau. Ein Header, der sich bei
scrollY > 40ändert, nutzt eine Zahl, die sich jemand ausgedacht hat. Der Rekorder findet sie und ermittelt genau, wo sie liegt. Eine gerundete Schätzung würde den Header für immer im falschen Moment ändern. - Beziehungen nach dem Muster „nur eins kann offen sein“. Du öffnest A, dann B. Hat sich A geschlossen? Wer jedes Element einzeln aufnimmt, kann das nicht erkennen, also testet der Rekorder es separat.
- Animationen beim Hineinscrollen bleiben erhalten. Der Rekorder erfasst sie, und das Theme spielt sie genau wie das Original ab. Inhalte bleiben ohne JavaScript sichtbar, ein Element ist nur versteckt, während die Laufzeit läuft, und bei
prefers-reduced-motionlässt das Theme die Animation aus. Die 1:1-Übereinstimmung messen wir im Ruhezustand, wenn die Animationen fertig sind.
Was er nicht vortäuscht
- Verhalten, das er nicht aufnehmen konnte, kommt auf eine Liste. Jede Seite hat ihre eigene. Lies sie.
Dieser Schritt hat eine eigene Prüfung, weil keine spätere Prüfung ihn sehen kann. Der Konverter macht von jeder Route live einen Screenshot und vergleicht ihn mit der statischen Aufnahme bei 1440, 820 und 390 Pixeln Breite. Weichen sie ab, schlägt der Schritt fehl. Jeder spätere Schritt misst von der Aufnahme bis WordPress, also würde ein Fehler von hier an allen vorbeirutschen.
Die Durchsicht, die du nicht auslassen darfst
Wenn die automatischen Prüfungen fertig sind, ist die Konvertierung noch nicht vorbei. Der Konverter setzt jede Seite in einem Bild neben ihr Original, und du liest jedes davon von oben bis unten.
In einer Konvertierung fehlte ein ganzer Abschnitt weiter unten auf der Seite, und der Pixelvergleich zeigte nur 0,4 % Abweichung. Diese Seite besteht die Prüfung ohne den Abschnitt. Drei Arten von Fehlern können automatische Prüfungen ihrer Natur nach nicht sehen. Die erste ist ein Bedienelement, das perfekt aussieht, aber nichts tut. Die zweite ist ein Wert, der von der einen Seite fest übernommen wurde, aus der ein Template entstand. Die dritte ist alles, was erst nach Scrollen, Klicken oder dem Absenden eines Formulars sichtbar wird.
Prüfe außerdem, ob du die Inhalte bearbeiten kannst, nicht nur, ob sie richtig aussehen. Eine Seite kann auf den Pixel stimmen, und trotzdem kann der Eigentümer ihre FAQ oder ihr Raster mit Funktionen nicht bearbeiten. Das haben wir live gesehen: Ein Akkordeon mit fünf Fragen sah identisch aus, aber kein Editor bot es an. Eine Durchsicht, die nur auf das Aussehen schaute, ließ es durch. Frag dich also bei jeder Seite, ob du jede wiederkehrende Gruppe und jeden Textblock aus wp-admin bearbeiten kannst.
Das Theme installieren
Dein Projektordner bekommt eine Theme-ZIP und daneben CONVERSION-REPORT.md. Sonst nichts. Der Arbeitsordner mit dem Build liegt außerhalb deines Projekts in einem Cache-Ordner, damit dein Repository sauber bleibt. Der Bericht ist die Ausnahme, weil du sein Leser bist. Er listet, was die Konvertierung abgedeckt hat, was die Durchsicht gefunden hat, jede Warnung (auch die akzeptablen) und was noch offen ist.
Geh in WordPress zu Design → Themes → Theme hinzufügen → Theme hochladen, wähle die ZIP und aktiviere sie. Das Theme steht für sich. Seiten, Blog, Formulare, Menüs, SEO und Weiterleitungen sind alle sein eigener Code. Es braucht kein Plugin zum Laufen und spricht nie mit einem unserer Server.
Die Website nach dem Wechsel von Lovable in WordPress bearbeiten: drei Wege
Blogbeiträge werden normale WordPress-Beiträge, die du sofort im Block-Editor schreibst. Der Text der Seiten bleibt in deinem HTML. Um ihn ohne Code zu bearbeiten, gibt es zwei Optionen, die du kennen solltest. Eine davon ist ein Page Builder.
| Weg | Was du bekommst | Was es dich kostet |
|---|---|---|
| Nur das Theme | Dein Code, unverändert. Kein Plugin, keine Abhängigkeit, nichts zu verlängern. Beiträge schreibst du im Block-Editor. | Ohne Plugin änderst du den Text der Seiten im HTML. Will der Kunde ihn selbst bearbeiten, erledigt das Visual Edit (Lite ist kostenlos). |
| Visual Edit, unser Plugin | Du klickst direkt auf der Seite auf eine Überschrift, tippst darüber und speicherst. Texte, Bilder, Links, Formulare und Menüs bearbeitest du dort, wo sie sind, und der Code bleibt, wie er war. Lite ist kostenlos und braucht keinen Schlüssel. | Es ist ein weiteres Plugin in WordPress. Lite speichert 10 Schritte Verlauf und hat keinen KI-Chat. Pro kostet 59 € im Jahr. |
| Elementor oder ein anderer Page Builder |
Wer Elementor kennt, kann die Seite allein umbauen, und viele kennen es. Für einen Kunden, der das Layout selbst ändern wird, hat diese Vertrautheit ihren Wert. | Der Code wird zu Builder-Widgets und ist nicht mehr deiner. Danach kann die Website ohne Elementor nicht angezeigt werden, und du erbst seine Struktur, sein CSS und seine Updates. |
Konvertierst du, damit das Design überlebt, dann zerstört genau ein Page Builder es. Ein Design von Hand in einen Builder zu übertragen, ist der Schritt, nach dem die Website nicht mehr wie das Design aussieht. Genau deshalb gibt es diesen Konverter. Ist das Design aber nur ein Ausgangspunkt und baut der Kunde nächstes Quartal ohnehin die Hälfte um, dann gib ihm ruhig Elementor.
Lite oder Pro, wenn du Visual Edit nimmst
| Lite (kostenlos) | Pro | |
|---|---|---|
| Inhalte per Klick bearbeiten | ✓ | ✓ |
| Formulare, Menüs, SEO-Felder | ✓ | ✓ |
| Bearbeiten per KI-Chat | – | ✓, mit deinem eigenen API-Schlüssel |
| Theme-Export | – | ✓ |
| Formularschutz mit Turnstile | – | ✓ |
| Bildbearbeitung mit KI und Animationen aus Bildern | – | ✓ |
| Bearbeitungsverlauf | 10 Schritte | 300 Schritte |
Der KI-Chat in Pro läuft mit deinem eigenen API-Schlüssel. Wir verkaufen dir keine Tokens, und die Kosten für ihre Nutzung rechnest du direkt mit deinem Anbieter ab.
Lovable oder WordPress? Du musst dich nicht entscheiden
Meist wird es als Entweder-oder dargestellt. Für eine Website mit Inhalten muss es das nicht sein. In Lovable entsteht ein Design schnell. In WordPress lebt eine Website jahrelang, und jemand anderes bearbeitet sie. Die Konvertierung behält das Erste und verlagert das Zweite. Das Theme läuft auf jedem WordPress-Hosting, also muss die Website nicht mehr dort leben, wo du sie gebaut hast.
Was umzieht, ist die Website: Seiten, Blog, Formulare, Menüs, SEO und Weiterleitungen. Was nicht umzieht, ist die Anwendung dahinter: Anmeldung, die Datenbank und Aufrufe deiner eigenen API. Besteht dein Lovable-Projekt hauptsächlich daraus, lass es in Lovable. Ein Shop liegt dazwischen. Mit einer Pro-Lizenz wird sein Katalog zu WooCommerce, wie bei Terra Studios.
Was der Weg von Lovable in WordPress kostet und was abgelehnt wird
Die Gratis-Version steht allen offen, ohne Schlüssel und ohne Registrierung: drei Konvertierungen mit je fünf Seiten und insgesamt fünf erneute Läufe. Beide Zahlen gelten pro IP-Adresse, ein Büro mit einer gemeinsamen Adresse bekommt also ein Kontingent für alle. Die Gratis-Version ist zum Ausprobieren, für private Websites und für nicht kommerzielle Arbeit.
Eine Pro-Lizenz hebt das Seitenlimit auf und macht Konvertierungen und erneute Läufe unbegrenzt. Sie ergänzt auch den Schritt, der einen Shop zu WooCommerce macht. Diesen Schritt gibt es in der Gratis-Version gar nicht: Die App lehnt eine kostenlose Konvertierung einer Website mit Shop komplett ab, statt sie zur Hälfte auszuführen. Pro kostet 49 € im Monat oder 490 € im Jahr, die Preise stehen auf der Preisseite. Während der Beta ist die erste Zahlung 30 % günstiger, und der Schlüssel kommt per E-Mail.
Zwei Ablehnungen solltest du vorher kennen. Ein React-Projekt, dessen Routen nur pro Datensatz existieren (/product/:id ohne Daten zum Rendern), ist eine Web-App und keine Website zum Konvertieren. Der Konverter lehnt es offen ab, statt eine zufällige Instanz des Templates auszuliefern. Und das ist eine Beta: Die Prüfungen finden die meisten Abweichungen, nicht alle. Deshalb gehört die Durchsicht Seite für Seite zum Ablauf und ist kein optionaler Feinschliff.
Eine Schritt-für-Schritt-Anleitung für den ganzen Ablauf steht in der Dokumentation zur html2wp-App. Die drei Konvertierungen aus Lovable, die du an beiden Enden öffnen kannst, findest du im Beispiel am Anfang dieses Artikels.