Visual Editor

Klicke auf Elemente, um Text, Farben, Abstände, Schriften und mehr zu bearbeiten. Am besten für kleine Anpassungen; nutze den Chat für größere Änderungen.

Der Visual Editor ermöglicht es dir, die Benutzeroberfläche deiner App zu ändern, indem du auf Elemente klickst und deren Eigenschaften direkt bearbeitest. Wechsle im Builder-Toolbar in den Visual-Modus, um ihn zu aktivieren.

So funktioniert es

Wechsle im Toolbar in den Visual-Modus (neben Preview, Code und Dashboard)
Fahre mit der Maus über Elemente in der Vorschau — sie werden mit einem Overlay hervorgehoben
Klicke auf ein Element, um es auszuwählen
Bearbeite Eigenschaften im Seitenbereich: Text, Farben, Abstände, Schriften, Rahmen, Bilder, Effekte

Änderungen werden sofort in der Vorschau übernommen und in deine Quelldateien geschrieben. Verwende die Schaltfläche Reset last edit in der Seitenleiste, um die letzte Eigenschaftsänderung rückgängig zu machen.

Was kann ich bearbeiten?

Text — Inhalte direkt bearbeiten
Schriftgröße — xs, sm, base, lg, xl usw.
Schriftstärke — thin, light, normal, medium, semibold, bold, extrabold
Schriftfamilie — Geist, Inter, Montserrat, Noto Serif, Geist Mono, Fira Code, JetBrains Mono
Schriftstil — Kursiv-Umschalter
Textausrichtung — left, center, right, justify
Textfarbe — Beliebige Tailwind-Farbe
Hintergrundfarbe — Beliebige Tailwind-Farbe
Abstände — Padding und Margin auf allen Seiten
Rahmen — Breite, Farbe und Radius (verfügbar bei Container-Elementen ohne Textinhalt)
Bild — Durch ein Stockfoto ersetzen oder eigenes Bild hochladen (gilt für img-Elemente und Hintergrundbilder)
Effekte — Schatten und Deckkraft

Rückgängig / Wiederholen

Verwende Cmd+Z (Mac) oder Ctrl+Z (Windows), um Änderungen rückgängig zu machen. Cmd+Shift+Z / Ctrl+Shift+Z zum Wiederholen.

Seitenpalette

Der Visual Editor analysiert deine Seite und zeigt alle bereits verwendeten Tailwind-Farben und benutzerdefinierten CSS-Eigenschaften an. Wenn du die Farbauswahl für das ausgewählte Element öffnest, kannst du aus dieser Seitenpalette wählen, um konsistent mit deinem bestehenden Designsystem zu bleiben, anstatt Hex-Codes erraten zu müssen.

KI zu einem ausgewählten Element befragen

Für Anpassungen, die der Eigenschaften-Editor nicht abbilden kann, gib eine kurze Anfrage in das Ask AI-Eingabefeld am unteren Rand der Seitenleiste ein. Das ausgewählte Element wird als Kontext übergeben, sodass Anfragen wie „mach diese Karte kompakter” oder „füge einen Hover-Zustand mit einem dezenten Anhebe-Effekt hinzu” funktionieren, ohne dass du beschreiben musst, welches Element du meinst.

Statische vs. dynamische Elemente

Der Visual Editor funktioniert am besten mit statischen Elementen, bei denen className und Textinhalt als String-Literale im JSX vorliegen. Bei dynamischen Elementen (berechnete className-Werte, bedingtes Rendering, Ausdrücke) wechselt der Editor automatisch zum KI-Chat mit einem strukturierten Prompt.

Wann sollte ich den Visual Editor verwenden?

Der Visual Editor eignet sich am besten für kleine, schnelle Anpassungen:

Tippfehler korrigieren
Abstände anpassen
Eine Farbe ändern
Button-Text aktualisieren

Für größere Änderungen (neue Bereiche, Layout-Umstrukturierungen, neue Funktionen) verwende stattdessen den KI-Chat.

Wie speichere ich Änderungen?

Änderungen werden automatisch gespeichert, wenn du eine Eigenschaft bearbeitest. Die Datei wird in deine Runtime geschrieben und beim nächsten Commit — durch die KI oder durch dich — festgeschrieben.

FAQ

Kann ich visuelle Bearbeitungen rückgängig machen?

Ja. Verwende Cmd+Z / Ctrl+Z zum Rückgängigmachen. Der Visual Editor verwaltet seinen eigenen Rückgängig/Wiederholen-Stapel.

Warum kann ich manche Elemente bearbeiten, andere aber nicht?

Statische Text- und className-Attribute können direkt bearbeitet werden. Dynamische oder berechnete Werte (Template-Literale, ternäre Ausdrücke, Funktionsaufrufe) werden automatisch an den KI-Chat übergeben.

Was ist der Unterschied zwischen dem Visual Editor und dem Code Editor?

Werkzeug	Am besten geeignet für
Visual Editor	Schnelle Eigenschaftsänderungen (Text, Farben, Abstände) per Mausklick
Code Editor	Vollständige Quellcode-Bearbeitung mit VS Code
AI Chat	Komplexe Änderungen, neue Funktionen, Debugging