Maizzle, un framework HTML dédié à l’emailing

Update 06/03/2025 This article has been updated with our feedback on Maizzle version 5. Go directly to the v5 update.

Some time ago, I was asked to investigate the Maizzle email framework; for a client and to see if it could be useful for us internally. I admit I went into it with a bit of a lead foot... I didn't have much faith in it. As an email developer, I mostly trust the way I code, and not so much a framework that will write some of the code for me.

But two years later, we're using Maizzle for the production of a large proportion of emails of the Badsender agency. I couldn't have imagined going from simple tool testing to Maizzle expert or Maizzle developer in two years.

What is a framework?

In this case, we could define a framework as follows: a set of structural components that is used to create the foundation and outline of all or part of a software program.

The objective of a framework is to save time, by avoiding developers to spend time on redundant things, to focus on other points (features, ergonomics, ...). Because yes, you will have understood, here we are going to talk about technical issues and such a framework is primarily intended for production, integration and development teams.

If it allows to save time, it is necessary at first to devote a lot of time to learn it. It requires to learn the nomenclature of the framework in question, as well as its functioning. Moreover, it requires some technical skills in order to install it and to customize it according to your needs. If these skills are basic skills for a developer, they are less common among email developers who often have profiles of designer or HTML integrator converted.

It may scare some people, it may amuse others. Personally, I had the impression to fall back in my youth where it was always a pain to install a video game, with the associated additional programs (like DirectX) in the right version, and then, once we managed to launch the game, to understand how it works. Anyway, for me, it was quite fun :-p

Tailwind the CSS utility framework

Before talking about Maizzle, we need to talk about Tailwind, which is another framework, itself used by Maizzle.
Tailwind is a framework centered around CSS created for the Web. It allows the automatic management of CSS through the use of the specific Tailwind nomenclature. Its strength, despite the supporters of semantic classes, is to offer a library of class utilities that allow you to style an element by adding them.
Basically, instead of writing

<div class="”boutton”">
My button
</div>

With a CSS that looks like

.button { font-size: 20px; border-radius: 5px; padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px; background-color: purple; color: white; }

The idea will be to write

<div class="”f20" br5 px20 py10 white bg-purple”>
My button
</div>

And Tailwind itself takes care of generating the CSS sheet containing the appropriate styles:

.f20 { font-size: 20px; }
.br5 { border-radius: 5px; }
.px20 { padding-left: 20px; padding-right: 20px; }
.py10 { padding-top: 10px; padding-bottom: 10px; }
.bg-purple { background-color: purple; }
.white { color: white; }

The operation allows you, knowing the Tailwind nomenclature, to use classes that will be generated automatically without having to worry about setting up the CSS yourself.

Maizzle uses Tailwind with a configuration file that it adapts to the email. For example, where basic Tailwind calls typically use values in rem (a good practice for the Web), with Maizzle they will be called in px.

In the same way, instead of generating a CSS sheet (ideal for the web, but not for email), the styles will be placed inline.

And for those of you who are afraid of having to memorize the names of the Tailwind classes, don't worry, there are cheat sheets. Just keep in mind that these sheets are for the basic Tailwind, the one made for the web, but they easily adapt to the Tailwind configured for Maizzle.

Responsive email, Tailwind also thinks about mobile

Of course, the media queries for mobile rendering has been taken into account. The usage is the same as for the inline style, you just have to prefix the class name so that in output the style is not placed in inline, but in the media queries.

Maizzle a framework to industrialize your email production

As we have seen, Tailwind takes care of streamlining styles. Maizzle, on the other hand, will streamline the HTML code itself. The framework offers a production environment designed to optimize your workflow. This is why it is fully configurable and can be adapted to your needs.

On the HTML templating side there are 3 levels of nesting: Layout, templates and components.

Layout

A layout is a structure file, which aims to be reusable, and in which you will write everything that encapsulates your content. Typically, this will be the doctype, the meta tags, possibly specific CSS classes (like a call to a specific typeface), and the opening and closing of your HTML content.

Template

The template is your actual HTML content. This is what developers usually focus on. For example, a headera cover block, a column block, and a footer. Everything you can find in the body, but also the front matter that we will discuss a little later.

Component

A component is an element that is usually reused several times. Once the component code has been written, it can be called to avoid rewriting the same code each time. Typically, a button. Instead of rewriting the button code each time, you just call the component and pass it the expected parameters (for example a link and the button text)

The central element is the template. It contains your content. It will extend a layout, that is to say that your template will surround itself with the content of a given layout, and it will use components within it, passing them one or more parameters.

Front Matter

Front Matter is the header of your template file. It is a YAML syntax that allows you to define a set of contents simply and quickly via variables. You can define text elements, colors, language variables, lists, etc.
Once instantiated, it is possible to call these variables at will or to use them as a condition.

Logical tags

Maizzle also includes specific tags that allow you to set up different logical operations.

Conditions

In the condition tags we find the great classic, the <if> which displays content if the condition is met.
We can do more elaborate things with <if>, <elseif>, <else>.
It is also possible to quickly write content for Outlook or for anything but Outlook with <outlook> and <not-outlook>.
The last conditional tag present is the <switch>.

Loops

The tag <each> allows to loop on a table or on objects.

