Maizzle v1.0.0

Organize. Prototype. Deliver.

Build HTML emails fast with utility-first CSS

Get Started →

What is it?

Maizzle is a BYOHTML framework for rapid HTML email development. It's like a static site generator, but tailored to email.

Who is it for?

Developers. Whether you're an email or web developer, you can use Maizzle to create solid, great looking emails for your brand or client(s).

Where can I get it?

Maizzle is more like a project than a package. Simply clone the repo on your machine, and you're ready to go. Learn more in the documentation.


Key Features

Jigsaw-powered

Maizzle uses the Jigsaw static site generator to build your email's HTML files. Jigsaw itself is based on the Laravel Blade templating engine, and it includes many awesome features like master layouts, partials, collections, Laravel Mix for asset compilation, and even Markdown.

Jigsaw logo
TailwindCSS

TailwindCSS

Who said CSS frameworks should only be used for the web?

Maizzle uses the TailwindCSS utility-first CSS framework, so you can rapidly prototype HTML emails by just adding classes to your markup. Once satisfied with the dev preview, run the production script to generate clean HTML with inlined styles and many other email-specific adjustments (configurable).

BYOHTML

Bring Your Own HTML. Unlike other email frameworks, Maizzle doesn't require writing made-up markup - you write your own (real) HTML. So there's one less thing to worry about, and you're also in full control: there is no code hidden behind custom tags.

HTML email markup
Tailwind custom colours

Centralised Style Guide

Thanks to TailwindCSS, you have a single config file where you can define style guides for all your projects. Whether you're developing for one client or 100, you can use the tailwind.js file to organise branding for all your email templates. The production emails will only include the CSS classes you use in them.

Clean Code Output

Maizzle includes email-tailored markup post-processing. After inlining takes place, it will clean up unused CSS in every file, both in the style tag and inside HTML attributes. There's also options for code prettify, minification, or preferred styling techniques (attributes vs. inline CSS).


All Features

Static Site Generator

Jigsaw is very powerful and highly customisable. Use it as-is, or extend it to match your workflow as needed.

Centralised Style Guide

Tailwind's config generates all your CSS classes and media queries, so you can keep all projects in one place.

BYOHTML

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

Rapid Prototyping

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

Automatic Inlining

When you build for production, Maizzle automatically inlines CSS for you. And it's configurable.

Minify

You can optionally turn on email-optimised minification, so your emails will weigh even less.

Prettify

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

Clean Code

Production emails built with Maizzle include zero unused code. Say goodbye to Gmail clipping.

Mobile or Desktop-first?

Prefer coding responsive emails, but need to do hybrid for a certain client? No problem: you own your markup.

Partials, Components, Directives

Build reusable or dynamic sections for your emails with Laravel Blade partials, components, and directives.

Google Fonts

Google Fonts support is included out of the box, and it's very easy to customise.

Markdown

Define a master layout and only write newsletter content in Markdown. Front Matter support included.

Build Environments

Local, staging, and production. But you can have as many as you'd like, and they're fully configurable.

Browsersync

Run the watch command to develop locally and have the browser automatically refresh for you.

Localhost Tunneling

Live-share a (customisable) URL to an email that you're working on, with a colleague or a client.

Screenshots

Need a quick screenshot of your layout? Maizzle supports all of Puppeteer's device descriptors.

Collections

Custom data structures that you can pull into your templates, like ESP tags or personalisation variables.

RSS To Email

Use Collections and Jigsaw's events bus to populate emails with content from an RSS feed or an API.

Easy Configuration

The Jigsaw and Tailwind config files are commented and easy to understand. Setup in minutes.

Extensible

You can extend both Jigsaw and Tailwind. Blog articles to newsletter? CSS gradients in email? No problem!

Level-up your email development game

Get Started →