Editor Vizual

Apasă pe elemente pentru a edita text, culori, spațiere, fonturi și altele. Ideal pentru ajustări mici; folosește chat-ul pentru modificări mai ample.

Editorul Vizual îți permite să modifici interfața aplicației tale apăsând pe elemente și editându-le proprietățile direct. Activează-l comutând pe modul Visual din bara de instrumente a builder-ului.

Cum funcționează

Comută pe modul Visual în bara de instrumente (alături de Preview, Code și Dashboard)
Trece cursorul peste elemente în previzualizare — acestea se evidențiază cu un contur
Apasă pe un element pentru a-l selecta
Editează proprietățile în panoul lateral: text, culori, spațiere, fonturi, borduri, imagini, efecte

Modificările sunt aplicate instantaneu în previzualizare și scrise în fișierele sursă. Folosește butonul Reset last edit din panoul lateral pentru a reveni la ultima modificare de proprietate.

Ce pot edita?

Text — Editează conținutul direct
Dimensiunea fontului — xs, sm, base, lg, xl etc.
Grosimea fontului — thin, light, normal, medium, semibold, bold, extrabold
Familia de fonturi — Geist, Inter, Montserrat, Noto Serif, Geist Mono, Fira Code, JetBrains Mono
Stilul fontului — Comutator pentru italic
Alinierea textului — left, center, right, justify
Culoarea textului — Orice culoare Tailwind
Culoarea fundalului — Orice culoare Tailwind
Spațiere — Padding și margin pe toate laturile
Bordură — Lățime, culoare și rază (disponibilă pe elementele container fără conținut text)
Imagine — Înlocuiește cu o fotografie de stock sau încarcă propria ta imagine (se aplică elementelor img și imaginilor de fundal)
Efecte — Umbră și opacitate

Anulare / Refacere

Folosește Cmd+Z (Mac) sau Ctrl+Z (Windows) pentru a anula modificările. Cmd+Shift+Z / Ctrl+Shift+Z pentru a reface.

Paleta paginii

Editorul Vizual analizează pagina ta și afișează toate culorile Tailwind și proprietățile CSS personalizate deja utilizate. Când deschizi selectorul de culori pentru elementul selectat, poți alege din această paletă a paginii pentru a rămâne consistent cu sistemul de design existent, fără să ghicești coduri hex.

Întreabă AI-ul despre un element selectat

Pentru ajustări pe care editorul de proprietăți nu le poate exprima, tastează un prompt scurt în câmpul Ask AI din partea de jos a panoului lateral. Elementul selectat este transmis ca și context, astfel că prompturi precum „fă acest card mai compact” sau „adaugă o stare hover cu o ridicare subtilă” funcționează fără să fie nevoie să descrii care element vrei să modifici.

Elemente statice vs. dinamice

Editorul Vizual funcționează cel mai bine pe elemente statice, unde className și conținutul text sunt șiruri de caractere literale în JSX. Pentru elementele dinamice (className-uri calculate, randare condiționată, expresii), editorul trece automat la chat-ul AI cu un prompt structurat.

Când ar trebui să folosesc Editorul Vizual?

Editorul Vizual este ideal pentru ajustări mici și rapide:

Corectarea unei greșeli de tipar
Ajustarea spațierii
Schimbarea unei culori
Actualizarea textului unui buton

Pentru modificări mai ample (secțiuni noi, restructurări de layout, funcționalități noi), folosește în schimb chat-ul AI.

Cum salvez modificările?

Modificările sunt salvate automat când editezi o proprietate. Fișierul este scris în runtime-ul tău și committed atunci când AI-ul sau tu creați un commit.

Întrebări frecvente

Pot anula editările vizuale?

Da. Folosește Cmd+Z / Ctrl+Z pentru a anula. Editorul Vizual își menține propriul istoric de anulare/refacere.

De ce pot edita unele elemente, dar nu altele?

Atributele de text static și className pot fi editate direct. Valorile dinamice sau calculate (template literals, expresii ternare, apeluri de funcții) trec automat la chat-ul AI.

Care este diferența dintre Editorul Vizual și Editorul de Cod?

Instrument	Ideal pentru
Visual Editor	Modificări rapide de proprietăți (text, culori, spațiere) prin apăsare
Code Editor	Editarea completă a codului sursă cu VS Code
AI Chat	Modificări complexe, funcționalități noi, depanare