Framework for
Rapid Email Prototyping

Maizzle is a framework that helps you quickly build HTML emails with Tailwind CSS and advanced, email-specific post-processing.

Get started →

Supercharge your email workflow

Maizzle empowers you with modern web development tools, enabling fast email prototyping while keeping your entire team on-brand.

Tailwind CSS

Who said CSS frameworks should only be used for websites?

Maizzle uses the Tailwind CSS framework, so you can rapidly prototype beautiful, on-brand HTML emails. Forget about writing inline styles.

  • Utility-first CSS

    Tailwind provides low-level utility classes that let you style emails much faster than writing inline CSS.

  • Component-friendly

    Some projects are complex, so you can extract component classes from repeated utility patterns, if you really need to.

  • Fully customizable

    Easily create or bring in your own email design system, keeping everyone in your team on-brand. 

module.exports = {
  prefix: '',
  important: true,
  separator: ':',
  theme: {
    screens: {
      sm: {max: '600px'},
      dark: {raw: "(prefers-color-scheme: dark)" },
    },
    extend: {
      colors: {
        transparent: 'transparent',
        inherit: 'inherit',
      },
      spacing: {
        px: '1px',
        0: '0',
        2: '2px',
        4: '4px',

BYOHTML™

Code with markup you already know.

  • Bring Your Own HTML

    No need to learn custom syntax or adapt your templates to it. Use your existing HTML, it'll just work.

  • Supercharged by PostHTML

    PostHTML gives your HTML superpowers, enabling you to write complex logic with simple, text editor-friendly markup. 

<extends src="layouts/base.html">
  <block name="template">
    <table class="w-600 sm:w-full">
      <tr>
        <td class="text-base text-gray-700">
          <h2>Article title</h2>
          <p>Lorem ipsum dolor sit amet</p>
        </td>
      </tr>
    </table>
  </block>
</extends>

Build Environments

Custom build scenarios, easily configured in JavaScript.

Using fake data locally, but fetching from an API in production? Prettified email markup for your colleagues? All possible.

  • CLI Commands

    Each environment config enables its own CLI build command, so you can build the same templates in as many ways as you need.

  • Opt-in Transformers

    Choose which post-processing transformations Maizzle applies to your HTML emails on a build environment-basis.

  • Override from Template

    Define or override data for each template just before it's compiled, through YAML Front Matter variables. 

// config.production.js
module.exports = {
  build: {
    templates: {
      source: 'src/templates',
      destination: {
        path: 'build_production',
        extension: 'html',
      },
    },
    tailwind: {
      css: './src/assets/css/main.css',
      config: 'tailwind.config.js',
    },

Toolkit

Maizzle Features

Customizable tools, crafted for email development

CLI Tool

Scaffold a project from any Maizzle starter, develop locally, then build your emails for production.

Tailwind CSS

Quickly build HTML emails with CSS utility classes. You won't need to write inline CSS for most of the time.

Starters

Free, open source email templates built with Maizzle. Simply clone a repository and start building your HTML emails.

Build System

Simple and fast Node.js build system that takes care of all the transformations necessary for HTML emails.

JavaScript Configs

Maizzle's config files are JavaScript objects, so you can even require() packages or fetch data from an API.

Use in Node.js

Require Maizzle in your application and use the render() method to compile a template to an HTML string.

Build Environments

Distinct configurations for any number of build scenarios, from local development to production-ready email templates.

Event Listeners

Hook your own JavaScript functions at key steps in the build process, for even greater customization and control.

BYOHTML™

No need to learn custom tags or attributes. Write your own HTML structure, then style it with Tailwind CSS.

Email Optimizations

HTML email-specific optimizations, that you can customize from your environment config or for each template in particular.

PostHTML Templating

Maizzle uses PostHTML with custom plugins, to give you powerful templating tools.

Markdown

Markdown is supported out-of-the-box, and it is fully configurable. GitHub Flavored Markdown is enabled by default.

Front Matter

Define custom data or override any configuration options right from a template, with Front Matter variables.

CSS Inlining

Juice is used for email-optimized CSS inlining, and you can fully configure or even disable it completely.

Minify

Optionally enable and configure email-safe code minification, to make your production HTML emails weigh even less.

Prettify

Need to send an HTML email to a human? Maizzle can pretty print the code for you, so it's more readable.

Uglify Classes

Rewrite CSS class names to be as few characters as possible, so your production emails are even lighter!

Image CDN-friendly

Already using a CDN for images? Define a base image URL and Maizzle will prepend it to all image sources in your HTML email.

URL Parameters

Use Front Matter to specify as many URL parameters as you need - they will all be appended to your links.

Google Fonts

Easily pull in Google Fonts, either globally or just inside a single template, then use them with Tailwind utility classes.

Plaintext Versions

Optionally generate optimized plaintext versions from your HTML emails. Or have your ESP do it. Your call.

Localhost Tunneling

Use tunneling to live-share a configurable URL to a Maizzle project that you're working on, with a colleague or a client.

Browsersync

Run the maizzle serve command to develop emails locally and have the browser automatically refresh for you when you make changes.

⚡4email

Code interactive AMP emails, with realtime information and inline actions. We even provide a starter project to get you up and running.

Premium Templates

Kickstart your project with premium email templates
Built with Tailwind CSS in Maizzle 👌

Browse Templates →

Tutorials

Learn how to create HTML emails with Tailwind CSS in Maizzle.

View all →

“Maizzle is a 💯 option for building properly-rendering email code using modern web technologies like Tailwind CSS, static site generators, and JavaScript.”

Ted Goas
Design @ StackOverflow

Start building awesome emails

Install Maizzle and start building your first email in seconds. Read the docs to learn about advanced concepts and features, or checkout the examples.

Get started →
TwitterGitHubCodepen

© 2020 Maizzle - Made with ❤ for email, open sourced under the MIT license.