Features / Visual email builder
Visual email builder
Drag-and-drop editor + 6-template gallery
Compose an email in minutes without hand-rolling HTML. 8 block types (header, hero, text, image, button, divider, spacer, footer), brand tokens, live preview with mobile/desktop toggle. One JSON document — the server renderer emits email-safe HTML with inline styles for Outlook and Gmail.
What is included
- 8 block types with inline properties — click → settings expand below the block.
- Brand-level: 5 colors, font-family, border-radius, content width — applied to all blocks.
- Live preview on the right with 350ms debounce. Mobile (360px) / desktop toggle in one click.
- Drag the grab-handle to reorder, ↑↓/duplicate/delete on hover. Keyboard shortcuts: Cmd+S/D/Backspace.
- 6 ready-made templates in the gallery: welcome / verify / reset / order / receipt / newsletter. Clone in one click.
- Send-test right from the editor — the email actually goes via Postal with a [TEST] prefix.
How to use it in code
ts
// Reference a visual template from your code
import { sendersy } from '@/lib/sendersy'
await sendersy.emails.send({
from: 'Acme <noreply@acme.com>',
to: user.email,
template_id: 'welcome', // ← built in the visual editor
variables: {
name: user.name,
verify_url: `https://acme.com/verify/${token}`,
},
})
// The server renders editor_state JSONB into HTML and dispatches via Postal.Frequently asked
Can I import HTML from Figma / Stripo?
Yes — paste HTML via Code mode. Visual builder and Code mode live in the same templates table, toggled by a flag.
Which variables are supported?
{{name}}, {{any_key}} — straight substitution. Plus {{#if var}}…{{/if}} and {{#unless var}}…{{/unless}} for conditionals.