Инспектор

Инспектор — правая панель редактора, которая появляется, когда вы выделяете элемент. По духу он похож на панель Chrome DevTools, но проще: вы видите только то, что относится к выбранному элементу, и сразу же меняете.

Шапка инспектора

• Путь в DOM — хлебные крошки от корня страницы до текущего элемента. Клик по любому шагу выделяет родителя.
• Дублировать — копия элемента появляется рядом.
• Удалить — удаление текущего элемента (или Delete на клавиатуре).
• Снять выделение — Esc делает то же самое.

Тег

Можно сменить тег элемента — например, <div> на <section>, <h2> на <h3>, <a> на <button>. Контент и классы сохраняются.

Размеры

• Ширина и высота — любой CSS-юнит: 200px, 100%, auto, 50vw, min-content.
• Под полями показано вычисленное значение computed: WxH px — реальный размер на текущей ширине канваса.

Состояния

Принудительный preview-state: посмотреть, как элемент выглядит при hover, focus, active. Работает только в редакторе, в HTML страницы ничего не пишется. Удобно, чтобы оценить hover-эффект кнопки, не тыкая курсором.

Классы

Здесь живёт основная стилизация — Tailwind-классы.

• Список текущих классов — каждый класс крестиком удаляется.
• Поле ввода с автокомплитом — начните печатать, выпадет список подходящих утилит (bg-blue-500, rounded-xl, text-center, flex items-center gap-4, …). Enter добавляет класс.

Если хотите целые наборы стилей сразу (например, «сделай эту секцию тёмной»), быстрее попросить Framix AI — он расставит классы пакетом.

Текст

Если у элемента есть текстовое содержимое — здесь его можно поправить. Для длинных текстов удобнее двойной клик прямо по элементу на холсте — откроется встроенный редактор.

Атрибуты

Все HTML-атрибуты элемента: href, src, id, data-*, target, alt, и т. д.

• Удалить — крестиком справа от атрибута.
• Добавить — кнопка «Добавить атрибут» → ввести имя и значение.

Pickers для атрибутов

Чтобы не печатать длинные ссылки и пути вручную, инспектор подключает специальные picker'ы:

• Picker файлов — для src. Открывает файловый менеджер; вы выбираете загруженную картинку или видео, и URL подставляется автоматически.
• Picker ссылок — для href. Поиск по страницам проекта и якорям (id элементов на этой странице). Выбор сразу подставляет относительную ссылку — она работает и на framix.app, и на вашем custom-домене.

Связь с AI

Если в инспекторе элемент выделен, AI-чат «видит» его как контекст. Поэтому фразы вида «сделай эту кнопку зелёной», «добавь сюда иконку», «перепиши этот заголовок» работают без указания, о каком блоке речь.

Подсказки

• Если элемент трудно выделить кликом (например, лежит под другим) — найдите его в HTML-структуре.
• Если правок много и системных — попросите AI, не ставьте их вручную по одной. AI расставит классы Tailwind пачкой и не забудет адаптивность под мобильную версию.
• После каждой большой правки редактор сам сохраняет версию — если что-то сломали, откатитесь.