Skip to main content
Every email you send contains content in one or more formats: HTML for rich visual layouts, plain text for maximum compatibility, and optionally AMP HTML for interactive experiences. Lettr supports all three and lets you combine them in a single message. The recipient’s email client chooses the best format it supports — HTML-capable clients render the rich version, while older or text-only clients fall back to plain text.

HTML Emails

HTML is the most common format for transactional and marketing emails. It supports full styling, images, links, and custom layouts:
await lettr.emails.send({
  from: 'you@example.com',
  to: ['recipient@example.com'],
  subject: 'Beautiful Email',
  html: `
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
      </head>
      <body style="font-family: Arial, sans-serif; margin: 0; padding: 20px;">
        <h1 style="color: #333;">Welcome!</h1>
        <p style="color: #666;">Thanks for signing up.</p>
      </body>
    </html>
  `
});

Plain Text Emails

Plain text emails contain no formatting — just characters. While most modern email clients support HTML, some recipients prefer plain text, and certain environments (CLI email clients, screen readers, automated systems) may only display the text version:
await lettr.emails.send({
  from: 'you@example.com',
  to: ['recipient@example.com'],
  subject: 'Plain Text Email',
  text: 'Hello!\n\nThis is a plain text email.\n\nBest regards,\nThe Team'
});
Sending both an HTML and a plain text version in the same email is the industry standard. Lettr packages them as a multipart MIME message, and the recipient’s client displays whichever format it prefers. Including both also improves deliverability, since spam filters may flag emails that contain only HTML with no text alternative:
await lettr.emails.send({
  from: 'you@example.com',
  to: ['recipient@example.com'],
  subject: 'Welcome to Acme',
  html: '<h1>Welcome!</h1><p>Thanks for joining us.</p>',
  text: 'Welcome!\n\nThanks for joining us.'
});

AMP Emails

AMP for Email enables interactive content directly inside the inbox — carousels, forms, live data, and accordion menus — without requiring the recipient to click through to a website. Support is currently limited to Gmail, Yahoo Mail, and Mail.ru, so you must always include an HTML fallback:
await lettr.emails.send({
  from: 'you@example.com',
  to: ['recipient@example.com'],
  subject: 'Interactive Email',
  html: '<p>Fallback HTML content for clients that do not support AMP</p>',
  amp_html: `
    <!doctype html>
    <html ⚡4email>
      <head>
        <meta charset="utf-8">
        <script async src="https://cdn.ampproject.org/v0.js"></script>
        <style amp4email-boilerplate>body{visibility:hidden}</style>
      </head>
      <body>
        <amp-img src="https://example.com/image.jpg"
                 width="300" height="200" layout="responsive">
        </amp-img>
      </body>
    </html>
  `
});
AMP emails require HTML fallback content. Not all email clients support AMP.

Inline CSS Processing

Most email clients strip <style> blocks from the <head>, which breaks CSS class-based styling. Lettr can automatically convert your <style> rules into inline style attributes on each element, ensuring your styles survive even in clients like Outlook and older versions of Gmail. Enable this with the inline_css option:
await lettr.emails.send({
  from: 'you@example.com',
  to: ['recipient@example.com'],
  subject: 'Styled Email',
  html: `
    <style>
      .header { color: #333; font-size: 24px; }
      .content { color: #666; }
    </style>
    <h1 class="header">Welcome</h1>
    <p class="content">Hello world</p>
  `,
  options: {
    inline_css: true
  }
});
With inline_css: true, the output becomes:
<h1 style="color: #333; font-size: 24px;">Welcome</h1>
<p style="color: #666;">Hello world</p>

Content Requirements

RuleDescription
Required contentAt least one of html, text, or a template
Subject lengthMaximum 998 characters
RecommendedInclude both HTML and plain text versions

CSS Support by Client

Email client CSS support is inconsistent. This reference table covers the most common properties and their support across major clients:
PropertyGmailOutlookApple Mail
background-colorYesYesYes
border-radiusYesNoYes
box-shadowYesNoYes
flexboxYesNoYes
gridNoNoYes

Best Practices

HTML tables remain the most reliable way to create multi-column layouts in email. Outlook’s Word-based rendering engine does not support flexbox or grid, so table-based layouts are the only way to ensure consistent structure across all major clients.
Enable the inline_css option or write styles inline directly. Many email clients strip <style> tags from the document head, which means class-based CSS will not be applied. Inline styles survive this stripping and render consistently.
Include a text version alongside your HTML. Some recipients configure their clients to display plain text only, and spam filters view emails without a text alternative as a negative signal. The text version should contain the same core information as the HTML, without formatting.
Rendering varies significantly between Gmail (web vs mobile), Outlook (Windows vs Mac), Apple Mail, and mobile clients. Send test emails to accounts on each platform and verify that layouts, images, and links display correctly before sending to your full audience.
Optimize images to reduce file size and loading time. Many mobile users are on slower connections, and large images can cause emails to load slowly or be clipped. Use compressed formats (WebP or optimized JPEG/PNG) and keep total image payload under 1 MB when possible.