Visual Editor

Dă click pe elemente pentru a edita text, culori, spațiere, fonturi și multe altele. Ideal pentru modificări mici; folosește chat-ul pentru schimbări mai mari.

Visual Editor îți permite să modifici interfața aplicației dând click pe elemente și editând proprietățile acestora direct. Activează-l comutând la modul Visual din bara de instrumente a builder-ului.

Cum funcționează

Comută la modul Visual — este un sub-mod al modului Preview din bara de instrumente (bara are două segmente: Preview și Admin)
Trece cu cursorul peste elementele din preview — acestea se evidențiază cu un overlay
Dă click 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 instant în preview și scrise în fișierele sursă. Folosește butonul Reset last edit din panoul lateral pentru a anula 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 — Comutare italic
Alinierea textului — stânga, centru, dreapta, justify
Culoarea textului — Orice culoare Tailwind
Culoarea fundalului — Orice culoare Tailwind
Spațiere — Padding și margin pe toate laturile
Bordură — Grosime, culoare și rază (disponibil pentru elementele container fără conținut text)
Imagine — Înlocuiește cu o fotografie din stoc prin căutare sau încarcă propria 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

Visual Editor analizează pagina ta și afișează toate culorile Tailwind și proprietățile CSS personalizate deja utilizate. Când deschizi selectorul de culoare pentru elementul selectat, poți alege din această paletă a paginii pentru a păstra coerența cu sistemul de design existent, fără să fie nevoie 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, scrie un prompt scurt în câmpul Ask AI din partea de jos a panoului lateral. Elementul selectat este transmis ca și context, astfel încât 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 ce element vizezi.

Elemente statice vs. dinamice

Visual Editor 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 revine automat la chat-ul AI cu un prompt structurat.

Când ar trebui să folosesc Visual Editor?

Visual Editor este ideal pentru ajustări mici și rapide:

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

Pentru modificări mai mari (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, iar modificarea este inclusă în istoricul versiunilor la următorul tur al builder-ului care face commit.

Întrebări frecvente

Pot anula modificările vizuale?

Da. Folosește Cmd+Z / Ctrl+Z pentru a anula. Visual Editor menține propriul său stack de anulare/refacere.

De ce pot edita unele elemente, dar nu pe altele?

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

Când ar trebui să folosesc Visual Editor în loc de chat-ul AI?

Instrument	Ideal pentru
Visual Editor	Modificări rapide de proprietăți (text, culori, spațiere) prin click
AI Chat	Modificări complexe, funcționalități noi, depanare

Acestea sunt singurele două modalități de a modifica aplicația ta — nu există un editor de cod. Vezi Editarea și accesarea codului tău.