Skip to main content

Email & Notifications

Render emails with Svelte components using MJML.

Package: @repo/notifications Built on: Nodemailer, MJML

Email Template​

Templates use MJML components for responsive emails:

<!-- lib/components/emails/templates/NewInvite.svelte -->
<script lang='ts'>
  import EmailLayout from '$lib/components/emails/layouts/EmailLayout.svelte'

  type Props = {
    name: string
    organization: { id: string; name: string }
    invitationToken: string
    url: URL
  }

  const { name, organization, invitationToken, url }: Props = $props()
</script>

<EmailLayout origin={url.origin} title="You've been invited">
  <mj-section>
    <mj-text align='center'>
      Hello {name}, you've been invited to join {organization.name}!
    </mj-text>
    <mj-column>
      <mj-button href={`${url.origin}/invite/${invitationToken}`}>
        Join {organization.name}
      </mj-button>
    </mj-column>
  </mj-section>
</EmailLayout>

Render and Send​

import { renderEmail } from '@repo/notifications'
import { sendEmail } from '$lib/library/sendEmail.server'
import NewInvite from '$lib/components/emails/templates/NewInvite.svelte'

const html = renderEmail(NewInvite, {
  name: invite.name,
  organization: session.entity.organization,
  invitationToken: invite.token,
  url,
})

await sendEmail({
  to: invite.email,
  subject: `You've been invited to join ${organization.name}`,
  html,
})

Full Documentation​

See @repo/notifications for complete API reference.