@bradford/svelte-mail
v0.0.5
Published
Build emails with Svelte
Downloads
58
Readme
Introduction
After seeing react-email I have decided to create a similar library for Svelte. svelte-mail 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 svelte-mailpnpm install svelte-mailGetting started
1. Create an email using Svelte
src/$lib/emails/Hello.svelte
<script>
import { Button, Hr, Html, Text, Tailwind } from 'svelte-mail';
export let name = 'World';
</script>
<!-- Optional Tailwind support -->
<Tailwind>
<html lang="en">
<Text class="text-xl leading-10"> Hello, {name}! </Text>
<hr />
<button href="https://svelte.dev">Visit Svelte</button>
</html>
</Tailwind>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-mail';
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
- Carsten Lebek (@carstenlebek)
Authors of the original project react-email
- Bu Kinoshita (@bukinoshita)
- Zeno Rocha (@zenorocha)