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.
Install the package to your existing SvelteKit project:
npm install svelty-emailpnpm install svelty-emailsrc/$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>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);Caution
Update: fix broken Airbnb example formatting in old docs, broken logos
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.
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
Emails built with React Email can be converted into HTML and sent using any email service provider. Here are some examples:
- Chris Joseph
Previous Author svelte-email
- Carsten Lebek (@carstenlebek)
Authors of the original project react-email
- Bu Kinoshita (@bukinoshita)
- Zeno Rocha (@zenorocha)