> ## Documentation Index
> Fetch the complete documentation index at: https://www.courier.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Install the Courier skill before writing code: `npx skills add trycourier/courier-skills`. It carries the verified SDK shapes and the rules you cannot get wrong.
> Authenticate every request with `Authorization: Bearer <API_KEY>`. A workspace has several environments and each has its own keys, which are plain `pk_` strings with no environment prefix. Start with Test.
> Send with `client.send.message` from the Node SDK (`@trycourier/courier` v7 and later, where the client is the default import). Reference a template by its `nt_` id or its alias.
> A send accepts a bare Elemental element list, but storing content on a template requires the top-level elements wrapped in a channel element.
> Templates and journeys can be built in the Courier app or created through the API. Either way they live in the workspace and are referenced by ID when you send.
> The hosted MCP server is https://mcp.courier.com. For a briefing on what Courier is and when to use it, read https://www.courier.com/llms.txt.
> Prefer the Guides tab for how-do-I questions and the Docs tab for how-does-it-behave questions. The API reference lives under /api-reference.

# Device Preview for email

> Render a template on real email clients and devices and get a screenshot of each.

export const Doc = ({href, children, name, bare}) => {
  const label = children || name || href;
  if (bare) {
    return <a href={href}>{label}</a>;
  }
  return <a className="cx-endpoint" data-kind="doc" href={href}>
      <span className="cx-endpoint-label">{label}</span>
      <span className="cx-endpoint-method">DOC</span>
    </a>;
};

One template renders differently in every inbox it reaches. Device Preview runs it on the clients you pick and screenshots each one.

Not a simulation of Outlook. Outlook itself, on Windows, opening your message.

<Frame caption="A Device Preview run across desktop, mobile, and webmail clients">
  <img src="https://mintcdn.com/courier-4f1f25dc/fN1MbwzHtG3Vhos5/assets/device-preview-run.webp?fit=max&auto=format&n=fN1MbwzHtG3Vhos5&q=85&s=3a72245c94a9f299aadc73e35df2e628" alt="A Device Preview run showing one email rendered on Apple Mail, Gmail, and Outlook, in light and dark mode" width="1600" height="918" data-path="assets/device-preview-run.webp" />
</Frame>

## Run a preview

Open a template in <Doc href="/docs/design/templates/design-studio">Design Studio</Doc> and click the **device** icon in the toolbar. Previews render whatever is in the editor right now, including unpublished changes.

