Transaction.svelte

##A resource for rendering and sending transactional emails with Svelte

Transaction is a resource for learning how to render Svelte components as email friendly markup on the server along with best practices and integrations with the top email sending clients.

The goal of this project is not to provide an opaque library for rendering emails but to provide a resource for learning how to render emails with Svelte and send them with the top email sending clients.

Svelte Ready Templates

Along with tutorials on how to render emails with Svelte, this project will also provide a collection of ready to use Svelte templates for common transactional emails based on Postmark Transactional Email Templates.

The templates we use will feature their styles not inlined but in their <style> tag for ease of maintenance and readability. We will programatically inline their styles before sending them with the email sending clients.

The Templates

These are all sourced from the Postmark Transactional Email Templates and used under the MIT license.

Each template comes in three different generic layout variations: Basic, Basic full, and Plain. This gives you a starting point so that you can customize your templates to match your brand.

Welcome

Send a welcome email to users after they sign up.

• 💌 Preview with layout: Basic, Basic full, Plain
• 📔 Welcome email best practices guide

Reset Password

Send users a link to reset their password.

• 💌 Preview with layout: Basic, Basic full, Plain
• 📔 Reset password best practices guide

Reset Password Help

Help users reset their password if they can’t remember their email.

• 💌 Preview with layout: Basic, Basic full, Plain
• 📔 Reset password best practices guide

Receipt

Send a receipt to users after they made a purchase.

• 💌 Preview with layout: Basic, Basic full, Plain
• 📔 Receipt and invoices best practices guide

Invoice

Request payment from a user.

• 💌 Preview with layout: Basic, Basic full, Plain
• 📔 Receipt and invoices best practices guide

Dunning

Let users know about a failed payment

• 💌 Preview with layout: Basic, Basic full, Plain
• 📔 Dunning best practices guide

Comment notification

Notify users of new comments by other users.

Note: Comment notification isn't the prettiest preview because it's just Mustachio. Since almost all content in this email is dynamic, it won't look good without real content. Don't worry though, that's how it's supposed to look.

• 💌 Preview with layout: Basic, Basic full, Plain
• 📔 Comment notification best practices guide

Trial Expiring

Let users know when their trial is about to expire.

• 💌 Preview with layout: Basic, Basic full, Plain
• 📔 Trial expiration email best practices

Trial Expired

Let users know when their expired trial.

• 💌 Preview with layout: Basic, Basic full, Plain
• 📔 Trial expiration email best practices

User Invitation

Help users invite others to use your software.

• 💌 Preview with layout: Basic, Basic full, Plain
• 📔 User invitation email best practices

We've also made sure that these have been tested for consistency in the following email clients:

• Desktop
  • Apple Mail 9, 10, 11
  • Outlook 2007, 2010, 2011, 2013, 2016
  • Windows 10 Mail
• Mobile
  • Gmail App (Android)
  • iPhones 6, 7, 8, SE, X
  • iPad (Retina)
  • iPad Mini
  • iPad Pro
• Web
  • AOL
  • Gmail
  • Outlook.com
  • Yahoo