Docs

Send React Email with Ranla

Use React Email to author components, preview them locally, then send React Email through the Ranla Node SDK — without tying delivery to a single ESP. 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 Ranla — keep authoring in your app. Ranla is not affiliated with the React Email project; we are a transactional send API that optionally renders your components at send time.

About React Email

React Email is a separate open-source project (MIT license) for authoring email UIs with React. Install @react-email/render and optional @react-email/components in your application. Ranla does not bundle React Email — the SDK optionally calls @react-email/render at send time to produce HTML for our API. Author and preview with React Email’s own CLI; delivery is through Ranla.

Prerequisites

  • A Ranla API key (rnl_…)
  • A verified sending domain (or sandbox: from = [email protected], to = your account email)
  • Node 18+

1. Install

npm install @supersend/ranla @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). Ranla is not involved until you send.

3. Send with the SDK

import { Ranla } from '@supersend/ranla'
import { WelcomeEmail } from './emails/WelcomeEmail'

const client = new Ranla(process.env.RANLA_API_KEY!)

await client.emails.send({
  from: '[email protected]',
  to: '[email protected]',
  subject: 'Welcome',
  react: WelcomeEmail({ name: 'Ada' }),
})

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

Rules:

  • react is mutually exclusive with html, text, and template
  • Server-side only — never put rnl_ 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 { Ranla } from '@supersend/ranla'
import { WelcomeEmail } from '@/emails/WelcomeEmail'

const tx = new Ranla(process.env.RANLA_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: '[email protected]',
    to,
    subject: 'Welcome',
    react: WelcomeEmail({ name }),
  })

  return NextResponse.json(result)
}

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

5. Keep templates in your repo

Rendering at send time means your app must redeploy to change copy. If you want your components to stay in git but let the send happen by alias — so a teammate can trigger sends, and non-engineers can read what went out — push the rendered output to a template:

supersendtx templates push ./emails/WelcomeEmail.tsx \
  --alias welcome \
  --subject "Welcome" \
  --props '{"name":"Ada"}' \
  --publish

The CLI imports the file in your process, renders it with @react-email/render, and uploads the resulting HTML and text. Your component source never leaves your machine.

  • --alias is the key. The command creates the template on first push and updates it after.
  • --subject is required only when creating.
  • --props supplies props for rendering. Use {{variable}} placeholders in the output for values that should be substituted per send.
  • --publish cuts a new published version, which is what template: { id: 'welcome' } sends.
  • .html and .txt files work too; --text ./welcome.txt attaches a hand-written text part.

TypeScript and JSX files need a loader. Install tsx (npm install -D tsx) or pre-render to .html.

Then send by alias from anywhere, with no component import:

await client.emails.send({
  from: '[email protected]',
  to: '[email protected]',
  template: { id: 'welcome', variables: { name: 'Ada' } },
})

Wire the push into CI to keep the platform in sync with main.

6. Already have HTML?

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

await client.emails.send({
  from: '[email protected]',
  to: '[email protected]',
  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

FAQ

Can I use React Email without Resend?

Yes. React Email is an open-source authoring toolchain. Ranla’s Node SDK accepts react the same way many teams expect from a modern send API: install supersendtx + @react-email/render, pass your component to emails.send({ react }), and we deliver HTML over our transactional infrastructure. Preview still uses React Email’s CLI.

Is react the same as dashboard templates?

No. react renders in your Node process at send time (or you push rendered HTML with supersendtx templates push). Dashboard templates are stored aliases with variables for non-engineers and multi-language SDKs. Many teams use React Email in git for critical flows and aliases for stable receipts.

Why did send fail with a peer dependency error?

The react option requires @react-email/render (and react) installed in the app. Without that peer, use html, text, or template instead — or run npm install @react-email/render react.