Get started with Maizzle

Maizzle is an email framework made for developers. It brings together open source tools such as Jigsaw and TailwindCSS, to create a solid workflow for HTML email development.

Whether you're an email or web developer, you can use Maizzle to build your HTML emails fast and be in full control over your development workflow.

Unlike other email frameworks, it doesn't use any custom tags that get compiled into table structures: you write your own HTML, you own your markup. While some of us might not like coding table-based emails, the advantage to this approach is that you're in full control over your code, as there's no markup hidden behind custom tags. At the same time, your code is now much more portable.


Jigsaw

At its core, Maizzle uses Jigsaw to build your HTML files.

Jigsaw is a very powerful PHP static site generator that includes many awesome features from the Laravel PHP framework, and is built by some of Laravel's top contributors.

It offers many great features that an email framework can use, from a solid templating engine with partials and components support, to custom data structures and Webpack compilation.

If you want to learn more about Jigsaw (maybe you want to customise Maizzle?), please read its documentation.

Fun fact: this documentation is also powered by Jigsaw 💪

TailwindCSS

You may already be familiar with styling HTML emails: most of the time, we write inline styles by hand.

But if you think about it, it's in a way very similar to writing utility-first CSS - only that, with emails, we add CSS properties inline to our HTML, so it's kind of 'hard coded'.

That's where TailwindCSS comes in.

You have a config file where you define all CSS classes and their properties to be generated, and then only use those on your HTML tags. When building your email, Maizzle automatically inlines all the CSS that needs to be inlined. This means that, for most of the time, you won't be writing CSS anymore.

Maizzle provides an email-tailored Tailwind config file that changes or disables some of the default features, for better email client support. You can learn more about TailwindCSS from its documentation.

Here's another (predictable) fun fact: you guessed it, this documentation also uses Tailwind 💅

Transformers

Transformers in Maizzle refer to all the email-specific post-processing functions that are applied to the built HTML files, such as CSS inlining, minification, code clean-up, etc.

They are all configurable from the environment-specific config.php file.

And that brings us to:

Environments

Jigsaw allows you to create custom config files in order to define different build scenarios.

We call these environments. Maizzle includes local, staging, and production environments by default, but you can create as many as you need - each with their own settings.

Environments are just a small feature of the Jigsaw config. As you'll see, you can use it for many other things, such as creating custom data collections or controlling Maizzle's email post-processing scripts.