TXresendreact-emailaudiencestransactional

How to use Draftship with Resend

Resend is API-first transactional email built around React Email. You can also send raw HTML. Here's how to drop a Draftship export into Resend's Audiences for broadcasts or send one-off via the API.

HTML import path
API only
Merge syntax
Substitute in code (no built-in template engine for raw HTML)
Image hosting
external
Best for
Modern startups already using Next.js, Vercel, or React Email components.
Watch out for
Resend's UI doesn't have an HTML template editor. Bring your own substitution code or use Audiences for broadcast.

Resend is the modern API-first transactional email service: clean docs, React Email integration, opinionated tooling. Their template story leans on React Email components rendered server-side. If you've built in Draftship, you can either send the static HTML directly via API or paste it into a Broadcast inside Resend's Audiences for opt-in marketing.

Two paths into Resend

Path one: send the Draftship export as raw HTML via the API for transactional. Path two: drop the export into a Broadcast for opt-in marketing.

STEP 1Design inDraftshipBlock editorSTEP 2ExportOutlook-safe HTMLCmd+ESTEP 3Pick path: API orBroadcastTransactional ormarketingSTEP 4Substitutevariables in codeOr use Broadcast UISTEP 5SendPOST /emails orBroadcastsResend handoff
Draftship to Resend handoff (API or Broadcast)

Sending via API (transactional)

The send call is direct:

bash
curl -X POST 'https://api.resend.com/emails' \ -H 'Authorization: Bearer re_xxxx' \ -H 'Content-Type: application/json' \ -d '{ "from": "noreply@yourdomain.com", "to": "user@example.com", "subject": "Welcome", "html": "<html>..." }'

For personalization, do the substitution in your code before the API call. Resend doesn't have a server-side template engine for raw HTML; that's a deliberate choice. The React Email path renders components server-side and produces HTML that's already fully resolved.

Sending via Broadcasts (opt-in marketing)

For lists of subscribers who've opted in:

1. Go to Audiences, create or select an audience. 2. Click Broadcasts → New Broadcast. 3. Choose HTML editor. Paste your Draftship export. 4. Resend's broadcast editor supports basic Liquid for first_name and email substitution: {{ FIRST_NAME }}, {{ EMAIL }}.

The broadcast UI is intentionally simple. For complex personalization, do it in code with the API.

Resend Liquid (Broadcasts only)

DraftshipResend Broadcasts
{{ first_name }}{{ FIRST_NAME }}
{{ last_name }}{{ LAST_NAME }}
{{ email }}{{ EMAIL }}
Unsubscribe link{{ RESEND_UNSUBSCRIBE_URL }}

Defaults aren't supported in Broadcasts. If a contact lacks a field, the substitution renders as empty. Set the field on every contact at import time.

Image hosting

Resend has no built-in CDN. External URLs in Draftship Image blocks. Common pattern: pair Resend with Cloudflare Images or your own CDN.

Test send checklist

  • For API sends, use a sandbox API key first to validate the payload.
  • For Broadcasts, the test send goes to a single email; verify Liquid substitution.
  • Run the rendered output through the size checker.
  • Confirm domain verification (SPF, DKIM, DMARC) is complete in Resend's dashboard.

When to use React Email instead of Draftship

If your team already lives in a React codebase and ships email components alongside features, React Email is a natural fit. If your email is shipped by marketers, designers, or anyone outside engineering, Draftship's visual editor wins. Both produce HTML that Resend will send.

For DMARC setup specifically, see SPF, DKIM, and DMARC explained.

FAQ

Frequently asked questions

Can I use Draftship and React Email together?
Yes. Use Draftship to design the visual layout, export HTML, and treat it as the source of truth. React Email is a separate authoring path; pick one. Mixing them in a single email creates conflicts in markup.
Does Resend have an open rate or click rate?
Yes, both. The API and dashboard expose per-email and per-broadcast metrics. Note that Apple Mail Privacy Protection inflates open rates across all senders, so weight clicks higher.
Why is Resend's HTML editor for Broadcasts so basic?
Deliberate product choice. Resend's bet is that you'll author in React Email or another tool and use them as the send layer. The Broadcasts editor is a fallback, not a primary authoring surface.
How do I unsubscribe a contact from a Resend audience?
The {{ RESEND_UNSUBSCRIBE_URL }} link in broadcasts handles it automatically. For API-driven removal, call the contacts API or update the contact's unsubscribed flag.
Does Resend support webhooks?
Yes. Subscribe to email.delivered, email.bounced, email.complained, and email.opened events. Configure in the dashboard under Webhooks.
Try it yourself

Design in Draftship. Paste into Resend.