Quickly build HTML emails
with utility-first CSS

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

or Get started

Command

Use the @maizzle/cli tool to quickly scaffold a Maizzle project and start developing your email templates.

Code

Code emails in HTML and style them with Tailwind CSS. Maizzle takes care of all email optimizations, like CSS inlining.

Customize

Responsive or hybrid? Mobile first or desktop first? Stay in control and code your emails however you like.

tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: {max: '600px'},
      md: {min: '768px', max: '1023px'},
    },
    extend: {
      colors: {
        blue: {
          brand: '#286dbd',
        },
      },
      spacing: {
        full: '100%',
        px: '1px',
        0: '0',
        2: '8px',
        4: '16px',
      }
    }
  }
}

Supercharge your email development workflow

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

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 CSS provides low-level utility classes that help you style emails much faster than writing inline CSS.

Powerful modifiers

Use powerful variant classes like hover:bg-blue-500 or sm:w-full to easily add hover effects or style responsive emails.

Make it your own

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

template.html
<extends src="src/layouts/main.html">
  <block name="template">
    <table class="w-150 sm:w-full">
      <tr>
        <td class="text-base text-gray-700">
          <h2>BYOHTML</h2>
          <p>Bring your own HTML</p>
        </td>
      </tr>
    </table>
  </block>
</extends>

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.

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

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.

Maizzle Features

Customizable tools, crafted for email development.

Tailwind CSS

Quickly style 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.

BYOHTML™

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

Build Environments

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

Transformers

HTML email-specific optimizations, customizable from your environment config or for each template in particular.

Events

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

Build System

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

Configured in JavaScript

Maizzle is configured in JavaScript, so you can even require() packages or fetch template data from an API.

Powerful Templating

Maizzle uses PostHTML enhanced with custom plugins, giving you powerful templating tools.

Markdown

You can use GitHub Flavored Markdown in your templates. And it's fully configurable, even through Front Matter.

CLI Tool

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

APIs

Require Maizzle or its Transformers in your application and compile or process your HTML emails.

Front Matter

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

CSS Inlining

Automatic, configurable, email-optimized CSS inlining. Enabled by default when building for production.

Minify

Email-safe code minification that can help make your production HTML emails weigh less and avoid clipping.

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 short 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.

URL Parameters

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

Custom Fonts

Easily pull in Google Fonts or any other custom webfonts, then use them through Tailwind utility classes.

Plaintext Versions

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

Browsersync

Develop emails locally and have the browser automatically refresh for you when you make changes.

Localhost Tunneling

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

⚡4email

Code interactive AMP emails, with realtime information and inline actions. User our AMP Starter or code your own.

Get notified when we launch Mailviews.

100s of responsive HTML email components and templates, from the creators of Maizzle.

Maizzle Guides

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

View all guides
March 3, 2021

How to create an AMP for Email template

Use AMP for Email in Maizzle to easily create interactive HTML emails with realtime information and in-line actions

March 4, 2020

How to create an email newsletter from an RSS feed

Learn how to use Maizzle Events and RSS parsing libraries to create an email newsletter from an (atom) RSS feed.

March 2, 2020

Using the WordPress API to create a newsletter from your posts

Learn how to use the WordPress API and Maizzle to create an HTML email newsletter with your latest posts.

February 21, 2020

How to use CSS background gradients in HTML emails

Learn how to add CSS background image gradients with Outlook VML fallback to your HTML email templates in Maizzle.

February 5, 2020

How to add PrismJS syntax highlighting to HTML emails

Using PrismJS, Markdown fenced code blocks, and Events in Maizzle to add syntax highlighting to HTML emails.

January 31, 2020

Using custom web fonts in Maizzle email templates

Learn how to include custom web fonts in your email templates and use them efficiently through Tailwind CSS utilities.

Maizzle lets me structure my code the way I want to while helping me automate things like links tracking or styles inlining. I love being able to easily generate a version for local development and one properly packed to deliver to clients.

Maizzle allows us to produce better, more consistent emails, in less time and without any of the typical nasty black-box “magic” that often plagues other frameworks.

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

Templates by craftingemails

Kickstart your project with these email templates built by craftingemails.

View all templates