Skip to main content
Plunk is a simple and affordable email API that makes it easy to send transactional emails from your application.

Installation

1

Install dependencies

Install React Email components and the Plunk SDK:
npm install react-email @react-email/components @plunk/node
2

Set up your API key

Get your API key from Plunk and add it to your environment variables:
PLUNK_API_KEY=sk_...

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 plunkImport from '@plunk/node';
import { render } from '@react-email/components';
import { Email } from './email';

const Plunk = (
  plunkImport as unknown as {
    default: typeof plunkImport;
  }
).default;

// See https://github.com/useplunk/node/issues/2 for why Plunk.default
const plunk = new Plunk(process.env.PLUNK_API_KEY || '');

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

await plunk.emails.send({
  to: 'user@example.com',
  subject: 'Hello world',
  body: emailHtml,
});

Advanced features

From name and email

await plunk.emails.send({
  to: 'user@example.com',
  subject: 'Hello world',
  body: emailHtml,
  name: 'Your Company',
  from: 'hello@yourdomain.com',
});

Reply-to address

await plunk.emails.send({
  to: 'user@example.com',
  subject: 'Hello world',
  body: emailHtml,
  replyTo: 'support@yourdomain.com',
});

Headers

await plunk.emails.send({
  to: 'user@example.com',
  subject: 'Hello world',
  body: emailHtml,
  headers: {
    'X-Custom-Header': 'value',
  },
});

Subscribed status

Automatically update the contact’s subscribed status:
await plunk.emails.send({
  to: 'user@example.com',
  subject: 'Hello world',
  body: emailHtml,
  subscribed: true,
});

Error handling

try {
  const response = await plunk.emails.send({
    to: 'user@example.com',
    subject: 'Hello world',
    body: emailHtml,
  });
  console.log('Email sent:', response);
} catch (error) {
  console.error('Plunk error:', error);
}

Important notes

  • Module compatibility: Due to a module compatibility issue, you need to use the .default workaround shown above
  • Domain verification: Verify your sending domain in the Plunk dashboard
  • Simple API: Plunk has a straightforward API designed for ease of use

Build docs developers (and LLMs) love