S
Sendersy
ВойтиНачать
Все посты
27 мая 2026 г.5 мин чтения

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

Запустили визуальный редактор email с блоками, live preview, mobile/desktop toggle и библиотекой шаблонов. Делимся внутренней архитектурой.

product engineering visual-builder

Многие пользователи 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, кликните "Использовать" на любом шаблоне и попробуйте сами.