Начните использовать BlockBuilder с React — готовый UI и полная интеграция с React-компонентами (React 18+ / 19)
Установите BlockBuilder и подключите стили редактора:
import "@mushket-co/block-builder/index.esm.css"
TypeScript-типы входят в пакет, отдельная установка @types не нужна.
Основной React-компонент с готовым UI для управления блоками
React-компоненты для рендеринга конкретных типов блоков; регистрируются через blockManagementUseCase.getComponentRegistry()
Конфигурация с доступными типами блоков, их полями и компонентами
Props onBlockAdded, onBlockUpdated, onBlockDeleted для отслеживания изменений
Создайте компонент блока и подключите BlockBuilderComponent:
Важно: внешние отступы (margin) автоматически применяются на UI блок-обёртку над компонентом. Для внутренних отступов (padding) используйте CSS-переменные, которые устанавливаются автоматически. Подробнее об отступах (spacing) →
Вы можете определить несколько типов блоков с разными компонентами и полями:
Важно: при использовании uploadUrl (загрузка через сервер API клиента) ответ сервера ОБЯЗАТЕЛЬНО должен быть объектом с полем src, содержащим URL изображения. Если формат ответа отличается, используйте responseMapper для преобразования ответа к виду объекта с вашими полями и обязательным полем src. Подробнее — поля image и file →
BlockBuilder поддерживает два режима работы. Используйте prop isEdit для управления режимом:
body снимается CSS-класс bb-is-edit-mode (добавляется только в режиме редактирования)createBlockManagementUseCase() один раз (например, в useMemo) и зарегистрируйте React-компоненты блоков через getComponentRegistry().register(type, Component)spacingOptions.enabled: true. Внешние отступы (margin) применяются автоматически на UI блок-обёртку; для внутренних (padding) используйте CSS-переменные: --spacing-padding-top и --spacing-padding-bottomblock с полями id, type, props, settingsonSave для сохранения блоков (localStorage для разработки или API для продакшена)onBlockAdded / onBlockUpdated / onBlockDeleted для синхронизации с бэкендомisEdit={false} для отображения блоков без возможности редактированияЕсли нужен свой UI редактора, используйте @mushket-co/block-builder/core напрямую. В React создайте экземпляр в useEffect, храните в useRef или state, вызывайте методы через await blockBuilder.createBlock(...).
Справочник методов и типов — Обзор API, Методы. Пример — examples/react18.
Для серверного рендеринга с Next.js App Router см. раздел Next.js (SSR). Живой пример — examples/next в репозитории block-builder (не в demo-bb).