Email | Sylphx Documentation

High Deliverability

Optimized infrastructure

Delivery Tracking

Opens, clicks, bounces

Bounce Handling

Auto suppression lists

Custom Domains

Send from your domain

Overview

The Email service provides high-deliverability transactional email with optimized sending infrastructure. Features React email templates, delivery tracking, bounce and complaint handling, and detailed analytics. Perfect for welcome emails, password resets, notifications, and receipts.

Send an Email

Send a transactional email with a simple API call:

import { platform } from '@/lib/platform'

const result = await platform.email.send({
  to: 'user@example.com',
  subject: 'Welcome to our app!',
  html: '<h1>Welcome!</h1><p>Thanks for signing up.</p>',
})

console.log(result.id) // Email ID for tracking

Property	Type	Description
`to`	`string \| string[]`	Recipient email(s)
`subject`	`string`	Email subject line
`html`	`string`	HTML body content
`text`	`string`	Plain text body (fallback)
`from`	`string`	Sender address (optional)
`replyTo`	`string`	Reply-to address
`cc`	`string[]`	CC recipients
`bcc`	`string[]`	BCC recipients
`tags`	`string[]`	Tags for tracking

React Email Templates

Build beautiful emails with React components:

emails/welcome.tsx

import {
  Html,
  Head,
  Body,
  Container,
  Text,
  Button,
  Preview,
} from '@react-email/components'

interface WelcomeEmailProps {
  name: string
  loginUrl: string
}

export function WelcomeEmail({ name, loginUrl }: WelcomeEmailProps) {
  return (
    <Html>
      <Head />
      <Preview>Welcome to our app, {name}!</Preview>
      <Body style={{ fontFamily: 'sans-serif' }}>
        <Container>
          <Text>Hi {name},</Text>
          <Text>Thanks for signing up! Click below to get started:</Text>
          <Button href={loginUrl}>
            Get Started
          </Button>
        </Container>
      </Body>
    </Html>
  )
}

send-welcome.ts

import { platform } from '@/lib/platform'
import { render } from '@react-email/render'
import { WelcomeEmail } from '@/emails/welcome'

const html = render(WelcomeEmail({
  name: user.name,
  loginUrl: 'https://myapp.com/login',
}))

await platform.email.send({
  to: user.email,
  subject: 'Welcome to our app!',
  html,
})

Install React Email

Run npm install @react-email/components to use React Email templates.

Custom From Address

Send from your own domain for better deliverability:

await platform.email.send({
  from: 'hello@yourdomain.com',
  to: 'user@example.com',
  subject: 'Your order confirmation',
  html: orderConfirmationHtml,
  replyTo: 'support@yourdomain.com',
})

Domain Setup

To send from your own domain, add DNS records in your dashboard. This improves deliverability and brand recognition.

Attachments

Send emails with file attachments:

await platform.email.send({
  to: 'user@example.com',
  subject: 'Your invoice',
  html: invoiceHtml,
  attachments: [
    {
      filename: 'invoice.pdf',
      content: pdfBuffer, // Buffer or base64 string
    },
    {
      filename: 'receipt.pdf',
      path: 'https://myapp.com/files/receipt.pdf', // URL to file
    },
  ],
})

Bulk Sending

Send to multiple recipients efficiently:

// Send same email to multiple recipients
await platform.email.send({
  to: ['user1@example.com', 'user2@example.com'],
  subject: 'Important announcement',
  html: announcementHtml,
})

// Send personalized emails in batch
const emails = users.map(user => ({
  to: user.email,
  subject: `Hi ${user.name}, your weekly digest`,
  html: renderDigest(user),
}))

await platform.email.sendBatch(emails)

Delivery Webhooks

Track email delivery status with webhooks:

Property	Type	Description
`email.sent`	`event`	Email was sent successfully
`email.delivered`	`event`	Email was delivered
`email.opened`	`event`	Recipient opened the email
`email.clicked`	`event`	Recipient clicked a link
`email.bounced`	`event`	Email bounced
`email.complained`	`event`	Marked as spam

app/api/webhooks/email/route.ts

import { platform } from '@/lib/platform'
import { NextRequest } from 'next/server'

export async function POST(req: NextRequest) {
  const isValid = await platform.webhooks.verify(req)
  if (!isValid) {
    return new Response('Unauthorized', { status: 401 })
  }

  const event = await req.json()

  switch (event.type) {
    case 'email.delivered':
      console.log('Email delivered:', event.data.emailId)
      break
    case 'email.bounced':
      // Handle bounce - maybe disable the email
      await handleBounce(event.data.email)
      break
    case 'email.complained':
      // Handle spam complaint
      await handleComplaint(event.data.email)
      break
  }

  return new Response('OK')
}

Email Status

Check the status of a sent email:

const status = await platform.email.getStatus(emailId)

console.log(status)
// {
//   id: 'email_abc123',
//   status: 'delivered',
//   to: 'user@example.com',
//   subject: 'Welcome!',
//   sentAt: '2024-01-15T10:00:00Z',
//   deliveredAt: '2024-01-15T10:00:02Z',
//   openedAt: '2024-01-15T10:05:00Z',
//   clickedAt: null,
// }

Common Use Cases

Welcome emails

Onboard new users

Password reset

Secure account recovery

Order confirmations

Transaction receipts

Notifications

Activity updates

Team invitations

Collaboration invites

Weekly digests

Periodic summaries

Push Notifications

Send web and mobile push

Background Jobs

Queue emails for async sending