This is a simple proof-of-concept for React Emailâ„¢, a next-generation mechanism for rendering beautiful emails using React and Typescript.
The server itself is powered by NodeJS, Fastify, and Connect.
Most of this code was pulled from the Connect Node guide, courtesy of the Buf team.
React Emailâ„¢ provides a few advantages that can be summarized by their call, "Stop developing emails like 2010":
- Devs feel at home with React.
- We get to bring our own responsive styling (e.g., Tailwind).
- We get a nice gallery to view and manage all our emails for free (kind of like what Storybook did for UI development).
- Client inconsistencies (across Gmail, Outlook, and others) are resolved for us.
- An event occurs in your platform (e.g., a new user signed up).
- Your platform calls this service asking ...
- ... for rendered HTML.
- ... for an email to be sent.
You can configure email sending capabilities is this service or in this service's caller — it's up to you.
At its most barebones, this service is merely an email rendering API. It's using Resend to send emails, but you could rip that out or swap it to some other email SaaS service. Up to you.
My imagined architecture is that some existing workflow in your platform that's already detecting an event can take two additional steps:
React Email provides multiple examples of integrating with 3rd-party email services. You can use any number of services for transactional email:
- Resend
- Nodemailer
- SendGrid
- Postmark
- AWS SES
- MailerSend
- Plunk
- Moosend
- Mailjet
- Mandrill
- Elastic Email
- SparkPost
It's built by the same people who maintain React Email, with several nice features:
- Affordable (free up to 3000 emails per month)
- Wide language support (lots of SDKs)
- Send emails with your own domain
- Open and click tracking
- Notifications integrations
- Track bounces and other email events
- Dedicated IPs for improved deliverability / sender reputation
- Multi-region for reduced latency, imporved resilience.
make start
curl \
--header 'Content-Type: application/json' \
--data '{"options": {"pretty": true}, "args": {"name": "Kevin"}}' \
http://localhost:8080/buf.connect.demo.eliza.v1.EmailService/CreateWelcomeEmail | jq -r '.html' > output.html
open output.html
For email sending capabilities, you'll need to sign up with
Resend, configure your own domain (optional), acquire an API key,
create a new .env
file (in the model of .env.example
), and finally, restart
the NodeJS server.
If you don't have your own domain, omit the .options.from
field from the
request.
(
cat << EOF
{
"options": {
"from": "[email protected]",
"to": ["[email protected]"],
"subject": "Welcome to the Platform",
"tags": [
{
"name": "email_name",
"value": "welcome_email"
},
{
"name": "user_id",
"value": "123"
}
]
},
"args": {
"name": "Kevin"
}
}
EOF
) |
http http://localhost:8080/buf.connect.demo.eliza.v1.EmailService/SendWelcomeEmail
(
cat << EOF
{
"options": {
"from": "[email protected]",
"to": ["[email protected]"],
"subject": "Welcome to the Platform",
"tags": [
{
"name": "email_name",
"value": "welcome_email"
},
{
"name": "user_id",
"value": "123"
}
]
},
"args": {
"author_name": "Kevin",
"review_text": "Apartment was kind of dirty, not gonna lie"
}
}
EOF
) |
http http://localhost:8080/buf.connect.demo.eliza.v1.EmailService/SendReviewEmail
(
cat << EOF
{
"options": {
"from": "[email protected]",
"to": ["[email protected]"],
"subject": "Welcome to the Platform",
"tags": [
{
"name": "email_name",
"value": "welcome_email"
},
{
"name": "user_id",
"value": "123"
}
]
},
"args": {}
}
EOF
) |
http http://localhost:8080/buf.connect.demo.eliza.v1.EmailService/SendReceiptEmail