email-providers.md

title	description
Email Provider Integrations	Use JSX email with an Email Provider of your choice

Using JSX email with email providers or integrations is as simple as rendering the template you've already built. Rendering transforms your template from JSX/TSX into HTML, and optionally plain text. That's accomplished with the jsx-email render method. We're going to assume that you've made it through the Quick Start Guide before arriving here, and have an email template to use.

While JSX email can be used with just about any email provider that takes a string for content input, this page will demonstrate use with a few popular providers.

AWS SES

import { render } from 'jsx-email';
import { SES } from '@aws-sdk/client-ses';

import { BatmanTemplate } from './emails/Batman.tsx';

const ses = new SES({ region: process.env.AWS_SES_REGION });
const html = render(<BatmanTemplate firstName="Bruce" lastName="Wayne" />);

await ses.sendEmail({
  Source: 'penguin@joker.us',
  Destination: {
    ToAddresses: ['bruce@wayneinc.com']
  },
  Message: {
    Body: {
      Html: {
        Charset: 'UTF-8',
        Data: html
      }
    },
    Subject: {
      Charset: 'UTF-8',
      Data: 'Did you get that thing I sent you?'
    }
  }
});

Mailersend

import { render } from 'jsx-email';
import { MailerSend, EmailParams, Sender, Recipient } from 'mailersend';

import { BatmanTemplate } from './emails/Batman.tsx';

const mailerSend = new MailerSend({
  apiKey: process.env.MAILERSEND_API_KEY || ''
});

const html = render(<BatmanTemplate firstName="Bruce" lastName="Wayne" />);
const sentFrom = new Sender('penguin@joker.us', 'Copperpot');
const recipients = [new Recipient('bruce@wayneinc.com', 'Bruce Wayne')];

const params = new EmailParams()
  .setFrom(sentFrom)
  .setTo(recipients)
  .setSubject('This is a Subject')
  .setHtml(html);

mailerSend.email.send(params);

Nodemailer

import { render } from 'jsx-email';
import nodemailer from 'nodemailer';

import { BatmanTemplate } from './emails/Batman.tsx';

const html = render(<BatmanTemplate firstName="Bruce" lastName="Wayne" />);
const transport = nodemailer.createTransport({
  host: 'smtp.forwardemail.net',
  port: 465,
  secure: true,
  auth: {
    user: 'batman',
    pass: 'j0ker$mells!1'
  }
});

await transport.sendMail({
  from: 'penguin@joker.us',
  to: 'bruce@wayneinc.com',
  subject: 'Did you get that thing I sent you?',
  html: html
});

Postmark

import { render } from 'jsx-email';
import { ServerClient } from 'postmark';

import { BatmanTemplate } from './emails/Batman.tsx';

const client = new ServerClient(process.env.POSTMARK_API_KEY);
const html = render(<BatmanTemplate firstName="Bruce" lastName="Wayne" />);

client.sendEmail({
  From: 'penguin@joker.us',
  To: 'bruce@wayneinc.com',
  Subject: 'Did you get that thing I sent you?',
  HtmlBody: html
});

Resend

::: tip The resend package ships with support for react-email with its react property on sendEmail. However, react-email is fairly far behind jsx-email in terms of functionality, and its render method cannot process the advanced features in jsx-email. Because of that, users should run jsx-email's render method as shown below, to render html first, and pass that to the sendEmail function. :::

import { render } from 'jsx-email';
import { Resend } from 'resend';

import { BatmanTemplate } from './emails/Batman.tsx';

const resend = new Resend('re_123456789');
const template = <BatmanTemplate firstName="Bruce" lastName="Wayne" />;
const html = await render(template);

resend.sendEmail({
  from: 'penguin@joker.us',
  html,
  to: 'bruce@wayneinc.com',
  subject: 'Did you get that thing I sent you?'
});

Sendgrid

import { render } from 'jsx-email';
import sendgrid from '@sendgrid/mail';

import { BatmanTemplate } from './emails/Batman.tsx';

sendgrid.setApiKey(process.env.SENDGRID_API_KEY);

const html = render(<BatmanTemplate firstName="Bruce" lastName="Wayne" />);

sendgrid.send({
  from: 'penguin@joker.us',
  to: 'bruce@wayneinc.com',
  subject: 'Did you get that thing I sent you?',
  html: html
});

Plunk

import { render } from 'jsx-email';
import Plunk from '@plunk/node';

import { BatmanTemplate } from './emails/Batman.tsx';

const plunk = new Plunk(process.env.PLUNK_API_KEY);

const html = render(<BatmanTemplate firstName="Bruce" lastName="Wayne" />);

plunk.emails.send({
  from: 'penguin@joker.us',
  to: 'bruce@wayneinc.com',
  subject: 'Did you get that thing I sent you?',
  body: html
});