A Resend email preview helps you check a template while building it. Before relying on that layout, send the populated message and open it in the email clients your customers use. An order receipt that looks comfortable in a browser can give its photographs, product names and prices much less room on a phone.
Checking each revision manually means maintaining several mailboxes, finding the same message in every app and collecting comparable screenshots. MailSlurp is an email testing platform with an automated email preview tool that brings those client views together for review.
The sending steps use Resend's API. You'll need a sending API key, a verified domain and a MailSlurp workspace with device previews available. Use your existing application integration, or run the downloadable example with Node.js 22 or later.
## How automated device rendering works
Choose the devices and email services you want to test, and MailSlurp gives you a special email address. Send your campaign to that address. MailSlurp opens the email in the selected apps and webmail services, then captures screenshots automatically.
The screenshots come back together, ready to compare across phones, tablets and computers. Check the layout, images and buttons, then share a result link so your team can review the same version of the email.
## Let's preview a populated order email
Our example is a receipt from Slurp Store, a fictional shop selling reusable straws. It contains a stainless steel four-pack at $14.90 and a silicone six-pack at $18.90, a $33.80 total, product photographs and cleaning instructions. The shopper should be able to match each product to its price without losing the total or the store link further down the message.
In the completed test, iPhone Mail wrapped the product names onto more lines than Gmail, while both views kept the prices and total readable. [Jump to the complete Gmail and iPhone comparison](#compare-the-complete-gmail-and-iphone-views) to inspect that result, or follow the send below to try your own email.
We sent this Resend HTML email through the sending API with matching plain text. Here is the received message in MailSlurp's **Inspect email** view; the client captures later in the guide show how that message actually opens in Gmail and iPhone Mail.
The populated receipt received from Resend. This browser preview lets you inspect its content before comparing the email-client captures.
To use this example, [download the Slurp Store email and sending scripts](/resources/slurp-store-email-testing/slurp-store-email-testing.zip) and unzip them into a local folder. The bundle includes the exact `email.html` and `email.txt` used for the receipt, the sending scripts and an environment-file example. You can also open the [HTML source](/resources/slurp-store-email-testing/email.html) and [plain-text version](/resources/slurp-store-email-testing/email.txt) separately.
For your own Resend email templates, use representative values: long product names, multiple line items and the amounts your customers will see. If you use Resend with React Email, keep your existing component and sending code. A published Resend template can retain its template ID and variables; the [Resend template documentation](https://resend.com/docs/dashboard/templates/introduction) explains that option. Keep your normal sender, using [Resend's domain setup instructions](https://resend.com/docs/add-a-domain) if verification is still required.
## Compare the complete Gmail and iPhone views
Read both views from the greeting through the footer. The full-size links let you inspect every line, including the bottom of the longer phone capture.
Gmail.com
iOS Mail
The same Resend message in Gmail.com and iOS Mail. Both captures include the whole email; the private receiving address is hidden.
Both product photographs appear in these captures. Gmail has room for the product names on one line; iPhone Mail wraps them, including the longer silicone-straw description. The $14.90 and $18.90 prices remain readable beside their products, and both views show the $33.80 total, care instructions, store button and footer.
That is the useful comparison for responsive email testing: the phone can be taller without losing the connection between an item and its price. For your own receipt, inspect long names and discounts as well as the shortest example. Check that the total agrees with the order data and that text remains readable beside images. Open links separately in a test message to verify their destinations; screenshots show their appearance.
## Send the Resend test email to your selected clients
### 1. Choose the apps you want to inspect
Open MailSlurp's [new device preview form](https://app.mailslurp.com/device-previews/create?onboardingRequest=devicePreview) and expand **Select targets**. This email rendering test uses **Gmail.com**, **Gmail Android**, **iOS Mail** and **Outlook Classic**.
Four separate clients are selected. Gmail in a browser and Gmail on Android have their own targets.
Choose the apps relevant to your customers, then select **Use selected**. The example uses the default light appearances. For email dark mode testing, add the available dark targets explicitly and review their separate results; these four captures do not establish how the receipt looks in dark mode.
### 2. Copy the receiving address
Under **Send your email to this address**, use the Copy control to copy the complete recipient. Check the selected target count before sending.
The arrow points to Copy at the right of the address field. The complete form is available below.
Inspect the complete receiving-address screen
Send your message to the generated address. The private example value is hidden; use the address from your own form.
Use that address as the recipient in your Resend integration. Resend's `delivered@resend.dev` and other [test-event addresses](https://resend.com/docs/dashboard/emails/send-test-emails) simulate events; they won't deliver this email to your MailSlurp preview.
### Give your receipt a phone check
Send the populated message through Resend and compare its product photos, prices and layout in MailSlurp's phone and desktop captures.
[Preview my Resend email](https://app.mailslurp.com/sign-up/?onboardingRequest=devicePreview)
### 3. Send through Resend
To send the downloadable receipt, open the unzipped folder and use [resend-preview.mjs](/resources/slurp-store-email-testing/resend-preview.mjs). For your own HTML email, replace `email.html` and `email.txt` first. Copy `.env.example` to `.env` and fill in these values:
- `RESEND_API_KEY`: your sending key.
- `EMAIL_FROM`: the plain email address of your verified sender.
- `MAILSLURP_RENDER_TO`: the full address copied from MailSlurp.
- `RESEND_IDEMPOTENCY_KEY`: a unique value for this send; retain it if you need to retry the same request after checking its status.
You can set `EMAIL_SUBJECT` to match your email and `EMAIL_FROM_NAME` for its display name. Keep `.env` private and out of source control. Run the script from the folder containing the email files with Node.js 22 or later:
```sh
node --env-file=.env resend-preview.mjs
```
The script uses Resend's HTTP API and prints its accepted message ID when one is returned. A rejected request produces its HTTP status and a safe diagnostic; use that information to resolve the sending error before continuing. It does not retry automatically.
Our example request returned HTTP 200 and the message subsequently arrived in MailSlurp. Use the returned ID to trace your own send in Resend if receipt is uncertain, then check MailSlurp before submitting another copy.
### 4. Wait for the captures
Return to MailSlurp and select **I have sent my email**. That opens the waiting view; receipt starts rendering automatically. Open the result with your subject and wait for the selected targets to become ready.
All four captures are ready. The separate email audit is 33% with 16 issues, and domain health is 90% with one issue.
**Complete** describes render progress. It does not mean the email passed every audit or sender check. Here, all four screenshots are available while the separate checks still have findings to review.
If no email appears, check the recipient you submitted, the API response and the corresponding Resend email status before sending another copy. If the message arrived but a target isn't ready, inspect that target's result separately from the send.
## Include the other clients your customers use
The other two captures reveal another useful difference. Gmail Android wraps the product names into a narrow column, while keeping both images, the prices and $33.80 total visible. Outlook Classic keeps the product names on one line, but **Visit Slurp Store** appears as a compact green-backed text link with much less padding than Gmail's rectangular button. The link is present; its appearance needs a separate review from the order rows.
Inspect the complete Gmail Android and Outlook Classic captures
Gmail Android
Outlook Classic
The same receipt in Gmail Android and Outlook Classic. Compare the product rows and the space around the store link; use the full-size originals for detail.
Use the [Gmail preview guide](/guides/how-to-preview-an-email-in-gmail/) and [Outlook preview guide](/guides/how-to-preview-an-email-in-outlook/) when choosing between their browser and app targets for your next test.
Email clients and devices to compare with MailSlurp
| Device | Email app | Appearance |
| --- | --- | --- |
| Android phones | Gmail, Outlook | Light and dark |
| iPhone | Gmail, Apple Mail, Outlook | Default |
| iPad | Apple Mail | Default |
| Mac | Apple Mail | Default |
| Windows | New Outlook, Outlook Classic | Default |
| Webmail | Gmail | Light and dark |
| Webmail | Outlook.com, Yahoo Mail | Default |
Choose the available clients and modes in your workspace when starting a preview. Test the apps your customers use, including dark mode where it is offered.
After editing the template, send the revised message and compare its new captures. For the next part of Resend email testing, follow the [Resend inbox placement guide](/guides/resend-inbox-placement-testing/) to see where a separate send lands in monitored mailboxes. A readable receipt and an Inbox result answer different questions.