SuperSend TXDocs

Send React Email with SuperSend TX

Use React Email to author components, preview them locally, then send with the SuperSend TX Node SDK. The SDK accepts a react element and compiles it to HTML before POST /emails.

You do not need to fork React Email or add @react-email/components to SuperSend TX — keep authoring in your app.

Prerequisites

  • A SuperSend TX API key (stx_…)
  • A verified sending domain (or sandbox: from = noreply@mail.supersendtx.com, to = your account email)
  • Node 18+

1. Install

npm install supersendtx @react-email/render react
# Optional — components + local preview tooling from React Email
npm install @react-email/components
npx create-email@latest

@react-email/render is an optional peer of supersendtx. Install it only if you use the react option. Without it, send with html / text / template as usual.

2. Author and preview

Create a component (example):

// emails/WelcomeEmail.tsx
import * as React from 'react'
import { Html, Button, Text } from '@react-email/components'

export function WelcomeEmail({ name }: { name: string }) {
  return (
    <Html>
      <Text>Hi {name}, welcome aboard.</Text>
      <Button href="https://yourapp.com/dashboard">Open dashboard</Button>
    </Html>
  )
}

export default WelcomeEmail

Preview with React Email’s CLI / app (npx email dev or your project’s create-email setup). SuperSend TX is not involved until you send.

3. Send with the SDK

import { SuperSendTX } from 'supersendtx'
import { WelcomeEmail } from './emails/WelcomeEmail'

const client = new SuperSendTX(process.env.SUPERSENDTX_API_KEY!)

await client.emails.send({
  from: 'onboarding@yourdomain.com',
  to: 'user@example.com',
  subject: 'Welcome',
  react: WelcomeEmail({ name: 'Ada' }),
})

The SDK calls @react-email/render and POSTs { from, to, subject, html } to https://api.supersendtx.com/emails.

Rules:

  • react is mutually exclusive with html, text, and template
  • Server-side only — never put stx_ in the browser
  • Same auth, sandbox, and domain rules as any other send (Quickstart, Agent skill notes)

4. Next.js (Route Handler)

// app/api/send-welcome/route.ts
import { NextResponse } from 'next/server'
import { SuperSendTX } from 'supersendtx'
import { WelcomeEmail } from '@/emails/WelcomeEmail'

const tx = new SuperSendTX(process.env.SUPERSENDTX_API_KEY!)

export async function POST(request: Request) {
  const { to, name } = (await request.json()) as { to: string; name: string }

  const result = await tx.emails.send({
    from: 'onboarding@yourdomain.com',
    to,
    subject: 'Welcome',
    react: WelcomeEmail({ name }),
  })

  return NextResponse.json(result)
}

More Next.js patterns: Next.js framework guide.

5. Already have HTML?

If you render elsewhere (or export from React Email yourself), send html instead of react:

await client.emails.send({
  from: 'onboarding@yourdomain.com',
  to: 'user@example.com',
  subject: 'Welcome',
  html: '<p>Hi Ada</p>',
})

Or use a published dashboard template with template: { id | alias, variables }.

Troubleshooting

Symptom Fix
Error about @react-email/render npm install @react-email/render react
403 unverified domain Verify DNS or use sandbox from / account to
Want MCP / agents MCP server · Agent Skills — agents should link React Email’s own skills for authoring