[!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)

Keywords

svelte

sveltekit

FAQs

What is svelty-email?

Is svelty-email popular?

Is svelty-email well maintained?

Package last updated on 10 Aug 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

svelty-email

Svelt𝑦-Email

Introduction