Maizzle uses the Tailwind CSS framework, so you can rapidly prototype HTML emails just by adding classes to your markup. Once satisfied with the dev preview, build for production to generate clean HTML with inlined styles and many other, email-specific optimizations.
Framework for Rapid Email Prototyping
Maizzle is an email framework that helps you quickly build emails with utility-first CSS and advanced, email-specific post-processing.
Get StartedLooking for the Jigsaw version?
Tailwind CSS
Who said CSS frameworks should only be used for websites?
BYOHTML
Markup you already know, no need to learn custom tags and attributes
Maizzle doesn't require learning custom syntax: you write your own, real HTML.
There are no hardcoded components burried in the framework core. This enables maximum flexibility, and ensures your code is portable, as it should be.
Bring Your Own HTML.
Build Environments
Distinct settings for any number of build scenarios
Define custom settings for as many build scenarios as you need by simply duplicating the default config.js.
Using dummy data locally, but fetching from an API when staging? Prettified markup for your colleagues, but minified for production?
All possible.
Maizzle Features
Customizable tools, crafted for email development
- CLI Tool Scaffold a project from any Maizzle starter, develop locally, then build your emails for production.
- Tailwind CSS Quickly build HTML emails with CSS utility classes. You won't need to write inline CSS for most of the time.
- Build System Simple and fast Node.js build system that takes care of all the transformations necessary for HTML emails.
-
JavaScript Configs
Maizzle's config files are JavaScript objects, so you can even
require()packages or fetch data from an API. - Build Environments Distinct configs for any number of build scenarios, from local development to production emails.
-
Use in Node.js
Import Maizzle into your application and use the
render()method to get an HTML string. - BYOHTML No need to learn custom tags or attributes. Write your own HTML structure, then style it with Tailwind CSS.
- Email Optimizations HTML email-specific optimizations, that you can customize from your environment config.
- Nunjucks Templating Maizzle uses the fast and highly flexible Nunjucks templating language, created by Mozilla.
- Markdown Markdown is supported out-of-the-box, and you can fully configure it. GFM is enabled by default.
- Front Matter Define custom variables or override any configuration keys right from a template, with Front Matter.
- CSS Inlining Juice is used for email-optimized CSS inlining, and you can customize or even disable it completely.
- Minify Optionally enable email-safe code minification, to make your production emails 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!
- Image CDN-friendly Already using a CDN for images? Define a base image URL and Maizzle will prepend it to all image paths.
- Link Tracking Use Front Matter to specify as many URL parameters as you need - they will all be appended to your links.
- Google Fonts Easily pull in Google Fonts, either globally or just for a single template, then use them with Tailwind classes.
- Plaintext Versions Optionally generate plaintext versions from your HTML emails. Or have your ESP do it. Your call.
-
BrowserSync
Run the
maizzle servecommand to develop locally and have the browser automatically refresh for you. - Localhost Tunneling Live-share a configurable URL to an email template that you're working on, with a colleague or a client.
- ⚡4email Easily create interactive emails with realtime information and in-line actions, with the included examples.
Start building awesome emails
Install Maizzle and start building your first email in seconds. Read the docs to learn about advanced features and concepts, or checkout the examples.
Get Started →Made with ❤ for email, open sourced under the MIT license.