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

Источник истины страницы в Framix — sanitized HTML (+ привязанная дизайн-система). Редактор работает поверх него: AI генерит и правит HTML, инспектор и layout-панель — для ручных доводок, HTML-tree — для навигации.

Старая система с визуальным JSON-tree (Sections/Blocks с drag-on-canvas, snap-to-grid, distance guides) выпилена в 2026-04. AI-генерация даёт результат за секунды, а инспектор покрывает ручные правки — это оказалось эффективнее no-code drag-on-canvas.

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

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

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

Что внутри

• Холст — iframe с живой страницей. Клик по элементу выделяет его и попадает в инспектор.
• Левая панель с тремя вкладками:
  • Элементы — палитра snippet'ов (кнопки, секции, формы, шапки). Клик или drag-and-drop.
  • HTML-структура — дерево DOM. Удобно навигировать большие страницы.
  • Страницы — список страниц проекта.
• Инспектор справа — появляется при выделении: тег, классы Tailwind, атрибуты, текст, размеры, состояния.
• Layout-панель — flex/grid/spacing для контейнеров (быстрая правка раскладки без печатания классов).
• Framix AI — кнопка ✨ в правом верхнем углу: боковая панель чата, который правит выделенный фрагмент или весь канвас.
• Дизайн-системы — палитра, шрифты, радиусы, ритм. После первой генерации DS извлекается автоматически (без LLM) и фиксируется как hard-constraint: при следующих правках дизайн не «плывёт». Можно пересобрать командой «другой стиль».
• Библиотека дизайн-систем — 138+ готовых пресетов (Linear, Stripe, Apple, Tesla, Vercel, Cursor, Claude, …) — fast-path без вызова LLM.
• История версий — снимки страницы перед опасными операциями (AI-генерация, replace-импорт, смена DS). Откат в один клик.
• Превью устройств — Desktop / Tablet / Mobile. Адаптивность реальная — через Tailwind-классы (md:, lg:).

Как Framix фиксирует элементы

Серверный sanitize-парсер (htmlAst.ts) при сохранении инжектит data-framix-id / data-framix-section-id в каждую ноду. Это якоря, по которым инспектор и AI адресуют элементы для точечных правок («перепиши этот заголовок», «сделай эту кнопку зелёной»). Самостоятельно эти атрибуты править не нужно — они системные.

Что дальше

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