Visual Editor

The Sendry Visual Editor is a block-based, drag-and-drop builder for email templates. You compose emails by dropping blocks onto a canvas, styling them in a sidebar, and saving — Sendry compiles the layout to clean, email-client-safe HTML.

Templates created in the editor are reusable in any send. Reference them by template_id in POST /v1/emails or in an automation send_email step.

Block types

Block	Use for
Text	Headings, paragraphs, lists. Supports inline styling and variables.
Heading	Standalone H1/H2/H3 with size, weight, color.
Image	Logos, hero graphics, product photos. Paste a URL.
Button	Primary call-to-action with link, label, color, padding, alignment.
Divider	Horizontal rule between sections.
Spacer	Vertical whitespace, configurable height.
Section	Group blocks with shared background / padding / max-width.
Columns	Two-column responsive layout (stacks on mobile).
Code	Monospace code snippet with optional language label.
Chart	Inline SVG bar / line / area chart from inline data.
YouTube	Paste a YouTube URL — oEmbed unfurls into a play-button thumbnail.
Tweet	Paste a tweet URL — oEmbed unfurls into an X-styled card.
Social	Row of social icons (Twitter, LinkedIn, etc.).

Tweet block

The tweet block hits a server-side oEmbed endpoint (POST /v1/oembed/resolve, provider twitter) when you paste a URL into the property panel. The response — author handle, display name, and the rendered tweet HTML from publish.twitter.com — is cached per-organization for 7 days so revisiting the same tweet (or two blocks referencing it) only fetches once.

When publish.twitter.com refuses unauthenticated oEmbed (which is increasingly common since the X API tightening), the editor falls back to a static preview built from the URL itself; you can fill the author / handle / body fields in by hand.

Walkthrough

1. Create a template

In the dashboard, open Templates → New Template, then choose Use Visual Editor.

2. Drag blocks onto the canvas

The left sidebar lists available blocks. Drag any block onto the canvas to add it. Drag existing blocks to reorder them.

3. Edit content and style

Click any block to open the property panel on the right. Each block exposes:

• Content — the text, image source, button label, etc.
• Style — font family, size, weight, color, alignment, padding, background.
• Link (button blocks) — destination URL, target.

Changes are reflected in the live preview as you type.

4. Use variables

Inside any text block, wrap variable names in double curly braces:

Hi {{first_name}}, your order #{{order_id}} is on its way!

When sending, pass a variables object — Sendry substitutes the values at delivery time.

curl -X POST https://api.sendry.online/v1/emails \
  -H "Authorization: Bearer $SENDRY_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "from": "Acme <hello@acme.com>",
    "to": "jane@acme.com",
    "template_id": "tpl_order_shipped",
    "variables": {
      "first_name": "Jane",
      "order_id": "1042"
    }
  }'

If a variable is missing in the payload, the placeholder is rendered as an empty string.

5. Save and use

Click Save. The template gets a template_id (e.g. tpl_abc123). Use it in any send:

await sendry.emails.send({
  from: "Acme <hello@acme.com>",
  to: "jane@acme.com",
  template_id: "tpl_abc123",
  variables: { first_name: "Jane" },
});

Or inside an automation send_email step:

{
  "type": "send_email",
  "config": {
    "template_id": "tpl_abc123",
    "from": "Acme <hello@acme.com>",
    "message_type": "marketing"
  }
}

oEmbed support

Paste a URL from a supported provider into a text block — YouTube, Twitter/X, Vimeo, Spotify, GitHub Gist, and more — and the editor automatically unfurls it into a rich preview card with thumbnail, title, and description. The card renders inline and degrades gracefully to a plain link in clients that don't support rich media.

To insert one, paste the URL on its own line in any text block. To remove the embed and keep the raw URL, undo the unfurl with Ctrl/Cmd + Z.

Live preview

The preview pane on the right shows the compiled HTML in both desktop and mobile widths. Toggle between Desktop, Mobile, and Plain text views to confirm the email renders well across clients.

The plain-text view is auto-generated from the visual layout — Sendry attaches it to outgoing messages so clients without HTML support still get a readable version.

HTML code view

The HTML tab in the editor toolbar opens a syntax-highlighted code view of the compiled HTML, backed by CodeMirror.

• In visual mode the panel is read-only and updates live as you edit blocks. Use the Format button to run Prettier across the buffer and the Copy button to grab the markup.
• Click Edit HTML to switch the editor into HTML mode. The block editor locks, the code view becomes the source of truth, and your template is saved as raw HTML on the next Save. Use Revert to Visual to discard your HTML edits and resume visual editing.

This is the round-trip surface for power users who want to drop into hand-tuned HTML when the visual editor falls short — copying a one-off coupon banner from a designer, debugging a tricky Outlook fallback, or pasting in markup from another tool.

Export HTML

Click Export HTML on the editor toolbar to download the compiled HTML as a standalone file. Use this when you need to send the template through a tool other than Sendry, hand it off to a colleague, or commit it to source control.

The exported HTML is production-ready: inlined CSS, table-based layout, and tested against the major email clients (Gmail, Outlook, Apple Mail, Yahoo, mobile webmail).

Tips

• Keep the email under 600px wide. This is the safe maximum for most desktop clients. The default canvas width matches.
• Avoid embedded fonts unless you provide a fallback. Outlook in particular is unreliable with web fonts.
• Test in the Test Inbox first. Send to yourself with a sn_test_ API key and inspect rendering in the dashboard.
• Use the Spacer block instead of empty Text blocks for whitespace — it produces cleaner HTML and renders consistently.

Related

• Templates API — list, get, update templates programmatically.
• Send email API — use template_id and variables when sending.
• Automations — reference templates from automated send_email steps.