Build HTML emails fast with utility-first CSS
Get Started →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 app or clients.
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.
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.
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).
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.
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.
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.
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.
Rewrite CSS class names to be as few characters as possible, so your production emails are even lighter!
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.
Already using a CDN for images? Define a base image URL and Maizzle will prepend it to all image paths.
Google Fonts support is included out of the box, and it's very easy to customise.
Optionally write newsletter content in Markdown only. Supports Markdown Extra and Front Matter.
Use the power of the Laravel Blade templating language to create loops, conditionals, or even write plain PHP.
Optionally generate plaintext versions from your HTML emails. Or have your ESP do it. Your call.
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 generate 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 grid in email? No problem!
From custom borders to background gradients and HTML email-specific utilities.