Visual Editor

Klicka på element för att redigera text, färger, mellanrum, typsnitt och mer. Bäst för små justeringar; använd chatten för större ändringar.

Med Visual Editor kan du ändra din apps gränssnitt genom att klicka på element och redigera deras egenskaper direkt. Växla till Visual-läget i builder-verktygsfältet för att aktivera det.

Hur det fungerar

Växla till Visual-läget — det är ett underläge till Preview i verktygsfältet (verktygsfältets två segment är Preview och Admin)
Håll muspekaren över element i förhandsgranskningen — de markeras med ett överlager
Klicka på ett element för att markera det
Redigera egenskaper i sidopanelen: text, färger, mellanrum, typsnitt, kanter, bilder, effekter

Ändringar tillämpas direkt i förhandsgranskningen och skrivs till dina källfiler. Använd knappen Reset last edit i sidopanelen för att ångra den senaste egenskapsändringen.

Vad kan jag redigera?

Text — Redigera innehåll direkt
Teckenstorlek — xs, sm, base, lg, xl, osv.
Teckensnittsvikt — thin, light, normal, medium, semibold, bold, extrabold
Teckensnittsfamilj — Geist, Inter, Montserrat, Noto Serif, Geist Mono, Fira Code, JetBrains Mono
Teckenstil — Kursiv-växling
Textjustering — vänster, centrerat, höger, marginaljustering
Textfärg — Valfri Tailwind-färg
Bakgrundsfärg — Valfri Tailwind-färg
Mellanrum — Padding och marginal på alla sidor
Kant — Bredd, färg och radie (tillgängligt på behållarelement utan textinnehåll)
Bild — Ersätt med en stockfotosökning eller ladda upp din egen bild (gäller img-element och bakgrundsbilder)
Effekter — Skugga och opacitet

Ångra / Gör om

Använd Cmd+Z (Mac) eller Ctrl+Z (Windows) för att ångra ändringar. Cmd+Shift+Z / Ctrl+Shift+Z för att göra om.

Sidpalett

Visual Editor analyserar din sida och lyfter fram alla Tailwind-färger och CSS-anpassade egenskaper som redan används. När du öppnar färgväljaren för det markerade elementet kan du välja från denna sidpalett för att hålla dig konsekvent med ditt befintliga designsystem, istället för att gissa hexkoder.

Fråga AI:n om ett markerat element

För justeringar som egenskapsredigeraren inte kan hantera kan du skriva en kort prompt i Ask AI-fältet längst ned i sidopanelen. Det markerade elementet skickas med som kontext, så promptar som “gör det här kortet mer kompakt” eller “lägg till ett hover-tillstånd med en subtil lyfteffekt” fungerar utan att du behöver beskriva vilket element du menar.

Statiska vs dynamiska element

Visual Editor fungerar bäst med statiska element där className och textinnehållet är strängliteraler i JSX:en. För dynamiska element (beräknade classNames, villkorlig rendering, uttryck) faller editorn automatiskt tillbaka till AI-chatten med en strukturerad prompt.

När bör jag använda Visual Editor?

Visual Editor passar bäst för små, snabba justeringar:

Rätta ett stavfel
Justera mellanrum
Ändra en färg
Uppdatera knapptext

För större ändringar (nya sektioner, layoutomstruktureringar, nya funktioner) bör du använda AI-chatten istället.

Hur sparar jag ändringar?

Ändringar sparas automatiskt när du redigerar en egenskap. Filen skrivs till din körningsmiljö och ändringen commit:as till din versionshistorik vid nästa builder-tur som commit:ar.

Vanliga frågor

Kan jag ångra visuella redigeringar?

Ja. Använd Cmd+Z / Ctrl+Z för att ångra. Visual Editor har sin egen ångra/gör om-historik.

Varför kan jag redigera vissa element men inte andra?

Statisk text och className-attribut kan redigeras direkt. Dynamiska eller beräknade värden (mallsträngar, ternära uttryck, funktionsanrop) faller automatiskt tillbaka till AI-chatten.

När bör jag använda Visual Editor istället för AI-chatten?

Verktyg	Passar bäst för
Visual Editor	Snabba egenskapsändringar (text, färger, mellanrum) genom att klicka
AI Chat	Komplexa ändringar, nya funktioner, felsökning

Det här är de enda två sätten att ändra din app — det finns ingen kodredigerare. Se Redigera och komma åt din kod.