search

cmjoseph07 / svelty-email

Write and send emails with Svelte ✉️🚀
https://svelte-email.vercel.app
MIT License
35 stars 4 forks source link

readme

Svelt𝑦-Email

Community fork for Svelte-Email. Designing emails has never been easier.
Documentation (Previous Author Site) · GitHub

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.

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

Previous Author svelte-email

Authors of the original project react-email