Features

Emails

Send transactional emails with mailgun.

Helper Functions

Access helper functions by importing from $lib/emails

        import { send, addToMailingList } from '$lib/emails';

send()

        await send({from, to, subject, template, templateMetadata, text, html}) returns success/error message

addToMailingList()

        await addToMailingList({to, mailingListEmail}) returns success/error message

Send Transactional Emails

You can send transactional emails using Templates or Text/HTML Strings.

Send with Templates

Templates live in $lib/emails. You can create new templates by creating a new svelte file in the $lib/emails/templates folder. This will be automatically imported for you by doing so.

Use: Just pass the file name as the template param as shown below.

        import { send } from '$lib/emails';

const response = await send({
  from: 'Travis @ SvelteLaunch <travis@sveltelaunch.io>',
  to: email,
  template: 'ThankYou',
  templateMetadata: { name: 'John Smith' },
  subject: 'Test Subject'
});

Template Metadata

Template metadata is an object where your key names match your template props.

        <Text>
  Hello, {name}! Thanks for purchasing Svelte Launch
</Text>

Send with Text/HTML Strings

        import { send } from '$lib/emails';

const response = await send({
  from: 'Travis @ SvelteLaunch <travis@sveltelaunch.io>',
  to: email,
  text: 'ThankYou',
  html: '<h1>ThankYou</h1>',
  subject: 'Test Subject'
});

Creating Templates

Templates can be created using Svelte components or HTML. You can even use tailwindcss classes to style your templates. svelte-5-email also includes some components you can use, but they are completely optional.

        <script>
	import { Button, Hr, Html, Text } from '@sveltelaunch/svelte-5-email';

	const { name } = $props();
</script>

<Html lang="en">
	<Text>
		Hello, {name}! Thanks for purchasing Svelte Launch
	</Text>
	<Hr />
	<Button
		href="https://sveltelaunch.com"
		style={{
			backgroundColor: '#1F7F4C',
			fontSize: '18px',
			fontFamily: 'Helvetica, Arial, sans-serif',
			fontWeight: 'bold',
			textDecoration: 'none',
			padding: '14px 20px',
			color: '#ffffff',
			borderRadius: '5px',
			display: 'inline-block'
		}}>Svelte Launch</Button
	>

	<h1 class="text-red-900">TEST</h1>
</Html>

Changing Mail Providers

Step 1

Create a client in `$lib/server`
npm install yourmailprovderslib --save
Instantiate your providers client in a file called yourProviderClient.js;

Step 2

Edit `api/emails/send/+server.js`

Change the function below to match your provider.

        await mailgun.messages.create(MAILGUN_DOMAIN, {
  from: data.from ? data.from : import.meta.env.VITE_EMAIL_FROM,
  to: [data.to],
  subject: data.subject,
  html: templateHtml ? templateHtml : data.html,
  text: templateText ? templateText : data.text
});

Step 3

Edit `api/emails/mailing-lists/+server.js`

Change the function below to match your provider.

        const subscriber = await mailgun.lists.members.createMember(data.mailingListEmail, {
  address: data.to,
  subscribed: 'yes', // optional, modifiable on website
  upsert: 'yes'
});

Emails

# Helper Functions

# Send Transactional Emails

# Send with Templates

# Template Metadata

# Send with Text/HTML Strings

# Creating Templates

# Changing Mail Providers

Step 1