svelty-email

v0.0.11

Published

4 months ago

Build emails with Svelte

Downloads

4,544

0High
0Medium
0Low

cmjoseph07

svelte sveltekit email

Introduction

[!NOTE] After seeing react-email Carsten decided to create a similar library for Svelte. svelte-email enables you to write and design email templates with svelte and render them to HTML or plain text. This is a community maintained fork to keep the project going as svelte continues to evolve under svelty-email.

Installation

Install the package to your existing SvelteKit project:

npm install svelty-email

pnpm install svelty-email

Getting started

1. Create an email using Svelte

src/$lib/emails/Hello.svelte

<script>
	import { Button, Hr, Html, Text } from 'svelty-email';

	export let name = 'World';
</script>

<Html lang="en">
	<Text>
		Hello, {name}!
	</Text>
	<Hr />
	<Button href="https://svelte.dev">Visit Svelte</Button>
</Html>

2. Send email

This example uses Nodemailer to send the email. You can use any other email service provider.

src/routes/emails/hello/+server.js

import { render } from 'svelty-email';
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 = render({
	template: Hello,
	props: {
		name: 'Svelte'
	}
});

const options = {
	from: '[email protected]',
	to: '[email protected]',
	subject: 'hello world',
	html: emailHtml
};

transporter.sendMail(options);

Advanced Example REPL(s):

[!CAUTION] Update: fix broken Airbnb example formatting in old docs, broken logos

Airbnb Example

Documentation

[!WARNING] Documentation page is from previous project, svelte-email will need to be replaced with svelty-email but examples are great.

For more information, please visit the documentation.

Components

A set of standard components to help you build amazing emails without having to deal with the mess of creating table-based layouts and maintaining archaic markup.

HTML
Head
Heading
Button
Link
Image
Divider
Paragraph
Container
Preview
Body
Column
Section -- Please do not use as 'root' element, can break styling

Integrations

Emails built with React Email can be converted into HTML and sent using any email service provider. Here are some examples:

Advanced Examples:

Author

Chris Joseph

Previous Author svelte-email

Carsten Lebek (@carstenlebek)

Authors of the original project react-email

Bu Kinoshita (@bukinoshita)
Zeno Rocha (@zenorocha)