Редактор сайта

Редактор Framix — это инструмент, в котором вы дорабатываете сайт после AI-генерации (или начинаете с пустой страницы). Внутри — HTML-канвас, инспектор для правки любого элемента, встроенный Framix AI и история версий.

Как открыть редактор

1. Откройте проект в «Личный кабинет → Проекты».
2. Кликните «Редактировать» на нужной странице — откроется редактор.

Если вы только что создали проект через AI, редактор откроется сам после генерации.

Что внутри

• Холст — iframe с живой страницей. Кликаете на элемент — он выделяется и попадает в инспектор.
• Левая панель с тремя вкладками:
  • Элементы — палитра готовых snippet'ов (кнопки, секции, формы, шапки и т. д.). Кликом или drag-and-drop вставляете в страницу.
  • HTML структура — дерево DOM текущей страницы. Удобно навигировать по большим страницам и менять порядок.
  • Страницы — список страниц проекта. Создание, переименование, переход между ними.
• Инспектор справа появляется при выделении элемента: тег, классы Tailwind, атрибуты, текст, размеры, состояния (hover/focus).
• Framix AI — кнопка «Framix AI» в правом верхнем углу открывает боковую панель чата. AI правит выбранный фрагмент или весь канвас по описанию.
• История версий — снимки страницы перед AI-генерацией, сменой дизайн-системы и replace-импортом. Любой откат обратим.
• Превью устройств — переключатель Desktop / Tablet / Mobile меняет ширину канваса. Адаптивность реальная — через Tailwind-классы (md:, lg:), которые AI расставляет сам.

Что дальше

• Интерфейс редактора — как устроен редактор и где что находится.
• Палитра элементов — вставка готовых snippet'ов.
• HTML-структура — дерево страницы и навигация.
• Инспектор — правка тегов, классов, атрибутов и текста.
• Framix AI — как просить AI генерировать и менять страницу.
• Управление страницами — добавление, URL, удаление.
• История версий — автосейв и откат.
• Импорт и экспорт HTML — забрать сайт как ZIP, занести чужой HTML.
• Горячие клавиши — Ctrl+Z, Ctrl+S и Shift+? для шпаргалки.