JSX email • Email Provider Integrations

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 emal provider that takes a string for content input, this page will demonstrate use with a few popular providers.

AWS SES

tsx

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?'
    }
  }
});

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

tsx

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

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

tsx

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

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

tsx

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

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.

tsx

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?'
});

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

tsx

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

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

tsx

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

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

Email Provider Integrations ​

AWS SES ​

Mailersend ​

Nodemailer ​

Postmark ​

Resend ​

Sendgrid ​

Plunk ​