Візуальний редактор

Натискайте на елементи, щоб редагувати текст, кольори, відступи, шрифти тощо. Найкраще підходить для дрібних змін; для великих змін використовуйте чат.

Візуальний редактор дозволяє змінювати інтерфейс застосунку, натискаючи на елементи та редагуючи їхні властивості безпосередньо. Перейдіть у режим Visual на панелі інструментів Builder, щоб активувати його.

Як це працює

Перейдіть у режим Visual — це підрежим Preview на панелі інструментів (панель інструментів має два сегменти: Preview і Admin)
Наведіть курсор на елементи у preview — вони підсвічуються накладкою
Натисніть на елемент, щоб виділити його
Редагуйте властивості на бічній панелі: текст, кольори, відступи, шрифти, межі, зображення, ефекти

Зміни миттєво застосовуються у preview та записуються у ваші вихідні файли. Використовуйте кнопку Reset last edit на бічній панелі, щоб скасувати останню зміну властивості.

Що можна редагувати?

Текст — Редагуйте вміст безпосередньо
Розмір шрифту — xs, sm, base, lg, xl тощо
Товщина шрифту — thin, light, normal, medium, semibold, bold, extrabold
Сімейство шрифтів — Geist, Inter, Montserrat, Noto Serif, Geist Mono, Fira Code, JetBrains Mono
Стиль шрифту — перемикач курсиву
Вирівнювання тексту — left, center, right, justify
Колір тексту — будь-який колір Tailwind
Колір фону — будь-який колір Tailwind
Відступи — padding та margin з усіх боків
Межа — ширина, колір та радіус (доступно для контейнерних елементів без текстового вмісту)
Зображення — замініть фото через пошук стокових зображень або завантажте власне (застосовується до елементів img та фонових зображень)
Ефекти — тінь та прозорість

Скасування / Повторення

Використовуйте Cmd+Z (Mac) або Ctrl+Z (Windows) для скасування змін. Cmd+Shift+Z / Ctrl+Shift+Z — для повторення.

Палітра сторінки

Візуальний редактор аналізує вашу сторінку та відображає всі кольори Tailwind і власні CSS-властивості, які вже використовуються. Коли ви відкриваєте палітру кольорів для вибраного елемента, ви можете обирати з цієї палітри сторінки, щоб дотримуватися вашої наявної дизайн-системи — без необхідності вгадувати hex-коди.

Запитати AI про вибраний елемент

Для змін, які редактор властивостей не може виразити, введіть короткий запит у поле Ask AI внизу бічної панелі. Вибраний елемент передається як контекст, тому такі запити, як «зроби цю картку компактнішою» або «додай стан hover з легким підняттям», спрацюють без того, щоб описувати, який саме елемент ви маєте на увазі.

Статичні та динамічні елементи

Візуальний редактор найкраще працює зі статичними елементами, де className та текстовий вміст є рядковими літералами у JSX. Для динамічних елементів (обчислювані className, умовний рендеринг, вирази) редактор автоматично переходить до AI-чату зі структурованим запитом.

Коли варто використовувати Візуальний редактор?

Візуальний редактор найкраще підходить для невеликих, швидких змін:

Виправлення друкарської помилки
Налаштування відступів
Зміна кольору
Оновлення тексту кнопки

Для великих змін (нові секції, реструктуризація макету, нові функції) краще використовуйте AI-чат.

Як зберегти зміни?

Зміни зберігаються автоматично під час редагування властивості. Файл записується у ваш runtime, а зміна фіксується в історії версій під час наступного ходу Builder, що виконує commit.

Часті запитання

Чи можна скасувати зміни, зроблені у Візуальному редакторі?

Так. Використовуйте Cmd+Z / Ctrl+Z для скасування. Візуальний редактор підтримує власний стек скасування/повторення.

Чому одні елементи можна редагувати, а інші — ні?

Статичний текст та атрибути className можна редагувати безпосередньо. Динамічні або обчислювані значення (шаблонні літерали, тернарні вирази, виклики функцій) автоматично переходять до AI-чату.

Коли слід використовувати Візуальний редактор замість AI-чату?

Інструмент	Найкраще для
Visual Editor	Швидкі зміни властивостей (текст, кольори, відступи) натисканням
AI Chat	Складні зміни, нові функції, налагодження

Це єдині два способи змінювати застосунок — редактора коду немає. Дивіться Редагування та доступ до коду.