Maizzle is a BYOHTML framework for rapid HTML email development. It's like a static site generator, but tailored to email.
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).
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.
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.
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).
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.
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.
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).
Jigsaw is very powerful and highly customisable. Use it as-is, or extend it to match your workflow as needed.
Tailwind's config generates all your CSS classes and media queries, so you can keep all projects in one place.
No need to learn custom tags or attributes. Write your own HTML structure, then style it with Tailwind.
Quickly build HTML emails with CSS utility classes. You won't need to write inline CSS for most of the time.
When you build for production, Maizzle automatically inlines CSS for you. And it's configurable.
You can optionally turn on email-optimised minification, so your emails will weigh even less.
Need to send the HTML to a human? Maizzle can prettify the code for you, so it's more readable.
Production emails built with Maizzle include zero unused code. Say goodbye to Gmail clipping.
Prefer coding responsive emails, but need to do hybrid for a certain client? No problem: you own your markup.
Build reusable or dynamic sections for your emails with Laravel Blade partials, components, and directives.
Google Fonts support is included out of the box, and it's very easy to customise.
Define a master layout and only write newsletter content in Markdown. Front Matter support included.
Local, staging, and production. But you can have as many as you'd like, and they're fully configurable.
Run the watch command to develop locally and have the browser automatically refresh for you.
Live-share a (customisable) URL to an email that you're working on, with a colleague or a client.
Need a quick screenshot of your layout? Maizzle supports all of Puppeteer's device descriptors.
Custom data structures that you can pull into your templates, like ESP tags or personalisation variables.
Use Collections and Jigsaw's events bus to populate emails with content from an RSS feed or an API.
The Jigsaw and Tailwind config files are commented and easy to understand. Setup in minutes.
You can extend both Jigsaw and Tailwind. Blog articles to newsletter? CSS gradients in email? No problem!