@sveltelaunch/svelte-5-email

v0.0.11

Published

4 months ago

Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).

Downloads

0High
0Medium
0Low

sveltelaunch

svelte-email-banner

Introduction

This is an updated version of svelte-email to work w/ Svelte 5 and written in vanilla javascript.

After seeing react-email I have 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.

Installation

Install the package to your existing SvelteKit project:

npm install @sveltelaunch/svelte-5-email

pnpm install @sveltelaunch/svelte-5-email

Getting started

1. Create an email using Svelte

src/$lib/emails/Hello.svelte

<script>
	import { Button, Hr, Html, Text } from 'svelte-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 'svelte-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);

Documentation

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.

Integrations

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

Author

Travis Mathis (@travisdmathis)

Author of original Svelte Project

Carsten Lebek (@carstenlebek)

Authors of the original project react-email

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