Visual Editor

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

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

So funktioniert es

Wechsle in den Visual-Modus — er ist ein Untermodus von Preview in der Toolbar (die Toolbar hat zwei Segmente: Preview und Admin)
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 — Texte 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 — links, zentriert, rechts, Blocksatz
Textfarbe — Beliebige Tailwind-Farbe
Hintergrundfarbe — Beliebige Tailwind-Farbe
Abstände — Innen- und Außenabstände auf allen Seiten
Rahmen — Breite, Farbe und Radius (verfügbar bei Container-Elementen ohne Textinhalt)
Bild — Durch ein Stock-Foto aus der Suche ersetzen oder ein eigenes Bild hochladen (gilt für img-Elemente und Hintergrundbilder)
Effekte — Schatten und Deckkraft

Rückgängig machen / 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 Tailwind-Farben und benutzerdefinierten CSS-Eigenschaften an, die bereits verwendet werden. Wenn du den Farbwähler für das ausgewählte Element öffnest, kannst du aus dieser Seitenpalette auswählen, um konsistent mit deinem bestehenden Design-System zu bleiben, anstatt Hex-Codes zu erraten.

Die KI zu einem ausgewählten Element befragen

Für Anpassungen, die der Eigenschaften-Editor nicht abbilden kann, gib einen kurzen Prompt in das Ask AI-Eingabefeld am unteren Rand der Seitenleiste ein. Das ausgewählte Element wird als Kontext übergeben, sodass Prompts wie „mach diese Karte kompakter“ oder „füge einen Hover-Zustand mit einem subtilen Anheben hinzu“ funktionieren, ohne dass du das betreffende Element beschreiben musst.

Statische vs. dynamische Elemente

Der Visual Editor funktioniert am besten bei statischen Elementen, bei denen className und Textinhalt als String-Literale im JSX vorliegen. Bei dynamischen Elementen (berechnete className-Werte, bedingte Darstellung, 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
Schaltflächentext aktualisieren

Für größere Änderungen (neue Abschnitte, Layout-Umstrukturierungen, neue Funktionen) solltest du stattdessen den KI-Chat verwenden.

Wie speichere ich Änderungen?

Änderungen werden automatisch gespeichert, wenn du eine Eigenschaft bearbeitest. Die Datei wird in deine Laufzeitumgebung geschrieben, und die Änderung wird beim nächsten Builder-Vorgang, der einen Commit erstellt, in deinen Versionsverlauf übernommen.

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) wechseln automatisch zum KI-Chat.

Wann sollte ich den Visual Editor statt des KI-Chats verwenden?

Tool	Am besten geeignet für
Visual Editor	Schnelle Eigenschaftsänderungen (Text, Farben, Abstände) per Mausklick
AI Chat	Komplexe Änderungen, neue Funktionen, Debugging

Dies sind die einzigen beiden Möglichkeiten, deine App zu ändern — es gibt keinen Code-Editor. Siehe Code bearbeiten und darauf zugreifen.