Быстрый старт

Минимальный шаблон

Любой кастомный виджет должен быть ровно в таком виде:

function Widget() {
  const { fill } = useParams({
    fill: { type: "colorGradient", default: "#ffffff" },
  });

  return (
    <div style={{ width: "100%", height: "100%" }}>
      <div style={{ width: "100%", height: "100%", background: fill }} />
    </div>
  );
}

Если код прошёл компиляцию, появится превью в редакторе, и блок станет доступен в местах размещения блоков.

![Рабочий минимум виджета и превью] []

Как создать виджет

1. Откройте редактор кастомных виджетов из раздела виджетов/библиотеки.
2. Создайте новый виджет и укажите уникальное имя.
3. Вставьте код Widget().
4. Сохраните — при ошибке в консоли появится диагностика compile/runtime.
5. Добавьте виджет на страницу и проверьте рендер в режиме редактора.

Базовые правила по отладке

• Используйте консольный лог только через debug(...) — это специальная capability, которая безопасно пишет лог в журнал виджета.
• Для проверки компиляции смотрите ошибки в панели code-log/логах (коды INVALID_PROGRAM_SHAPE, FORBIDDEN... и т.д.).
• Если блок не появился после сохранения, проверьте:
  • единственная ли функция Widget() без параметров;
  • нет ли var;
  • нет ли запрещённых JSX-атрибутов (onClick, style с неподдерживаемыми полями и др.).
• Не полагайтесь на мгновенную загрузку шрифта для textToPath: рендер может пройтися в 1-й проходе с ready=false.

Что обычно делают потом

• добавляют параметры (useParams): размеры, отступы, stroke, mode-переключатели;
• выносят тяжёлые расчёты в useBlockMemo;
• добавляют editable="text" или useControlPoints() для интерактивного редактирования;
• оптимизируют параметры под удобство панели свойств.

![Базовый жизненный цикл виджета: код → тест → сохранение → размещение] []

Рекомендуемый порядок развития виджета

1. Сначала логика параметров — просто корректное useParams + базовый рендер.
2. Потом вычисления — вынесите повторяемые вычисления в useBlockMemo.
3. Потом UX редактирования — editable-текст, кнопки, переключатели.
4. Потом устойчивость — проверки на пустые значения, fallback-ветки, лимиты.