A SendGrid order confirmation needs to work after it reaches the customer: the item names, amounts and order total should still be easy to read on a phone. Previewing the HTML while you build it helps, but the delivered message is the one to check in Gmail, Apple Mail and the other apps your customers use.

Repeating that check manually means sending each revision to test mailboxes, opening the message in each app and collecting screenshots for review. MailSlurp is an email testing platform with automated device previews that brings those captures together. You can keep sending through SendGrid and compare the received email across your selected clients.



## 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.

![One email branches to an iPhone, a desktop computer and a tablet for automated rendering.](/_astro/automated-device-rendering-v1.DkA8n4lC_20VMnF.webp)



## Choose the SendGrid message you want to preview

For an application email, send the finished HTML or populated template through the same SendGrid integration your app uses. Include representative names, products and other values so you can check the content customers will receive. An empty template leaves the most interesting layout questions unanswered.

This walkthrough uses a simple, fictional Paper & Pine order confirmation sent through SendGrid's Mail Send API. It has two line items and a $42 total. On a phone, the item descriptions should wrap without pushing the amounts off the page.



![MailSlurp's full workspace with Inspect email open on the received Paper and Pine HTML order confirmation](/_astro/01-source-preview.CniCjkok_ZYfekp.webp)

MailSlurp's browser preview of the received SendGrid HTML. The order details are fictional; this view is separate from the client captures.



If you work in **Marketing > Single Sends**, SendGrid also documents **Test Your Email > Send Test Message** for sending a draft to a chosen address. Its inbox-rendering tests are a separate option. Follow [SendGrid's email-testing instructions](https://www.twilio.com/docs/sendgrid/ui/sending-email/email-testing) for those editor controls; the results below come from the API-delivered example.

## Send the email from SendGrid to MailSlurp

You'll need an authenticated SendGrid sender, permission to send through its API, and a MailSlurp workspace with device previews and sufficient credits for the clients you choose.

### 1. Choose Gmail.com and iOS Mail

Open MailSlurp's [new device preview form](https://app.mailslurp.com/device-previews/create?onboardingRequest=devicePreview). Expand the target selector and select **Gmail.com** and **iOS Mail** for this browser-and-phone comparison.

Gmail.com checks Gmail in a browser; iOS Mail checks Apple's Mail app on iPhone. Gmail's iPhone and Android apps are separate targets. Choose additional clients to match your audience, with the available light or dark appearances you need.



![MailSlurp's full create-render workspace with the device selector expanded and Gmail.com and iOS Mail selected](/_astro/gmail-ios-target-selection.CaGNQK5O_cTnUu.webp)

Gmail.com and iOS Mail are checked for this comparison. Confirm the two-target selection, then choose Use selected.



Check the selected-target count before continuing. A saved profile may include more clients than this two-target example.

### 2. Copy the render address

Choose **Use selected** to confirm the clients, then copy the complete address under **Send your email to this address**. Use the address generated for your selection as the only recipient of this preview send.



![MailSlurp's full send-email workspace with Gmail.com and iOS Mail selected and the private recipient hidden](/_astro/gmail-ios-render-address.CCg2x9FA_2inyAf.webp)

Copy your own generated address after selecting the clients. The recipient in this example is hidden.



### 3. Send the populated email through SendGrid

In your application's test environment, replace the recipient for this message with the copied address. Keep the template version, content and sending settings you intend to check. For a Dynamic Template, supply the representative values through the template's normal data payload.

Use a real delivery send for this check. [SendGrid's sandbox mode](https://www.twilio.com/docs/sendgrid/for-developers/sending-email/sandbox-mode) validates a request without delivering it, so leave that option disabled for the preview.

For saved HTML, the following Node.js example reads `email.html` and submits it to SendGrid. Set `SENDGRID_API_KEY` to your API key, `SENDGRID_FROM_EMAIL` to your verified sender and `MAILSLURP_RENDER_ADDRESS` to the address you just copied. Save the script as `preview-send.mjs`, put the finished HTML beside it and run `node preview-send.mjs` with a current Node.js version.

**Send a saved HTML email with the Mail Send API**

```javascript
import { readFile } from 'node:fs/promises';

const key = process.env.SENDGRID_API_KEY;
const from = process.env.SENDGRID_FROM_EMAIL;
const to = process.env.MAILSLURP_RENDER_ADDRESS;
if (!key || !from || !to) {
  throw new Error('Set the API key, verified sender and render address.');
}

const html = await readFile(new URL('./email.html', import.meta.url), 'utf8');
const response = await fetch('https://api.sendgrid.com/v3/mail/send', {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${key}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    personalizations: [{ to: [{ email: to }] }],
    from: { email: from },
    subject: 'Order confirmation preview',
    content: [{ type: 'text/html', value: html }]
  })
});
if (response.status !== 202) {
  throw new Error(`SendGrid returned HTTP ${response.status}. Check the send request.`);
}
console.log('SendGrid accepted the email. Check receipt in MailSlurp.');
```

The [Mail Send API reference](https://www.twilio.com/docs/sendgrid/api-reference/mail-send/mail-send) documents the request fields and accepted response. A `202` response confirms submission; continue to MailSlurp to check receipt and the resulting screenshots.



### See how your SendGrid email reaches the screen

Keep your SendGrid sending workflow and compare the delivered message in MailSlurp. Check phone and desktop layouts before the next template change reaches customers.

[Preview my SendGrid email](https://app.mailslurp.com/sign-up/?onboardingRequest=devicePreview&returnTo=%2Fdevice-previews%3FonboardingRequest%3DdevicePreview)



### 4. Open the completed previews

Return to MailSlurp and choose **I have sent my email** to open the waiting view. The received email starts its render automatically. Open the matching result and wait until **Render progress** reports that the selected captures are ready.



![MailSlurp's full result workspace showing ready Gmail.com and iOS Mail previews of the SendGrid order confirmation](/_astro/03-results.BKSKKV_P_Z2e9aSS.webp)

Render progress shows both client captures ready. The email audit and domain-health checks have separate results.



If the message hasn't appeared, check the recipient and SendGrid's delivery feedback before sending another copy. If the message arrived but a target failed, inspect that target's status separately from the sending step.

## Compare the desktop and phone email

Open the Gmail.com capture, then the iOS Mail capture from the same result. Read through to the footer. **Ready** tells you the screenshot was captured; the email still needs your review.



Gmail.com

![Complete SendGrid order confirmation in Gmail.com with two line items and a 42 dollar order total](/_astro/04-gmail.DwgW_agB_83O61.webp)

iOS Mail

![Complete SendGrid order confirmation in iPhone Mail with wrapped item names and readable prices](/_astro/05-iphone-mail.DkSVttMK_ZB33qv.webp)

The same SendGrid email in Gmail.com and iOS Mail. The private recipient in the phone header is hidden.



In this example, Gmail keeps each item description on one line. On iPhone, the descriptions wrap while the prices stay in their own column, and the $42 total and footer remain visible.

For your email, check the parts that change with real data: a longer customer name, multiple products, discounts, delivery information and any action button. If you use images, inspect their loading and size too. Test a link's destination separately; its appearance in a screenshot doesn't verify where it leads.

Add other apps when they matter to your audience. The [Gmail guide](/guides/how-to-preview-an-email-in-gmail/) explains its browser and phone targets, and the [iPhone Mail walkthrough](/guides/how-to-preview-email-in-iphone-mail/) covers Apple's app. Select supported dark appearances explicitly when checking colors. The two results here cover Gmail.com and iOS Mail only.

After changing the template or its data, send the new version and review its new result. For automated assertions on order values, reset links, headers and delivery events, continue with [SendGrid email testing](/sendgrid-email-testing/).

To check which folder receives the message, follow the [SendGrid inbox placement walkthrough](/guides/sendgrid-inbox-placement-testing/). It uses a separate send to monitored mailboxes and explains the Inbox and Spam observations.