Maizzle
Preview Maizzle templates with Emailens — submit Maizzle source directly and get framework-aware fix snippets.
Emailens can compile Maizzle templates server-side and preview the resulting HTML across all email clients.
API usage
Set format: "maizzle" in your API request:
curl -X POST https://emailens.dev/api/preview \
-H "Content-Type: application/json" \
-H "Authorization: Bearer ek_your_api_key" \
-d '{
"format": "maizzle",
"html": "<extends src=\"src/layouts/main.html\"><block name=\"template\"><div class=\"max-w-[600px] mx-auto\"><h1 class=\"text-2xl font-bold\">Hello from Maizzle!</h1></div></block></extends>"
}'The response includes a compiledHtml field with the generated HTML (Tailwind classes compiled to inline styles via juice).
Framework-aware fix snippets
When you set format: "maizzle", warnings include Maizzle-specific fix snippets that use Tailwind utility classes and Maizzle config patterns:
| Problem | Generic HTML fix | Maizzle fix |
|---|---|---|
| Flexbox in Outlook | <table> with <!--[if mso]> | Tailwind w-1/2 classes + MSO conditional table |
@font-face | Web-safe font stack | googleFonts config in config.js |
<style> in Gmail | Inline CSS | Tailwind utility classes (auto-inlined by juice) |
max-width in Outlook | MSO conditional table wrapper | MSO conditional wrapping Tailwind max-w-[] classes |
gap property | Padding on <td> | Tailwind pr-4 padding classes on child elements |
How it works
- Your Maizzle template is received by the API
- Emailens compiles it using the Maizzle build pipeline (Tailwind CSS + juice inlining)
- The resulting HTML is passed through the full preview pipeline
- Warnings include Maizzle-specific before/after fix snippets
- You get back transforms, warnings, scores, dark mode variants, and screenshots
Engine usage
When using @emailens/engine directly, pass "maizzle" as the framework parameter:
import { analyzeEmail, getCodeFix } from "@emailens/engine";
// Get Maizzle fix snippets in all warnings
const warnings = analyzeEmail(compiledHtml, "maizzle");
// Or look up a specific fix
const fix = getCodeFix("@font-face", "gmail-web", "maizzle");
console.log(fix.description);
// "Add fonts via the googleFonts key in config.js — Maizzle injects the Google Fonts link tag automatically."Error handling
If compilation fails, you get a 422 response:
{
"error": "Failed to compile Maizzle template.",
"phase": "compile"
}Maizzle + Emailens workflow
Maizzle produces clean, inlined HTML emails thanks to its Tailwind CSS + juice pipeline. You'll typically see good compatibility scores out of the box. Emailens catches issues that Maizzle's build doesn't address — like Outlook VML requirements for rounded corners and background images, dark mode color overrides, and gap/flexbox limitations.
The Maizzle-specific fix snippets guide you toward Tailwind-native solutions and config.js changes rather than post-build HTML modifications.