Tutorials

Kann ich meine Lovable-Website manuell bearbeiten? Die vollständige Schritt-für-Schritt-Anleitung

Melden

Die kurze Antwort lautet: Ja, absolut!

Einer der größten Vorteile von Lovable (Lovable.dev) gegenüber herkömmlichen No-Code-Website-Baukästen ist, dass es sich um ein „Code-First“-Tool handelt. Lovable generiert sauberen, standardkonformen Code (in der Regel React, TypeScript, Tailwind CSS und Vite). Du bist niemals in einem geschlossenen System gefangen.

In diesem Tutorial erfährst du, wie du deine Lovable-Website manuell bearbeiten kannst – von schnellen Änderungen direkt im Browser bis hin zum vollständigen Entwickler-Setup auf deinem eigenen Computer.

Methode 1: Direkte Bearbeitung im integrierten Code-Editor (Schnellste Methode)

Wenn du nur schnell einen Text anpassen, ein Bild austauschen oder eine CSS-Klasse (Tailwind) korrigieren möchtest, musst du die Plattform nicht einmal verlassen.

Schritt-für-Schritt:

  1. Projekt öffnen: Öffne dein gewünschtes Projekt in Lovable.
  2. Code-Ansicht aktivieren: Suche oben rechts oder in der Steuerleiste nach dem Code-Symbol (meist dargestellt als </> oder „Code“).
  3. Dateistruktur durchsuchen: Auf der linken Seite siehst du nun den Datei-Explorer.
    • Komponenten findest du meist unter: src/components/
    • Seiten liegen typischerweise unter: src/pages/
  4. Änderungen vornehmen: Klicke auf die entsprechende Datei (z. B. Index.tsx), suche die entsprechende Stelle und bearbeite den Code direkt im Browser.
  5. Vorschau prüfen: Sobald du die Datei speicherst, aktualisiert Lovable das Vorschaufenster sofort per Hot-Reloading.

Methode 2: Synchronisierung mit GitHub & lokales Bearbeiten (Für Entwickler empfohlen)

Wenn du komplexe Logik implementieren, externe APIs anbinden oder einfach deinen bevorzugten Editor (wie VS Code oder Cursor) nutzen möchtest, ist der GitHub-Export der beste Weg.

Schritt-für-Schritt:

1. Mit GitHub verbinden

  • Klicke in deinem Lovable-Projekt oben rechts auf „Export“ oder das GitHub-Symbol.
  • Verbinde deinen GitHub-Account und erstelle ein neues Repository für dein Projekt.
  • Lovable pusht nun den gesamten Quellcode automatisch in dieses Repository.

2. Projekt lokal klonen

Öffne dein Terminal und klone das Repository auf deinen Computer:

git clone https://github.com/DEIN-BENUTZERNAME/DEIN-PROJEKTNAME.git
cd DEIN-PROJEKTNAME

3. Abhängigkeiten installieren & Entwicklungsserver starten

Stelle sicher, dass du Node.js installiert hast. Führe dann folgende Befehle aus:

npm install
npm run dev

Jetzt läuft deine Website lokal unter http://localhost:5173 (Standard-Vite-Port).

4. Code manuell bearbeiten

  • Öffne das Projekt in VS Code oder deiner bevorzugten IDE.
  • Du kannst nun alle Dateien frei verändern, neue Bibliotheken (npm install ...) hinzufügen oder das Styling anpassen.

5. Änderungen zurück synchronisieren (Der Clou!)

Das Geniale an Lovable: Die Synchronisierung funktioniert in beide Richtungen.

  • Wenn du deine lokalen Änderungen über Git commitest und zu GitHub pushst:
    git add .
git commit -m "Manuelle Anpassung des Headers und der Logik"
git push origin main
  • Lovable erkennt die neuen Commits im GitHub-Repository und übernimmt deine manuellen Änderungen automatisch wieder in den Prompt-Kontext.

Methode 3: Der Hybrid-Weg (Visueller Selektor + Manueller Feinschliff)

Manchmal weiß man nicht genau, in welcher Datei eine bestimmte Komponente liegt. Hier hilft der visuelle Inspektionsmodus von Lovable:

  1. Klicke im Vorschaufenster auf das Auswahl-Werkzeug (Mauszeiger-Symbol / „Select Element“).
  2. Klicke direkt auf das Element auf deiner Website, das du ändern möchtest (z. B. einen Button).
  3. Lovable markiert das Element. Du hast nun zwei Möglichkeiten:
    • Klicke auf „View Code“, um direkt an die entsprechende Zeile im Code-Editor zu springen.
    • Gib einen Prompt ein, wenn du möchtest, dass die KI die manuelle Arbeit für diese spezifische Stelle übernimmt.

Best Practices für manuelle Änderungen in Lovable

Damit du und die KI harmonisch zusammenarbeiten, solltest du folgende Tipps beachten:

  • Tailwind CSS beibehalten: Lovable ist darauf trainiert, Styling über Tailwind-CSS-Klassen zu steuern. Versuche, Inline-Styles (style={{...}}) oder reine CSS-Dateien zu vermeiden, damit zukünftige KI-Prompts das Design nicht durcheinanderbringen.
  • Saubere Commits bei Git: Wenn du über GitHub arbeitest, pushe Änderungen in kleinen, verständlichen Paketen. Das hilft der KI, den Kontext deiner manuellen Änderungen später besser zu verstehen.
  • Vorsicht bei massiven Architektur-Änderungen: Wenn du die komplette Ordnerstruktur von Grund auf änderst, kann es passieren, dass die KI bei zukünftigen Prompts Probleme hat, die richtigen Dateien auf Anhieb zu finden.

Fazit

Lovable zwingt dich nicht, dich zwischen KI-Geschwindigkeit und voller Programmier-Kontrolle zu entscheiden. Du kannst deine Website jederzeit manuell bearbeiten – entweder für schnelle Korrekturen direkt im Browser oder über die vollwertige GitHub-Anbindung in deinem eigenen Entwickler-Setup.

0