Visual Email Builder в Sendersy: drag-and-drop редактор + 6 готовых шаблонов

Многие пользователи Sendersy просили готовые шаблоны, потому что писать HTML email руками в 2026 — занятие сомнительное. Сегодня запускаем Visual Email Builder — drag-and-drop редактор с библиотекой готовых шаблонов.

Что внутри

• 8 типов блоков: header, hero, text, image, button, divider, spacer, footer.
• Live preview справа с debounced rendering — 350мс после изменения вы видите финальный HTML.
• Mobile/Desktop toggle — переключение ширины превью между 360px и 600px одним кликом.
• Brand-токены: 5 цветов (primary, bg, content-bg, text, muted) + font-family + radius + content-width применяются ко всем блокам.
• Per-block properties разворачиваются inline под блоком при клике — никаких отдельных side panels.
• Drag для reorder через grab-handle, кнопки ↑/↓/duplicate/delete на hover.
• Send-test прямо из редактора — письмо реально уходит через Postal и приходит вам в инбокс с префиксом [TEST].

Архитектура

Сердце редактора — JSONB-схема EmailDocument, валидируемая через Zod. Документ хранится в колонке email_templates.editor_state. При сохранении он рендерится в HTML через серверный renderEmail() — table-based layout с inline styles для совместимости с Outlook и Gmail. Получается single source of truth: editor_state остаётся для редактирования, html — для отправки через /v1/emails.

Библиотека из 6 шаблонов

Чтобы вы могли запуститься за 30 секунд, мы написали 6 production-ready шаблонов:

• Welcome — приветствие с verification CTA.
• Email verification — минималистичный one-button.
• Password reset — с expires_in и блоком "не вы".
• Order confirmation — с items table и tracking CTA.
• Receipt / Invoice — с PDF link и метаданными.
• Newsletter — hero image + headline + CTA.

Один клик "Использовать" — копия в вашем аккаунте, редактируйте и отправляйте.

Roadmap

Следующие шаги: conditional blocks ({{#if plan === "premium"}} внутри редактора), WYSIWYG для текстовых блоков (TipTap вместо HTML textarea), @dnd-kit для красивого DnD, и расширение библиотеки до 20+ шаблонов.

Зайдите в /dashboard/templates/gallery, кликните "Использовать" на любом шаблоне и попробуйте сами.