Guides

Build the email in React, send it with Notix.

Render a React Email component to HTML and plain text, then send both through the Notix API with the Node.js SDK. Every endpoint named here is in the API reference.

React Email builds emails from React components. Render the component to HTML and pass the HTML to Notix.

Install

terminal

npm install notix-js @react-email/components @react-email/render
# or: pnpm add / yarn add / bun add

Write the email

emails/receipt.tsx

import { Button, Html, Text } from "@react-email/components";

export function ReceiptEmail({ orderId, url }: { orderId: string; url: string }) {
  return (
    <Html lang="en">
      <Text>Thanks for your order {orderId}.</Text>
      <Button href={url}>View your receipt</Button>
    </Html>
  );
}

Render and send

send-receipt.tsx

import { Notix } from "notix-js";
import { render } from "@react-email/render";
import { ReceiptEmail } from "./emails/receipt";

const notix = new Notix(process.env.NOTIX_API_KEY);

const html = await render(<ReceiptEmail orderId="4471" url="https://acme.com/orders/4471" />);
const text = await render(<ReceiptEmail orderId="4471" url="https://acme.com/orders/4471" />, { plainText: true });

const { data, error } = await notix.emails.send({
  from: "Acme <receipts@acme.com>",
  to: "customer@example.com",
  subject: "Your receipt for order 4471",
  html,
  text,
});

Send both html and text: some mail clients show only one. The from address must be on a domain you have verified in Notix.

TypeScript and JSX

Files that contain JSX need JSX enabled. In TypeScript, set it in tsconfig.json:

tsconfig.json

{
  "compilerOptions": { "jsx": "react-jsx" }
}

In a Next.js app this is already set. For a full Next.js route that sends a React Email template, see Send email from Next.js.