Visuell redigerare

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

Den visuella redigeraren låter dig ändra appens gränssnitt genom att klicka på element och redigera deras egenskaper direkt. Växla till Visual-läget i verktygsfältet i Builder för att aktivera det.

Hur det fungerar

Växla till Visual-läget i verktygsfältet (bredvid Preview, Code och Dashboard)
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, avstånd, typsnitt, ramar, bilder och effekter

Ändringar tillämpas omedelbart 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
Teckensnittsstil — Kursiv växlingsknapp
Textjustering — left, center, right, justify
Textfärg — Valfri Tailwind-färg
Bakgrundsfärg — Valfri Tailwind-färg
Avstånd — Padding och marginal på alla sidor
Ram — Bredd, färg och radie (tillgängligt på containerelement utan textinnehåll)
Bild — Ersätt med en stockfotosökning eller ladda upp en egen bild (gäller img-element och bakgrundsbilder)
Effekter — Skugga och opacitet

Ångra / Göra 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

Den visuella redigeraren analyserar din sida och visar 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, i stället för att gissa hex-koder.

Fråga AI:n om ett markerat element

För justeringar som egenskapsredigeraren inte kan hantera skriver du en kort prompt i Ask AI-fältet längst ned i sidopanelen. Det markerade elementet skickas med som kontext, så prompts som “make this card more compact” eller “add a hover state with a subtle lift” fungerar utan att du behöver beskriva vilket element du menar.

Statiska kontra dynamiska element

Den visuella redigeraren fungerar bäst på statiska element där className och textinnehåll är strängliteraler i JSX:en. För dynamiska element (beräknade className-värden, villkorlig rendering, uttryck) faller redigeraren automatiskt tillbaka på AI-chatten med en strukturerad prompt.

När bör jag använda den visuella redigeraren?

Den visuella redigeraren är bäst lämpad för små, snabba justeringar:

Rätta ett stavfel
Justera avstånd
Byta en färg
Uppdatera knapptext

För större ändringar (nya sektioner, omstrukturering av layout, nya funktioner) använder du AI-chatten i stället.

Hur sparar jag ändringar?

Ändringar sparas automatiskt när du redigerar en egenskap. Filen skrivs till din körningsmiljö och committas när AI:n eller du skapar en commit.

Vanliga frågor

Kan jag ångra visuella redigeringar?

Ja. Använd Cmd+Z / Ctrl+Z för att ångra. Den visuella redigeraren har sin egen ångra/göra 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 på AI-chatten.

Vad är skillnaden mellan den visuella redigeraren och kodredigeraren?

Verktyg	Bäst för
Visual Editor	Snabba egenskapsändringar (text, färger, avstånd) via klick
Code Editor	Full källkodsredigering med VS Code
AI Chat	Komplexa ändringar, nya funktioner, felsökning