resend · gabrielmfern · Nov 26, 2025 · Nov 26, 2025 · Nov 26, 2025 · Nov 26, 2025
diff --git a/with-express-react-email/.babelrc b/with-express-react-email/.babelrc
diff --git a/with-express-react-email/.env.example b/with-express-react-email/.env.example
@@ -0,0 +1 @@
+RESEND_API_KEY=re_xxxxxxxxxx
diff --git a/with-express-react-email/.eslintrc.js b/with-express-react-email/.eslintrc.js
diff --git a/with-express-react-email/.prettierignore b/with-express-react-email/.prettierignore
diff --git a/with-express-react-email/.prettierrc.js b/with-express-react-email/.prettierrc.js
diff --git a/with-express-react-email/package.json b/with-express-react-email/package.json
@@ -1,27 +1,23 @@
 {
   "name": "with-express-react-email",
   "version": "1.0.0",
-  "main": "index.js",
   "license": "MIT",
   "scripts": {
-    "dev": "ts-node src/server",
-    "lint": "eslint --fix --ext .ts ./src",
-    "format": "prettier --write ."
+    "dev": "tsx --env-file=.env src/server"
   },
   "dependencies": {
-    "@react-email/render": "0.0.12",
+    "@react-email/components": "1.0.1",
     "express": "4.20.0",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
     "resend": "3.2.0"
   },
   "devDependencies": {
-    "@babel/cli": "7.23.9",
-    "@babel/core": "7.23.9",
-    "@babel/preset-env": "7.23.9",
-    "@babel/preset-react": "7.23.3",
-    "@typescript-eslint/eslint-plugin": "7.1.0",
-    "@typescript-eslint/parser": "7.1.0",
-    "eslint": "8.56.0",
-    "prettier": "3.2.5",
+    "@types/express": "5.0.5",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
+    "react-email": "5.0.5",
+    "tsx": "4.20.6",
     "typescript": "5.3.3"
   }
 }
diff --git a/with-express-react-email/readme.md b/with-express-react-email/readme.md
@@ -10,7 +10,7 @@ This example show how to send Resend emails with Express and React Email.
 yarn
 ```
 
-### 2. Create a `.env` file at the root and add your Resend API
+### 2. Create a `.env` file at the root and add your Resend API Key
 
 ```bash
 RESEND_API_KEY=re_8m9gwsVG_6n94KaJkJ42Yj6qSeVvLq9xF
@@ -28,14 +28,14 @@ You can update the `from` and `to` here so send from your own domain and to your
 
 ```tsx
 const data = await resend.emails.send({
-  from: 'Acme <onboarding@resend.dev>',
-  to: ['[email protected]'],
+  from: 'Acme <waitlist@acme.dev>',
+  to: ['[email protected]'],
   subject: 'Waitlist',
-  html: '<h1>Hi</h1>',
-  headers: {
-    'X-Entity-Ref-ID': uuid(),
-  },
+  react: <WaitlistEmail name="Bu" />,
 });
 ```
 
-_Note_: `babel-node`` is not meant for production use. It's recommended to precompile your files and run the compiled resources in production.
+### 5. Open URL in your browser
+
+Go to http://localhost:3000/send
+
diff --git a/...t-email/transactional/emails/waitlist.tsx → ...press-react-email/src/emails/waitlist.tsx b/...t-email/transactional/emails/waitlist.tsx → ...press-react-email/src/emails/waitlist.tsx
@@ -7,29 +7,30 @@ import {
   Preview,
   Text,
 } from '@react-email/components';
-import * as React from 'react';
 
 interface WaitlistEmailProps {
   name: string;
 }
 
-export const WaitlistEmail: React.FC<Readonly<WaitlistEmailProps>> = ({
-  name,
-}) => (
-  <Html>
-    <Head />
-    <Preview>Thank you for joining our waitlist and for your patience</Preview>
-    <Body style={main}>
-      <Container style={container}>
-        <Heading style={h1}>Coming Soon.</Heading>
-        <Text style={text}>
-          Thank you {name} for joining our waitlist and for your patience. We
-          will send you a note when we have something new to share.
-        </Text>
-      </Container>
-    </Body>
-  </Html>
-);
+export function WaitlistEmail({ name }: WaitlistEmailProps) {
+  return (
+    <Html>
+      <Head />
+      <Preview>
+        Thank you for joining our waitlist and for your patience
+      </Preview>
+      <Body style={main}>
+        <Container style={container}>
+          <Heading style={h1}>Coming Soon.</Heading>
+          <Text style={text}>
+            Thank you {name} for joining our waitlist and for your patience. We
+            will send you a note when we have something new to share.
+          </Text>
+        </Container>
+      </Body>
+    </Html>
+  );
+}
 
 export default WaitlistEmail;
 

diff --git a/with-express-react-email/src/lib/resend.ts b/with-express-react-email/src/lib/resend.ts
@@ -1,3 +1,3 @@
 import { Resend } from 'resend';
 
-export const resend = new Resend(process.env.RESEND_API_KEY!);
+export const resend = new Resend(process.env.RESEND_API_KEY);
diff --git a/with-express-react-email/src/server.ts b/with-express-react-email/src/server.ts
diff --git a/with-express-react-email/src/server.tsx b/with-express-react-email/src/server.tsx
@@ -0,0 +1,22 @@
+import express, { type Request, type Response } from 'express';
+import { WaitlistEmail } from './emails/waitlist';
+import { resend } from './lib/resend';
+
+const app = express();
+
+app.get('/send', async (_req: Request, res: Response) => {
+  const response = await resend.emails.send({
+    from: 'Acme <[email protected]>',
+    to: ['[email protected]'],
+    subject: 'Waitlist',
+    react: <WaitlistEmail name="Bu" />,
+  });
+
+  return res.status(response.error ? 500 : 200).json(response);
+});
+
+const port = process.env.PORT || 3000;
+
+app.listen(port, () => {
+  console.log(`Server is running on http://localhost:${port}`);
+});
diff --git a/with-express-react-email/transactional/package.json b/with-express-react-email/transactional/package.json
diff --git a/with-express-react-email/transactional/readme.md b/with-express-react-email/transactional/readme.md