Email templates documentation

This documentation is our email templates. It should cover everything from installing your project and preparing your code for production.

What’s new?

New video tutorials cover how to find and download templates, Customize the design files, and edit the source code.

Video tutorials

How to customize email templates

Video tuts

Two ways to get started

  1. Use the compiled files
  2. Use the Source code "Maizzle project“

Compiled files

The quickest way to get started is with templates from the dist folder.

Templates inside this folder are ready to use, so you can simply copy/paste the HTML code into your ESP. Of course, you may edit the text and image paths for any of these templates, in your favorite code editor.

Source code "Maizzle project“

If you’d like to use Maizzle and Tailwind CSS to further customize the emails, you’ll need to follow some extra steps.

  1. First, make sure you have Node.js installed - this will also install NPM, which offers commands that we’ll need, like

    npm install

    Once you have Node.js and NPM installed, open a Terminal and run this command:

    npm install -g @maizzle/cli

    This installs the Maizzle CLI tool, which lets you run commands like maizzle serve for local development, or maizzle build.

  2. Next, make sure that you’re inside the project directory.

    # cd into the project directory
    cd folder name

    You’ll know you’re in the right folder if you run the ls command next, and see thepackage.json file name listed in the output, among others.

  3. Inside this directory, run the following command to install Maizzle’s dependencies:

    npm install

Once it finishes, you’re ready to use Maizzle to customize and build the emails.

Build commands

For local development, with live browser preview:

maizzle serve

Production

The following commands will build production-ready emails, as defined in their correspondingconfig.[environment].js file (read more about config environments in Maizzle).

maizzle build production

Tailwind CSS

The Maizzle project comes with a customtailwind.config.js that defines utility classes based on the design system. This file also configures Tailwind for better email client support - read more about Maizzle’s Tailwind CSS config.

Email compatibility

All emails are designed for and tested on numerous email clients and devices. Here’s the rundown on what type of compatibility to expect.

Mobile Devices


  • iPad
  • iPhone
  • Outlook iOS
  • Gmail iOS
  • Gmail Android
  • Samsung Mail

Desktop clients


  • Apple Mail
  • Outlook 365
  • Outlook 2019
  • Outlook 2019 120 DPI
  • Thunderbird

Webmail


  • Gmail
  • Office 365
  • Outlook.com
  • Yahoo!
  • AOL

Got a question we didn’t answer?

Contact us at hello@craftingemails.com and we’ll get back to you straight away.