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

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

Визуальный редактор позволяет изменять интерфейс приложения, нажимая на элементы и редактируя их свойства напрямую. Чтобы активировать его, переключитесь в режим Visual на панели инструментов Builder.

Как это работает

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

Изменения мгновенно применяются в предпросмотре и записываются в исходные файлы. Используйте кнопку 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-коды.

Спросите ИИ о выбранном элементе

Для правок, которые нельзя выразить через редактор свойств, введите короткий запрос в поле Ask AI в нижней части боковой панели. Выбранный элемент передаётся как контекст, поэтому запросы вроде «сделай эту карточку компактнее» или «добавь состояние при наведении с лёгким подъёмом» работают без необходимости указывать, какой именно элемент вы имеете в виду.

Статические и динамические элементы

Визуальный редактор лучше всего работает со статическими элементами, у которых className и текстовое содержимое являются строковыми литералами в JSX. Для динамических элементов (вычисляемые classNames, условный рендеринг, выражения) редактор автоматически переключается на AI-чат со структурированным запросом.

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

Визуальный редактор лучше всего подходит для небольших, быстрых правок:

Исправление опечатки
Корректировка отступов
Изменение цвета
Обновление текста кнопки

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

Как сохранить изменения?

Изменения сохраняются автоматически при редактировании свойства. Файл записывается в ваш runtime, а изменение фиксируется в истории версий при следующем действии Builder, которое создаёт commit.

Часто задаваемые вопросы

Можно ли отменить правки в Визуальном редакторе?

Да. Используйте Cmd+Z / Ctrl+Z для отмены. Визуальный редактор ведёт собственный стек отмены/повтора действий.

Почему одни элементы можно редактировать, а другие — нет?

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

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

Инструмент	Лучше всего подходит для
Visual Editor	Быстрое изменение свойств (текст, цвета, отступы) с помощью нажатий
AI Chat	Сложные изменения, новые функции, отладка

Это единственные два способа изменить приложение — отдельного редактора кода нет. См. Редактирование и доступ к коду.