Choose a **target set**, the group of clients you want to render on. Every workspace starts with **Courier Recommended**, an 8-client set spanning desktop, mobile, and webmail in both light and dark mode. Build your own from the [full catalog](#supported-clients).

If your template is <Doc href="/docs/design/elemental/locales">localized</Doc>, choose which translation to render. Set test values for any variables, such as `profile.name`.

<Warning>
  Variables left empty render as written, so `{{profile.name}}` appears literally in the screenshot. That is the most common reason a preview looks broken when the template is fine.
</Warning>

Click **Run preview**. Screenshots load as they return, and a full run takes 10 to 60 seconds depending on how many clients you picked.

## Review the results

Click a screenshot to open it full size, then use the arrows to move through the run. Each one shows the full inbox view, so you can check the subject line and sender name along with the email body. Download any screenshot from the results page.

### Find past runs

Click **Preview history** for past runs. Each shows when it ran, how many clients it covered, and which template version was live at the time.

That last part is the useful one. It tells you whether a rendering problem is new or shipped several versions ago.

Runs are kept for one year.

## Build a target set

Create your own target sets to focus on the variations you care about. You might keep one for Outlook versions, another for dark mode across mobile, and a third for the clients most of your users are on.

Open the **Targets** dropdown and click **Create new set**. Name it, filter the catalog by **Mobile**, **Web**, or **Application**, then add the clients you want. Use the pencil icon to edit a set later.

Sets are shared with your workspace and scoped to the <Doc href="/docs/workspaces/overview#environments-and-api-keys">environment</Doc> you are in.

## Pricing

Device Preview is a paid monthly add-on. Enable it in the console under **Settings → Billing**.

Each plan includes a set number of previews per month, and anything beyond that is billed per preview. Included previews reset each month and do not roll over.

| Plan       | Monthly price | Previews included | Overage per preview |
| ---------- | ------------: | ----------------: | ------------------: |
| Developer  |          \$20 |               100 |              \$0.20 |
| Business   |          \$50 |               400 |              \$0.15 |
| Enterprise |         \$100 |             1,000 |              \$0.12 |

## Supported clients

A **client** is one combination of app, device, OS, browser, and colour mode. The catalog below is the current set, and new devices and OS versions are added over time.

### Desktop applications

| App                    | Device | OS         | Modes       |
| ---------------------- | ------ | ---------- | ----------- |
| Apple Mail 16          | Mac    | macOS 13   | Light, Dark |
| Outlook 2016           | PC     | Windows 10 | Light       |
| Outlook 2016 (120 dpi) | PC     | Windows 10 | Light       |
| Outlook 2019           | PC     | Windows 10 | Light       |
| Outlook 2019 (120 dpi) | PC     | Windows 10 | Light       |
| Outlook 2024           | PC     | Windows 11 | Light, Dark |
| Outlook Microsoft 365  | Mac    | macOS 13   | Light, Dark |
| Outlook Microsoft 365  | PC     | Windows 11 | Light, Dark |
| Outlook Office 365     | PC     | Windows 10 | Light, Dark |

### Mobile applications

| App        | OS         | Devices                                                     | Modes       |
| ---------- | ---------- | ----------------------------------------------------------- | ----------- |
| Apple Mail | iOS 16     | iPhone 14, iPhone 14 Pro, iPhone 14 Pro Max                 | Light, Dark |
| Apple Mail | iOS 17     | iPhone 15, iPhone 15 Plus, iPhone 15 Pro, iPhone 15 Pro Max | Light, Dark |
| Apple Mail | iOS 18     | iPhone 16, iPhone 16 Pro, iPhone 16 Pro Max                 | Light, Dark |
| Apple Mail | iOS 26     | iPhone 17, iPhone 17 Pro Max                                | Light, Dark |
| Gmail      | iOS 26     | iPhone 16                                                   | Dark        |
| Gmail      | Android 12 | Pixel 6                                                     | Light, Dark |
| Gmail      | Android 13 | Pixel 7                                                     | Light, Dark |
| Gmail      | Android 14 | Pixel 8                                                     | Light, Dark |
| Gmail      | Android 15 | Pixel 9                                                     | Light, Dark |
| Gmail      | Android 16 | Pixel 10                                                    | Light, Dark |
| Outlook    | iOS 15     | iPhone 13                                                   | Light, Dark |

### Webmail

| Service          | Browsers              | OS         | Modes       |
| ---------------- | --------------------- | ---------- | ----------- |
| AOL.com          | Chrome, Edge, Firefox | Windows 10 | Light, Dark |
| Free.fr          | Chrome, Edge, Firefox | Windows 10 | Light, Dark |
| Gmail.com        | Chrome, Edge, Firefox | Windows 10 | Light, Dark |
| GMX              | Chrome, Edge, Firefox | Windows 10 | Light       |
| Libero           | Chrome, Edge, Firefox | Windows 10 | Light       |
| Microsoft365.com | Edge, Firefox         | Windows 10 | Light, Dark |
| Outlook.com      | Chrome, Edge, Firefox | Windows 10 | Light, Dark |
| T-Online         | Chrome, Edge, Firefox | Windows 10 | Light       |
| Web.de           | Chrome, Edge, Firefox | Windows 10 | Light       |
| Yahoo.com        | Chrome, Edge, Firefox | Windows 10 | Light, Dark |

## Limits & behavior

* **Previews render the editor, not the published version.** Unpublished changes are included, so a preview can show content no recipient has received.
* **Runs are kept for one year.** Preview history records the template version that was live at the time.
* **Target sets are per environment.** A set built in Test is not available in Production.
* **The catalog changes.** Devices and OS versions are added over time, so a saved target set may cover more clients later than it did when you built it.
