Skip to main content
Postmark is a fast and reliable transactional email service designed for applications. It focuses on deliverability and provides detailed analytics for your emails.

​
Installation

1

Install dependencies

Install React Email components and the Postmark SDK:
npm install react-email @react-email/components postmark
2

Set up your API key

Get your Server API token from Postmark and add it to your environment variables:
POSTMARK_API_KEY=your-server-token

​
Usage

​
Create an email component

emails/email.tsx
import { Button, Html } from '@react-email/components';

interface EmailProps {
  url: string;
}

export const Email: React.FC<Readonly<EmailProps>> = ({ url }) => {
  return (
    <Html lang="en">
      <Button href={url}>Click me</Button>
    </Html>
  );
};

​
Send the email

index.tsx
import { render } from '@react-email/components';
import postmark from 'postmark';
import { Email } from './email';

const client = new postmark.ServerClient(process.env.POSTMARK_API_KEY || '');

const emailHtml = await render(<Email url="https://example.com" />);

const options = {
  From: 'you@example.com',
  To: 'user@gmail.com',
  Subject: 'hello world',
  HtmlBody: emailHtml,
};

await client.sendEmail(options);

​
Advanced features

​
Multiple recipients

await client.sendEmail({
  From: 'you@example.com',
  To: 'user1@gmail.com, user2@gmail.com',
  Subject: 'hello world',
  HtmlBody: emailHtml,
});

​
CC and BCC

await client.sendEmail({
  From: 'you@example.com',
  To: 'user@gmail.com',
  Cc: 'cc@example.com',
  Bcc: 'bcc@example.com',
  Subject: 'hello world',
  HtmlBody: emailHtml,
});

​
Plain text version

import { render } from '@react-email/components';

const emailHtml = await render(<Email url="https://example.com" />);
const emailText = await render(<Email url="https://example.com" />, {
  plainText: true,
});

await client.sendEmail({
  From: 'you@example.com',
  To: 'user@gmail.com',
  Subject: 'hello world',
  HtmlBody: emailHtml,
  TextBody: emailText,
});

​
Tags and metadata

Postmark allows you to add tags and metadata for tracking: 
await client.sendEmail({
  From: 'you@example.com',
  To: 'user@gmail.com',
  Subject: 'hello world',
  HtmlBody: emailHtml,
  Tag: 'welcome-email',
  Metadata: {
    user_id: '12345',
    campaign: 'onboarding',
  },
});

await client.sendEmail({
  From: 'you@example.com',
  To: 'user@gmail.com',
  Subject: 'hello world',
  HtmlBody: emailHtml,
  TrackOpens: true,
  TrackLinks: 'HtmlAndText',
});

​
Attachments

import fs from 'fs';

const attachment = fs.readFileSync('/path/to/file.pdf').toString('base64');

await client.sendEmail({
  From: 'you@example.com',
  To: 'user@gmail.com',
  Subject: 'hello world',
  HtmlBody: emailHtml,
  Attachments: [
    {
      Name: 'document.pdf',
      Content: attachment,
      ContentType: 'application/pdf',
    },
  ],
});

​
Error handling

try {
  const response = await client.sendEmail(options);
  console.log('Email sent:', response.MessageID);
} catch (error) {
  console.error('Postmark error:', error.message);
}

​
Important notes

  • Postmark uses capitalized field names (e.g., From, To, Subject)
  • You need to verify your sender signature or domain before sending
  • Postmark focuses on transactional emails, not marketing emails

Build docs developers (and LLMs) love

Get started for freeTalk to us