Svelte Emails

Overview

Emails are a crucial part of automated internet communication, used for various purposes such as account creation, invoicing, and event sign-ups. However, the process of creating and sending emails often involves dealing with legacy web technologies. In an effort to improve the developer experience, Escape has rebuilt their email stack using SvelteKit and MJML, allowing for dynamic and logic-driven emails. This article outlines their approach and the challenges they faced in making these technologies work together.

Features

• Svelte-powered email rendering: Escape uses Svelte, a JavaScript framework, to write dynamic and interactive emails with logic and string interpolation.
• MJML-based email templating: MJML, an XML-based email templating language, provides flexibility and power in designing email layouts.
• Instant feedback loop: With the use of SvelteKit-powered dev server, developers can preview and test their emails with live-reload, improving productivity.
• Compile-time type checking: svelte2tsx enables compile-time type checking for props, ensuring better code quality and reducing errors in the email development process.

Installation

To set up the development server and build pipeline for creating and previewing emails, follow these steps:

1. Install SvelteKit and MJML dependencies:

npm install sveltekit mjml

2. Create a Svelte component with MJML elements:

<script>
  // Svelte code with MJML elements
</script>

<mjml>
  <!-- MJML email template -->
</mjml>

<style>
  /* CSS styles */
</style>

3. Compile the Svelte code to HTML using the Svelte compiler’s SSR capabilities:

npx svelte-kit build

4. Feed the compiled HTML to the MJML compiler:

npx mjml input.html -o output.html

5. Send the resulting HTML as the email content.

For live reloading and email preview, set up a SvelteKit development server:

npx svelte-kit dev

Access the server at http://localhost:5000 to preview and test the emails in real-time.

Summary

Escape has rebuilt their email stack using Svelte and MJML, aiming to improve the developer experience in creating dynamic and logic-driven emails. By leveraging SvelteKit and MJML’s capabilities, they have implemented a system that allows for easy email development, previewing, and testing. The use of svelte2tsx enables compile-time type checking, enhancing code quality and reducing errors. With this setup, Escape has overcome the challenge of making these technologies work together and streamlined their email development process.