Subscribe
Sign in
Maizzle
p/maizzleHTML email development framework
Start new thread
Cosmin Popovici

Maizzle - A framework for rapid email prototyping šŸ’Œ

byā€¢

Maizzle is a new framework for HTML email development, powered by Tailwind CSS and Nunjucks templating. Code email templates any way you like, then style them with Tailwind's utilities - Maizzle takes care of CSS inlining and other email optimizations.

Add a comment

Replies

Best
Csaba Kissi
Can you tell me please what are the advantages over Mjml? When I started to code https://www.producthunt.com/post... my first choice was Mjml until I discovered the problem with responsiveness in Gmail (2 and more columns). Does your framework handle this properly?
Nicolas Garnier
@csaba_kissi Just pitching in, there is no problem with responsiveness on Gmail with MJML (no matter the number of columns). If the columns appear stacked, it's likely an issue with your sending method altering the HTML (but feel free to open an issue on Github so we can investigate).
Cosmin Popovici
Maker
@csaba_kissi For sure! Unlike MJML or HEML, Maizzle doesn't write the HTML tables markup for you. You write them yourself, which means you have full freedom to code them with any technique you'd like, be it responsive or hybrid. So you no longer depend on code locked inside the framework core. Plus, anyone can create a starter for Maizzle, which you can install with the `maizzle new` command. Besides that, styling emails with Tailwind CSS is extremely fast and flexible. I now use it as a design system for multiple brands/clients. Also, there's the environment configs system, which allows you to customize the build for any number of scenarios - no matter if you are developing locally or for production. There's lots of other different features, like unused CSS purging, automated tag attributes and tracking links, and even Markdown support, with GFM too! But yeah, if you're looking for a framework that offers tags like <row> and <column> so you don't have to write your own HTML, then MJML might be a better choice :)
Csaba Kissi
@nico_g Didn't check it recently. When I've tried it Gmail opened always the mobile version instead of desktop one even on the desktop. I've also opened the issue on Github. The answer was that it's related to Gmail because it altered the code. Don't know if there is some workaround for this already.
Nicolas Garnier
@csaba_kissi Ah ok, it was probably before Gmail supported responsive design then (~ September 2016), in which case we indeed couldn't do anything.
Cosmin Popovici
Maker
šŸ‘‹ Product Hunt! I built Maizzle because I was tired of manually coding HTML email templates, and I needed a design system to organize my work - hated writing CSS for every template. And that's where Tailwind CSS came in - from there, I simply put together a framework of all the things I needed, then open sourced it. Initially launched last year as a project powered by the Jigsaw static site generator, Maizzle has been rewritten from the ground up and has now evolved into a framework that you can use to develop HTML email templates both locally and on the server. šŸ™ I would love to get your feedback on it, I'm happy to answer any questions! Here are some key features: Tailwind CSS 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. BYOHTML 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 makes your code more portable, as it should be. Bring Your Own HTML. Build environments 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. Transformers Transform your markup with automatic inlining, unused CSS purging, minification, code prettify, uglify CSS class names, and so much more. Enable, disable, or customize them depending on your build environment. Other features include: - Email optimized code cleanup - Automated tag attributes - Plaintext versions - Image CDN-friendly - Use on the server - āš”4email support - Easy URL params - Google Fonts - BrowserSync Full documentation and examples available at https://maizzle.com
Selna Jr Stephen
Amazing
Mira Markle
nice
Daisy Tee
<3 <3
Theresa Jones
amazing
Matthew Jason Craig

I'd love to see more out-of-the--box component samples/library, and I'd love to be able to use different templating languages such as Pug in place of Nunjucks.

Pros:

Rapidly fast email template development and prototyping.

Cons:

Nunjucks.js can take a little white to get used to.

Ivan Demidov
Very cool