> ## 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`, the default import of the v7 Node SDK. 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.

# Edit email HTML directly

> Edit a template's email HTML by hand and format it to render in Gmail, Outlook, and Apple Mail.

export const AppLink = ({href, children, name, bare}) => {
  const label = children || name || "Open in Courier";
  if (bare) {
    return <a href={href} target="_blank" rel="noreferrer">{label}</a>;
  }
  return <a className="cx-endpoint" data-kind="app" href={href} target="_blank" rel="noreferrer">
      <span className="cx-endpoint-label">{label}</span>
      <span className="cx-endpoint-method" aria-hidden="true">↗</span>
    </a>;
};

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>;
};

<Info>
  <Doc href="/docs/design/templates/overview">How templates work</Doc> compares the designer with code.
</Info>

When the visual designer's blocks are not enough, edit a template's email HTML directly and format it to render across Gmail, Outlook, and Apple Mail.

## Prerequisites

* <AppLink href="https://app.courier.com/content/templates">An email template</AppLink>
* Your HTML email markup

## Import and format the HTML

<Steps>
  <Step title="Open the HTML editor">
    Open the email template in the designer and click the code icon (`</>`) in the toolbar, then **Start editing**. Courier converts the current blocks to HTML and shows it in the editor.

    <Warning>
      **Editing HTML is one-directional.**<br />
      Enabling code editing creates a new version, and switching back to the visual designer discards your HTML changes. Keep a copy of your HTML, or use version history to revert.
    </Warning>
  </Step>

  <Step title="Paste and format your HTML">
    Paste your markup into the editor. It auto-formats on paste, highlights syntax, and wraps long lines. The email **subject** is edited separately in the subject field above the editor, so it is safe from your body changes.
  </Step>

  <Step title="Add variables and logic">
    Use Handlebars in the HTML to personalize each send. Reference the `data` payload (`{{order_id}}`), profile fields (`{{profile.email}}`), and use the full <Doc href="/docs/design/templates/variables">Handlebars helpers</Doc> for logic and formatting:

    ```html theme={null}
    {{#if premium_user}}
      <div class="premium-banner">Premium Member Benefits</div>
    {{/if}}

    {{#each items}}
      <tr>
        <td>{{capitalize this.name}}</td>
        <td>{{format this.price style="currency" currency="USD"}}</td>
      </tr>
    {{/each}}
    ```

    The preview panel renders your HTML with test data so you can check it before publishing.
  </Step>

  <Step title="Make the HTML email-safe">
    Email clients vary widely in their HTML and CSS support. When porting web HTML to email, work through this checklist:

    * **Replace flexbox/grid with tables.** Use `<table>`/`<tr>`/`<td>` for layout, with `role="presentation"` on layout tables for accessibility.
    * **Move all CSS inline.** External stylesheets and most `<style>` blocks are stripped (Gmail is the exception: it supports `<style>` in the `<head>`).
    * **Replace `div` containers with table cells.** Outlook 2019 ignores `max-width` on `<div>`.
    * **Set explicit pixel widths.** Percentages are unreliable in nested tables. Use a 600px max-width outer container and keep every section the same width.
    * **Use `!important` on class-based styles.** Courier's MJML compiler generates inline styles that win by default, so your custom CSS classes need `!important` to override them (see <Doc href="/docs/design/brands#css-class-names">CSS class names</Doc>).
    * **Host images externally.** Use absolute URLs. Courier does not host images for `src` paths (the exception is <Doc href="/docs/design/templates/design-studio">image blocks</Doc>).
    * **Add MSO conditionals for Outlook.** Outlook uses Word's rendering engine and needs Outlook-specific table markup.
  </Step>

  <Step title="Add Outlook compatibility">
    Outlook 2019 and earlier ignore most CSS beyond basic font, color, margin, padding, and border. Wrap Outlook-specific table structure in MSO conditional comments:

    ```html theme={null}
    <!--[if mso]>
    <table role="presentation" width="600" style="width:600px;">
      <tr><td>
    <![endif]-->
    <table role="presentation" width="100%" style="max-width:600px;">
      <!-- Email content -->
    </table>
    <!--[if mso]></td></tr></table><![endif]-->
    ```

    For a brand's MJML footer that needs Outlook support, inject the raw table with `<mj-raw>`. If MJML minification is enabled on your workspace, it can strip MSO comments from the compiled output. If your Outlook layout disappears after sending, [contact support](mailto:support@courier.com) to check whether minification is on for your workspace.
  </Step>

  <Step title="Avoid unsupported CSS">
    Modern CSS is unsupported or inconsistent in email. Avoid these without a tested fallback: `animation`/`transition` (use GIFs), `position: absolute/fixed`, `flex`/`grid` (use tables), `box-shadow` and `border-radius` (no Outlook), `opacity`, `calc()`, `filter`, pseudo-elements (`:hover`, `:before`), and `object-fit`. Design mobile-first at a 600px max width, since `@media` support is partial.
  </Step>

  <Step title="Preview across clients">
    Use the preview to check rendering with test data, then send a test and confirm the layout holds in Gmail, Outlook, and Apple Mail. Cross-client tools like Litmus or Email on Acid help catch client-specific issues.
  </Step>
</Steps>