Skip to main content

Getting Started

1. Create a Svelte email component​

<!-- src/lib/emails/Hello.svelte -->
<script lang="ts">
  import { MJMLStyle } from '@repo/notifications'

  type Props = { name: string }
  const { name }: Props = $props()
</script>

<mjml>
  <mj-head>
    <MJMLStyle class="heading">
      color: #333;
      font-size: 24px;
    </MJMLStyle>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text css-class="heading">Hello, {name}!</mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

2. Render and send with nodemailer​

import { renderEmail } from '@repo/notifications'
import Hello from '$lib/emails/Hello.svelte'
import nodemailer from 'nodemailer'

const transporter = nodemailer.createTransport({
  host: 'smtp.ethereal.email',
  port: 587,
  secure: false,
  auth: {
    user: 'my_user',
    pass: 'my_password'
  }
})

const emailHtml = renderEmail(Hello, {
  name: 'John Doe'
})

const options = {
  from: 'you@example.com',
  to: 'user@gmail.com',
  subject: 'hello world',
  html: emailHtml
}

transporter.sendMail(options)