Svelt𝑦-Email

Community fork for Svelte-Email. Designing emails has never been easier.

Documentation (Previous Author Site) · GitHub

Warning

Warning

Breaking change made for Svelte 5 support while lib is being re-written. Please use 0.0.11 for Svelte 4 apps.

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: 'you@example.com',
	to: 'user@gmail.com',
	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)

License

cmjoseph07/svelty-email

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Error
Looks like something went wrong!

Packages