Maizzle v1.3.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 app or clients.

Where can I get it?

GitHub. Maizzle is currently a project, not 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 emails. Jigsaw uses the Laravel Blade templating engine, and it includes many awesome features like master layouts, partials, collections, Laravel Mix for asset compilation, and even Markdown support.

Jigsaw logo
TailwindCSS

TailwindCSS

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

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™

When did we forget how to write tables? 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 learn, and you're also in full control: there is no code hidden behind proprietary tags.

Bring Your Own HTML.

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 as a design system, to organise branding for all your email templates.

Clean Code

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. Optionally enable code prettify, minification, or uglify class names. You can even choose if and when HTML attributes should be used instead of 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.

Uglify Classes

Rewrite CSS class names to be as few characters as possible, so your production emails are even lighter!

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.

CDN-friendly

Already using a CDN for images? Define a base image URL and Maizzle will prepend it to all image paths.

Google Fonts

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

Markdown

Optionally write newsletter content in Markdown only. Supports Markdown Extra and Front Matter.

Laravel Blade

Use the power of the Laravel Blade templating language to create loops, conditionals, or even write plain PHP.

Plaintext Versions

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

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 generate 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 grid in email? No problem!

Custom Tailwind plugins

From custom borders to background gradients and HTML email-specific utilities.

💪 your email development

Get Started →

Maizzle is open source software made with for 📧