Emails

MJML email templates compiled to HTML, with live preview and one-click sending via Resend.

Preview & send test

Open the full-screen preview to see the compiled email template and send a test email via Resend.

Setup

Add your Resend API key and recipient emails to .env in the project root. After changing .env values, restart the dev server (pnpm dev).

VITE_RESEND_API_KEY=re_xxxxxxxxxx
VITE_RESEND_TO=resend@email.com

File structure

src/mails/
  mjml/
    template.mjml        // MJML source (edit this)
  template.html          // Auto-compiled output (do not edit)
  index.html             // Preview page with send button
  images/
    mailer-logo@2x.png
    mailer-logo-small@2x.png
    fb-logo@2x.png
    link-logo@2x.png

MJML basics

MJML uses its own component tags (<mj-section>, <mj-column>, <mj-text>, etc.) that compile to table-based HTML compatible with all major email clients.

Minimal template

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text>Hello world</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Custom fonts

<mj-head>
  <mj-font
    name="Urbanist"
    href="https://fonts.googleapis.com/css2?family=Urbanist:wght@300;500"
  />
</mj-head>

Images

<mj-image
  src="images/mailer-logo@2x.png"
  width="181px"
  align="left"
/>

Image paths are relative to the src/mails/ directory. Place assets in src/mails/images/.