Visual Editor

Klikaj elementy, aby edytować tekst, kolory, odstępy, czcionki i wiele więcej. Najlepszy do drobnych poprawek; do większych zmian używaj czatu.

Visual Editor pozwala zmieniać interfejs swojej aplikacji poprzez klikanie elementów i bezpośrednie edytowanie ich właściwości. Przełącz się na tryb Visual w pasku narzędzi buildera, aby go aktywować.

Jak to działa

Przełącz się na tryb Visual — to podtryb Preview w pasku narzędzi (pasek narzędzi ma dwa segmenty: Preview i Admin)
Najedź kursorem na elementy w podglądzie — zostaną podświetlone nakładką
Kliknij element, aby go zaznaczyć
Edytuj właściwości w panelu bocznym: tekst, kolory, odstępy, czcionki, obramowania, obrazy, efekty

Zmiany są natychmiast widoczne w podglądzie i zapisywane do plików źródłowych. Użyj przycisku Reset last edit w panelu bocznym, aby cofnąć ostatnią zmianę właściwości.

Co mogę edytować?

Tekst — Edytuj treść bezpośrednio
Rozmiar czcionki — xs, sm, base, lg, xl itd.
Grubość czcionki — thin, light, normal, medium, semibold, bold, extrabold
Rodzina czcionek — Geist, Inter, Montserrat, Noto Serif, Geist Mono, Fira Code, JetBrains Mono
Styl czcionki — Przełącznik kursywy
Wyrównanie tekstu — do lewej, do środka, do prawej, justowanie
Kolor tekstu — Dowolny kolor Tailwind
Kolor tła — Dowolny kolor Tailwind
Odstępy — Padding i margin po wszystkich stronach
Obramowanie — Szerokość, kolor i zaokrąglenie (dostępne dla elementów kontenerowych bez treści tekstowej)
Obraz — Zastąp zdjęciem stockowym z wyszukiwarki lub prześlij własny obraz (dotyczy elementów img oraz obrazów tła)
Efekty — Cień i przezroczystość

Cofanie / Ponawianie zmian

Użyj Cmd+Z (Mac) lub Ctrl+Z (Windows), aby cofnąć zmiany. Cmd+Shift+Z / Ctrl+Shift+Z, aby je ponowić.

Paleta strony

Visual Editor analizuje Twoją stronę i wyświetla wszystkie kolory Tailwind oraz własne właściwości CSS już w niej używane. Po otwarciu próbnika kolorów dla zaznaczonego elementu możesz wybrać kolor z palety strony, zachowując spójność z istniejącym systemem projektowania — bez potrzeby zgadywania kodów hex.

Pytaj AI o zaznaczony element

W przypadku poprawek, których edytor właściwości nie obsługuje, wpisz krótki komunikat w pole Ask AI na dole panelu bocznego. Zaznaczony element jest przekazywany jako kontekst, więc polecenia takie jak „spraw, żeby ta karta była bardziej kompaktowa“ lub „dodaj stan hover z subtelnym uniesieniem“ działają bez konieczności opisywania, który element masz na myśli.

Elementy statyczne a dynamiczne

Visual Editor działa najlepiej na elementach statycznych, w których className i treść tekstowa są literałami string w JSX. W przypadku elementów dynamicznych (obliczane classNames, renderowanie warunkowe, wyrażenia) edytor automatycznie przełącza się na czat AI z ustrukturyzowanym komunikatem.

Kiedy używać Visual Editora?

Visual Editor najlepiej sprawdza się przy małych, szybkich poprawkach:

Poprawianie literówki
Dostosowywanie odstępów
Zmiana koloru
Aktualizacja tekstu przycisku

Do większych zmian (nowe sekcje, przebudowa układu, nowe funkcje) używaj zamiast tego czatu AI.

Jak zapisać zmiany?

Zmiany są zapisywane automatycznie podczas edycji właściwości. Plik jest zapisywany do Twojego środowiska uruchomieniowego, a zmiana zostaje zatwierdzona w historii wersji przy kolejnym kroku buildera, który wykonuje commit.

FAQ

Czy mogę cofnąć zmiany wprowadzone w Visual Editorze?

Tak. Użyj Cmd+Z / Ctrl+Z, aby cofnąć zmiany. Visual Editor utrzymuje własny stos cofania/ponawiania.

Dlaczego mogę edytować niektóre elementy, a inne nie?

Statyczne atrybuty tekstu i className można edytować bezpośrednio. Wartości dynamiczne lub obliczane (literały szablonów, wyrażenia trójkowe, wywołania funkcji) automatycznie przełączają się na czat AI.

Kiedy używać Visual Editora zamiast czatu AI?

Narzędzie	Najlepsze do
Visual Editor	Szybkie zmiany właściwości (tekst, kolory, odstępy) poprzez klikanie
AI Chat	Złożone zmiany, nowe funkcje, debugowanie

To jedyne dwa sposoby na modyfikowanie aplikacji — nie ma edytora kodu. Zobacz Edytowanie i dostęp do kodu.