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://app.emailens.dev/api/preview \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer ek_your_api_key" \
  -d '{
    "format": "maizzle",
    "html": "<div class=\"max-w-[600px] mx-auto\"><h1 class=\"text-2xl font-bold\">Hello from Maizzle!</h1></div>"
  }'

The response includes a compiledHtml field with the generated HTML (Tailwind classes compiled to inline styles via juice).

The API compiles a single template with no project around it, so tags that read other files (<extends>, <component>, <include>, <fetch>, <module>) are rejected with a 422 and "phase": "validation". For a real Maizzle project, run maizzle build and lint the output with the CLI.

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	Stylesheet `<link>` in the layout head (v5) or a `<Font>` component (v6)
`<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);
// "v5: put the stylesheet link in the layout head. v6: put a <Font> component in the Vue file. ..."

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.