BlockBuilder
Open-source библиотека для редактирования ваших собственных блоков
Встраивайте блочный редактор в Vue или React приложение — вы описываете типы блоков и компоненты, BlockBuilder даёт формы, валидацию и UI для админки. Бесплатно, лицензия MIT.
Что такое BlockBuilder?
BlockBuilder — бесплатный npm-пакет для встраивания блочного редактора в ваше приложение. Вы сами описываете типы блоков и пишете Vue/React-компоненты для них — мы не поставляем готовые блоки. Пакет даёт UI редактора: конечные пользователи добавляют, упорядочивают и редактируют контент в ваших блоках через автогенерируемые формы, а результат сохраняется в JSON для рендера на фронтенде.
Проблема
Создать блочный редактор с нуля — месяцы работы: управление вашими типами блоков, автогенерация форм для каждого, валидация, модалки, сохранение состояния. Большинство команд либо покупают дорогой SaaS, либо делают сырой кастомный вариант.
Решение
BlockBuilder даёт готовую оболочку редактора и типизированный Core API. Вы приносите свои типы блоков, поля и компоненты рендера — BlockBuilder берёт на себя UI редактора, формы, валидацию и управление списком блоков.
Что вы получаете
Готовый UI редактора
Оболочка редактора для ваших типов блоков — формы, валидация и модалки генерируются из вашего конфига. Из коробки для Vue 3 и React 18+.
Декларативный конфиг блоков
Описываете свои типы блоков и поля в JSON — UI редактора генерируется автоматически из вашей схемы.
Core API без UI
Программная работа с блоками через @mushket-co/block-builder/core, когда нужен полный контроль.
Поддержка SSR
Серверный рендеринг для Nuxt и Next.js — контент блоков отображается на сервере.
Где применяется
CMS и контент-платформы
Редакторы собирают страницы из ваших типов блоков — меняют текст, изображения и настройки без участия разработчиков.
Конструкторы лендингов
Клиенты заполняют ваши типы блоков в админ-панели — hero, преимущества, CTA, что угодно, что вы сами разработали.
Админ-панели
Визуальный редактор ваших кастомных блоков в существующем дашборде или бэк-офисе.
Маркетинговые сайты
Маркетологи обновляют контент в ваших блоках — баннеры, тексты, секции — без привлечения разработчиков.
Как это работает
Опишите свои типы блоков
Создайте конфиг с вашими типами блоков, полями (текст, изображение, repeater…) и значениями по умолчанию.
Напишите компоненты рендера
Создайте Vue или React компоненты, которые отображают каждый из ваших блоков на публичной странице.
Встройте редактор
Добавьте BlockBuilderComponent в админку — пользователи управляют и редактируют ваши блоки через визуальный UI.
Сохраняйте и рендерите
Храните блоки как JSON на сервере и отображайте на фронтенде или через SSR.
Почему BlockBuilder?
Библиотека для создания редакторов вокруг ваших собственных типов блоков
Чистая архитектура
Проект построен по принципам Clean Architecture с четким разделением на слои: Core, Infrastructure и UI.
SOLID принципы
Каждый класс имеет одну ответственность. Код легко тестировать, расширять и поддерживать.
Vue 3 и React UI
Готовые компоненты BlockBuilder для Vue 3 и React 18+, единый core API.
SSR и Nuxt / Next.js
Серверный рендеринг контента блоков. Живые SSR-примеры — в block-builder/examples (Nuxt 3/4, Next.js).
Кастомные рендереры полей
Расширяйте формы через ICustomFieldRenderer и customFieldRendererRegistry.
Автоматический UI
Встроенный UI генерирует формы для полей ваших блоков — валидация и модалки работают из коробки.
Примеры использования
Быстрый старт с готовыми примерами кода
Быстрый старт
Готовые компоненты и UI из коробки
Гибкость
Используйте с UI или только API
SSR
Nuxt и Next.js — живые примеры в block-builder/examples
Архитектура
Построено по принципам Clean Architecture
Core Layer (Ядро)
- • Entities — бизнес-правила и сущности
- • Use Cases — сценарии использования
- • Ports — интерфейсы для внешнего мира
- • DTO — объекты передачи данных
Infrastructure Layer
- • Repositories — реализации хранилищ
- • HTTP Clients — работа с API
- • Registries — регистры компонентов
UI Layer
- • UI Components — готовые компоненты
- • Hooks и composables — логика UI BlockBuilder
- • Services — UI сервисы
- • Core не зависит от внешних слоев
- • Легко тестировать и мокать
- • Простая замена реализаций
- • Четкое разделение ответственности
Начните прямо сейчас
Установка и настройка займет всего несколько минут
Установка
npm install @mushket-co/block-builderУстановите пакет
Используйте npm или yarn для установки библиотеки
Настройте блоки
Создайте конфигурацию с типами блоков и их полями
Готово!
Начните создавать блоки с автоматическим UI
Открытый исходный код
Изучайте код, вносите вклад или используйте в своих проектах