Scope^*

The tag <scope> allows to access variables quickly by defining a context.

Fetch^*

the tag <fetch> allow to fetch remote contents.

Raw^*

the tag <raw> avoids parsing the content inside the tag.

In short, you can see that the Maizzle framework offers a nice toolbox to code emails. I do not detail here all the possible uses of these tags and their detailed nomenclature, but you can consult the Maizzle's technical documentation on this subjectit is complete and well done

That's all for the basics. After that, there's the rest...

Advanced mode

The advantage of frameworks is that they are sandboxes. They offer a context and a whole series of tools, and the developer is free to do what he wants with them. For example, it is possible to use several layouts, to have components within components, to customize the tag nomenclature via a configuration file (if, for example, you want to change the <each> in <for>), the Tailwind configuration (to add a Tailwind class m-0-auto for margin: 0px auto; for example), the automatic addition of attributes on tags (transforming a <table class="”m-0-auto”"> in <table cellpadding="”0”" cellspacing="”0”" border="”0”" role="”presentation”" style="”margin:0px" auto;”>), etc.

In short, you will have understood, the possibilities are numerous. Once the tool is in hand, the configuration of the different processes is done, Maizzle can save a lot of time in production.

Output

In output, Maizzle will provide a nice HTML file, with an associated image folder (for images that were in relative path in the template file) and all the HTML code compiled according to the configuration files, to obtain a single HTML file usable for any router.

To Maizzle or not to Maizzle, that is the question

Is Maizzle the solution, the one that will allow you to streamline your email production and the only development tool you will ever need? This will depend greatly on your type of production. First of all, you have to keep in mind that Maizzle is a developer's tool for developers. It therefore requires technical skills to install, configure and use it. Then, if your email production is very heterogeneous, it will be complicated to rationalize it by cutting it into reusable elements. Nevertheless, Maizzle remains very efficient as a framework to simplify and accelerate the writing of your HTML code for email.

At Badsender, we've spent a lot of our html email integration time on Maizzle. And being Maizzle experts saves us a lot of time. As an agency, our email production is very heterogeneous, but we sometimes have to produce numerous email variations in a short space of time for certain customers, and Maizzle is an efficient tool to help us with this.

In the near future, we will put online a doc for the implementation of the Maizzle email framework. In the meantime, for the English speakers, don't hesitate to go and see thehe official document which is very complete!

Feedback on Maizzle, one year on

One year after discovering this framework, I can tell you that I swear by it (for the time being). We've been using it as a production tool at Badsender since January. I can only invite you once again to take a closer look, because to try it is to adopt it!

I was also lucky enough to attend EMDay 2023 and present Maizzle there. In essence, I recounted what's written above in this article, and took the opportunity to do some a video with Jonathan you can find by following this link (spoiler alert: a second video will follow for a more advanced demo).

If you're interested, here's the presentation used:

And finally, the link to the Github containing the demo files used in the video if you'd like to see what it looks like (don't forget theinstall the Node library for each of the 3 demo projects if you wish to run the whole set).

What's new in version 5 of Maizzle

Generation time

While version 5 brings many new features, for our use at Badsender it's mainly under the hood that the improvements have taken place. The heart of this update is email generation time. While for a simple email the difference is virtually nil, for complex emails the time saving can be enormous. Depending on the case, the time saved can be a factor of 10 or more. And going from 2 hours to 10 minutes is a pleasure!

ESM, CSS and others

As for the rest, well... phew. The config file is now in ESM format, and if you want to update your old projects, you'll have to rewrite a good part of your config files, and sometimes make changes within the emails themselves. Not very practical. I'm glad to say, there is a very good guide (to help you make the transition from version 4 to version 5.

In addition to the generation time, there are other more minor improvements: better CSS support, rearrangement of config instructions, etc. Nothing revolutionary for our use of Maizzle at Badsender.

However, the change in config files and ESM format has caused us a few problems... In version 4's config files, you could target the email files you wished to generate, as well as the image folders, and then export everything to a specific folder. In version 5, you can still target images for export, as well as their destination, but it is no longer possible to target the precise html files you wish to export. The entire folder architecture and all HTML files are exported. This can cause quite a few problems, depending on the way you work. There are workarounds: Pierre, for example, has written a little script that takes the exported files, arranges them in the desired location with the desired architecture, and deletes the rest.

Another change in version 5 also conflicts with the code we use to write our LePatron templates. Here too, Pierre has found a workaround by adding parentheses.

Support

In short, while we've saved a lot of time on the generation of some huge files, the transition hasn't been painless. While I'm well aware of the dependency on other technologies and the need to evolve the framework, I still think it's a shame to have changes that structurally alter the way the framework juggles file architecture and nomenclature.

Fortunately, we get away with it, but we do add a layer of complexity, which is a shame. On the other hand, all these changes indicate that the developer is active and keeps its project up to date. What's more, you can always open tickets to report problems or make requests! By the way, perhaps our export problem will be modified in the future, a ticket is open on this subject.

In the end, however, we found solutions to all the points that were blocking us. Maizzle is such a toolbox, and makes life so much easier, that we're not about to do without it...

_{*We could translate these terms into French, but it would hurt me to Frenchify so much :-p}