Разработка конструктора сайтов (Website Builder)
Конструктор сайтов — SaaS-платформа, позволяющая пользователям создавать сайты без кода через визуальный редактор. Технически это один из наиболее сложных веб-продуктов: WYSIWYG-редактор, генерация кода на лету, хостинг и CDN для тысяч пользовательских сайтов, DNS-управление.
Архитектура конструктора
Ключевой выбор: canvas-based или DOM-based редактор.
Canvas (Adobe XD / Figma-подход): произвольное размещение элементов пикселями. Максимальная свобода дизайна, но сложно генерировать отзывчивый HTML.
Block/Section-based (Webflow, Wix-подход): сайт состоит из секций, внутри которых — сетка (grid/flexbox). Ограниченнее в дизайне, но генерирует адаптивный код.
Component-based: пользователь работает с компонентами (Hero, Features, Pricing, Footer). Самый простой подход, похожий на конструктор лендингов.
Модель данных страницы
{
"sections": [
{
"id": "hero_1",
"type": "hero",
"props": {
"background": "#1e40af",
"title": "Заголовок сайта",
"subtitle": "Подзаголовок",
"buttonText": "Начать",
"buttonLink": "/signup"
}
},
{
"id": "features_1",
"type": "features_grid",
"props": {
"columns": 3,
"items": [...]
}
}
],
"meta": { "title": "...", "description": "..." }
}
При рендеринге JSON-конфигурация конвертируется в React/HTML-компоненты. Изменения в редакторе → обновление JSON → моментальный live preview.
Live Preview
Предпросмотр сайта — iframe с пользовательским сайтом. Изменения применяются через postMessage:
// Редактор отправляет обновления в iframe
iframe.contentWindow.postMessage({
type: 'UPDATE_SECTION',
sectionId: 'hero_1',
props: { title: 'Новый заголовок' }
}, '*');
// iframe слушает и обновляет React-компонент
window.addEventListener('message', ({ data }) => {
if (data.type === 'UPDATE_SECTION') {
setSection(data.sectionId, data.props);
}
});
Мультитенантный хостинг
Каждый пользователь получает поддомен (username.builder.com) или кастомный домен. Nginx + wildcard SSL (*.builder.com) через Let's Encrypt + Certbot.
Кастомный домен: пользователь добавляет CNAME-запись своего домена на платформу → платформа выпускает SSL через Let's Encrypt HTTP-01 challenge.
Генерация и деплой сайта:
- При публикации — JSON конфигурация конвертируется в статический HTML + CSS + JS
- Статичные файлы загружаются в S3/CDN
- CDN настраивается на поддомен пользователя
Темы и шаблоны
Пользователь начинает с выбора шаблона (категория: бизнес, портфолио, ресторан, landing). Шаблон — набор секций с заполненными примерами контента. Переключение темы (цвет + шрифт) меняет CSS-переменные — мгновенная смена стиля без изменения структуры.
Ограничения по плану
Бесплатный план: поддомен username.builder.com, ограниченное количество страниц, брендинг платформы в footer. Pro план: кастомный домен, без брендинга, больше страниц, аналитика.
SEO-инструменты
- Meta title / description — редактируются прямо в конструкторе
- OG-изображение — загрузка или генерация из заголовка
- Robots.txt и Sitemap — генерируются автоматически при публикации
Сроки
MVP (блочный редактор, live preview, публикация на поддомен, 10–15 типов секций): 4–6 месяцев. Полноценный конструктор с кастомными доменами, CSS-темами, SEO-инструментами, e-commerce секциями: 8–14 месяцев.