When developing HTML emails, you might want to use different data and automations in your local and production environments.

For example, you don't need inlining or CSS purging when developing an email on your machine, but you'll want both enabled for the final, production-ready emails.

Inspired by Jigsaw's approach, Maizzle makes this easy by allowing you to create custom build environments through additional config.[env].js files.

Creating environments

Think of environments as 'build scenarios':

When I run maizzle build [environment], should X happen? Should CSS be inlined? Should my HTML be minified? Do I need some data to be available for the templates?

For example, let's define a production environment, by creating a new file named config.production.js:

// config.production.js
module.exports = {
  doctype: `html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"`,
  language: 'ro',
  // ...

config.production.js will be merged on top of config.js, so you only need to specify the config values that you are changing for the production build.

Environment builds

To build your emails for a specific environment, pass the environment name as an argument to the maizzle build command:

maizzle build production

By default, running maizzle build production will output production-ready emails in a build_production folder at the root of the project.

This output path is, of course, configurable.

Starter environments

Maizzle comes with three environment configs:

  1. local
  2. staging
  3. production


The base config.js is tailored to local development.

CSS purging and inlining are disabled, so you can quickly prototype your emails with all of Tailwind's classes at your disposal.

Build command:

maizzle build

This has the fastest build time, since there is almost no post-processing.


config.staging.js is setup to output human-friendly email code.

CSS purging and inlining are enabled, but code it prettified so that other people get nicely-formatted, more readable code.

Build command:

maizzle build staging


config.production.js enables most post-processing options, such as CSS inlining and purging, and even email-safe HTML minification.

Build command:

maizzle build production

Custom environments

You can create as many build environments as you need, and name them as you like.

For example, you could create a config file named config.myclient.js.

The build command for it would be:

maizzle build myclient

Template conditionals

You can output content in your emails based on the environment you're building for.

An env variable is globally available and it contains the environment name - use it in Layouts, Templates, Partials, or Components:

<!-- src/templates/example.njk -->
{% if env == 'production' %} 
  This will show only when running `maizzle build production` 
{% endif %}