@sveltecult/sveltekit-mailer NPM

SvelteKit Mailer

This library allows you to send emails with nice and customizable layout and colors. With expressive syntax and simplifies the creation of common components like buttons, codes, paragraphs and more.

Installation

To install, use your preferred package manager:

npm install @sveltecult/sveltekit-mailer

Getting Started

To start using this library, you must first set your SMTP credentials to your .env file. Currently, only SMTP is supported.

MAIL_MAILER=smtp
MAIL_HOST=
MAIL_PORT=
MAIL_USERNAME=
MAIL_PASSWORD=
MAIL_FROM_NAME=
MAIL_FROM_ADDRESS=
MAIL_SSL=false

Basic Usage

import { Mail } from '@sveltecult/sveltekit-mailer';

try {
    await new Mail({
        to: 'john@example.com',
        subject: 'Acme Verification'
    })
        .paragraph(
            'This link and code will only be valid for the next 5 minutes. If the link does not work, you can use the login verification code directly:'
        )
        .code('tt226-5398x')
        .send();
} catch (e) {
    console.log(e);
}

Customizing Brand

To change the logo, its alt text, height, width, etc, you can modify the brand.attrs property on your Mail's second argument.

import { Mail } from '@sveltecult/sveltekit-mailer';

await new Mail(
	{
		to: 'john@example.com'
	},
	{
		brand: {
			attrs: {
				src: 'YOUR_LOGO_URL',
				width: '100',
				height: '100'
			}
		}
	}
).send();

You can even customize its CSS:

import { Mail } from '@sveltecult/sveltekit-mailer';

await new Mail(
	{
		to: 'john@example.com'
	},
	{
		brand: {
			attrs: {
				src: 'YOUR_LOGO_URL',
				width: '100',
				height: '100'
			},
			css: {
				background: 'pink'
			}
		}
	}
).send();

Disabling Brand

By default, every mail will use Svelte's logo. To remove the branding entirely, just set it to false.

import { Mail } from '@sveltecult/sveltekit-mailer';

await new Mail(
    {
        to: 'john@example.com'
    },
    {
        brand: false
    }
).send()

Changing Colors

You can easily change the default colors without changing the layout entirely. We use Tailwind CSS color palette as the default.

import { Mail } from '@sveltecult/sveltekit-mailer';

await new Mail(
    {
        to: 'john@example.com'
    },
    {
        colors: {
            body: '#f3f4f6',
            main: '#ffffff',
            p: '#0f172a',
            a: '#3b82f6',
            hr: '#f3f4f6',
            action: {
                background: '#3b82f6',
                color: '#ffffff',
                padding: '10px'
            },
            code: {
                background: '#000',
                color: '#fff',
                padding: '10px'
            }
        }
    }
).send();