# React Email and templates

Build emails in React or reuse project templates with variables.

Source: https://docs.ravenrelay.joshlab.site/email-templates

Agent index: https://docs.ravenrelay.joshlab.site/llms.txt
OpenAPI: https://docs.ravenrelay.joshlab.site/openapi.json

## Send a React component

The Node SDK renders React Email components in your application into HTML and plain text before sending. React code is never uploaded or executed by RavenRelay. Existing HTML and text sending does not require React.

> The Node SDK is available on npm as @ravenrelay/node, starting with version 0.1.0. It requires Node.js 22.9 or later and runs on the server.

Install for React email rendering

```
npm install @ravenrelay/node react@19 react-email@6.11.1
```

React and react-email are optional peer dependencies of the SDK. Install both for the example below: WelcomeEmail uses React Email components internally, and passing the react field makes the SDK load React Email’s renderer to generate HTML and plain text. Your application does not need to import react-email directly when using a starter component.

Welcome email · TSX

```
import { RavenRelay } from "@ravenrelay/node";
import { WelcomeEmail } from "@ravenrelay/node/templates";

const client = new RavenRelay({
  apiKey: process.env.RAVENRELAY_API_KEY!,
  baseUrl: "https://api-production-1c6a.up.railway.app",
});
await client.emails.send({
  from: "accounts@example.com",
  to: "user@example.com",
  subject: "Welcome to your account",
  react: <WelcomeEmail appName="Your app" name="Joshua" actionUrl="https://example.com/account" />,
}, { idempotencyKey: "welcome-user-123" });
```

> React Email rendering requires React 19 and react-email 6.11.1. Supply your own text to override the generated plain-text version. Do not combine react with html or a saved template.

Starter components include WelcomeEmail, VerificationEmail, PasswordResetEmail and ReceiptEmail. They contain no RavenRelay branding. You can also pass your own React Email component.

If you send HTML, plain text or a saved dashboard template instead of a React component, install only the SDK. React and react-email are not required for those sends.

Install for HTML, text or saved templates

```
npm install @ravenrelay/node
```

## Starter templates

Browse the four built-in Node.js templates below. Each preview uses the same SDK component as its copyable TSX example. All props are required strings. These examples use sample values; supply your own app name, recipient details and action URLs. Your application generates and validates verification and password-reset links.

### Welcome

Welcome: Introduce your product and help new users get started. Required props: appName, name, actionUrl.

[Open Welcome in the template library](https://app.ravenrelay.joshlab.site/templates?tab=library#welcome)

WelcomeEmail · TSX

```
import { RavenRelay } from "@ravenrelay/node";
import { WelcomeEmail } from "@ravenrelay/node/templates";

const client = new RavenRelay({
  apiKey: process.env.RAVENRELAY_API_KEY!,
  baseUrl: "https://api-production-1c6a.up.railway.app",
});
await client.emails.send({
  from: "accounts@example.com",
  to: "user@example.com",
  subject: "Welcome to Your app",
  react: <WelcomeEmail appName="Your app" name="Joshua" actionUrl="https://example.com/account" />,
}, { idempotencyKey: "welcome-user-123" });
```

### Email verification

Email verification: Confirm email ownership with a verification link. Required props: appName, name, actionUrl.

[Open Email verification in the template library](https://app.ravenrelay.joshlab.site/templates?tab=library#verification)

VerificationEmail · TSX

```
import { RavenRelay } from "@ravenrelay/node";
import { VerificationEmail } from "@ravenrelay/node/templates";

const client = new RavenRelay({
  apiKey: process.env.RAVENRELAY_API_KEY!,
  baseUrl: "https://api-production-1c6a.up.railway.app",
});
await client.emails.send({
  from: "accounts@example.com",
  to: "user@example.com",
  subject: "Verify your email address",
  react: <VerificationEmail appName="Your app" name="Joshua" actionUrl="https://example.com/verify" />,
}, { idempotencyKey: "verification-user-123" });
```

### Password reset

Password reset: Help users securely reset a password in your application. Required props: appName, name, actionUrl.

[Open Password reset in the template library](https://app.ravenrelay.joshlab.site/templates?tab=library#password-reset)

PasswordResetEmail · TSX

```
import { RavenRelay } from "@ravenrelay/node";
import { PasswordResetEmail } from "@ravenrelay/node/templates";

const client = new RavenRelay({
  apiKey: process.env.RAVENRELAY_API_KEY!,
  baseUrl: "https://api-production-1c6a.up.railway.app",
});
await client.emails.send({
  from: "accounts@example.com",
  to: "user@example.com",
  subject: "Reset your password",
  react: <PasswordResetEmail appName="Your app" name="Joshua" actionUrl="https://example.com/reset" />,
}, { idempotencyKey: "password-reset-user-123" });
```

### Receipt

Receipt: Send a clear purchase receipt with a reference, amount and date. Required props: appName, name, reference, amount, date.

[Open Receipt in the template library](https://app.ravenrelay.joshlab.site/templates?tab=library#receipt)

ReceiptEmail · TSX

```
import { RavenRelay } from "@ravenrelay/node";
import { ReceiptEmail } from "@ravenrelay/node/templates";

const client = new RavenRelay({
  apiKey: process.env.RAVENRELAY_API_KEY!,
  baseUrl: "https://api-production-1c6a.up.railway.app",
});
await client.emails.send({
  from: "accounts@example.com",
  to: "user@example.com",
  subject: "Your receipt",
  react: <ReceiptEmail appName="Your app" name="Joshua" reference="ORDER-123" amount="$49.00" date="15 October 2026" />,
}, { idempotencyKey: "receipt-user-123" });
```

## Reusable dashboard templates

Open Templates in your project to create a named HTML or plain-text template. Its slug is unique within that project. Use flat placeholders such as {{name}} in the subject and body, then preview with sample JSON values. Owners, administrators and developers can create, edit and delete; viewers can read and preview.

Send a saved template

```
curl https://api-production-1c6a.up.railway.app/v1/emails \
  -H "Authorization: Bearer $RAVENRELAY_API_KEY" \
  -H 'Content-Type: application/json' \
  -H 'Idempotency-Key: welcome-user-123' \
  -d '{"from":"accounts@example.com","to":"user@example.com","template":"welcome","variables":{"name":"Joshua"}}'
```

Supply every placeholder and no extra variables. Values may be strings, finite numbers or booleans. HTML values are escaped; placeholders do not execute code, access nested properties or inject raw HTML. Use quoted HTML attributes and validate action URLs in your application.

Saved template sends use the same API keys, domain restrictions, recipient limits, quota checks and suppression rules as other sends. Accepted messages retain their rendered content. Editing or deleting a template cannot change queued messages; retrying the same idempotency key and input reuses the original accepted message.

> Template management uses your authenticated dashboard session. Sending uses a project API key. Reusable templates remain until you delete them; email-log retention does not delete templates. Preview strips unsafe elements and blocks remote images, so preview appearance may differ from a delivered email.