Skip to content
FRAME / docs

Search is only available in production builds. Try building and previewing the site to test it out locally.

Logical Architecture

The architecture of @frame/mail cleanly separates the graphic design of templates from the imperative SMTP send logic.

Flow Diagram

Section titled “Flow Diagram”

The email send cycle through the ecosystem follows an Ahead of Time Rendering pattern:

graph LR
    A[React Component] --> B(Rendering Engine)

    B --> C{HTML String}
    B --> D{Plain Text String}

    C --> E[Nodemailer Transporter]
    D --> E

    E --> F[External SMTP Server]
    F --> G((User Inbox))

    style A fill:#000000,stroke:#333,stroke-width:2px,color:#fff

Directory Organization

Section titled “Directory Organization”

Inside the package, the structure promotes easy access to export functions:

  • templates/: Stores all React Email components. Typically, each template is a .tsx file that exports a default component and is accompanied by interfaces or Zod schemas to validate props.
  • components/: Small reusable visual fragments (such as the corporate Header, Footer, or Logo) shared across multiple templates.
  • transporter/: SMTP client configuration via nodemailer, defining ports, host, credential validation, and pooling.

Creating a New Template

Section titled “Creating a New Template”

To add a new email to the system:

  1. Create the File: Add a new .tsx component in the templates/ directory.
  2. Define Typed Props: Declare an interface for dynamic data (e.g. userName, actionLink). Properties must be strictly typed.
  3. Build the Layout: Use React Email primitives (<Html>, <Head>, <Preview>, <Body>, <Container>, <Text>) instead of generic HTML to ensure correct rendering in restrictive clients such as Outlook.
  4. Export the Render Function: Export a method that wraps the async render to produce both the HTML body and the plain-text fallback.