Maizzle vs MJML: which framework should build your emails?

The same welcome email in both

Maizzle's documentation includes a migration page for people coming from MJML, with the same email written both ways. The two blocks below are taken from that page: the Maizzle guide for MJML users. It also gives a component map, which is a quick way to see how far apart the two vocabularies really are.

MJML

<mjml>
  <mj-head>
    <mj-title>Welcome to Acme</mj-title>
    <mj-preview>Let's get you set up.</mj-preview>
    <mj-attributes>
      <mj-all font-family="Helvetica, Arial, sans-serif" />
      <mj-text color="#475569" font-size="16px" />
    </mj-attributes>
  </mj-head>
  <mj-body background-color="#ffffff">
    <mj-section>
      <mj-column>
        <mj-text font-size="24px" color="#0f172a">Hi {{ name }}</mj-text>
        <mj-text>Thanks for signing up. Click below to verify your email.</mj-text>
        <mj-button href="https://example.com/verify" background-color="#2563eb">
          Verify email
        </mj-button>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Maizzle

<script setup>
  defineProps({ name: String })

  useHead({ title: 'Welcome to Acme' })
</script>

<template>
  <Html>
    <Head />
    <Preheader>Let's get you set up.</Preheader>
    <Tailwind>
      <Body class="text-gray-600 text-base bg-white font-sans">
        <Container class="max-w-lg">
          <Text class="text-2xl text-gray-950">Hi {{ name }}</Text>
          <Text>Thanks for signing up. Click below to verify your email.</Text>
          <Button href="https://example.com/verify" class="bg-blue-600 text-white">
            Verify email
          </Button>
        </Container>
      </Body>
    </Tailwind>
  </Html>
</template>

Three things stand out. Styling moves from attributes on every tag to Tailwind classes. The page head is assembled with useHead() and a Preheader component instead of mj-title and mj-preview. And {{ name }} is no longer a placeholder you fill in later: in Maizzle it is a Vue prop, so the same file can render for any name you pass in, with the full Vue toolbox (conditions, loops, computed values) around it.

Where the two feel different day to day

Dynamic content

MJML has no variables of its own. The MJML documentation tells you to put templating syntax inside mj-raw and warns that minifying can trip over characters such as < in those tags, which you work around with htmlmin:ignore comments. In practice you compile first, then run Handlebars, Liquid or your own code over the HTML. Maizzle renders its Vue components with server-side rendering, so logic runs during the build, and the build can feed a plain-text version as well.

Shared partials

MJML has mj-include, and it has a catch worth knowing before you adopt it: includes are silently ignored unless you opt in with ignoreIncludes: false in Node or --config.allowIncludes true on the command line. If your header goes missing from the output, that is the first thing to check. The Maizzle equivalent is a Vue component, which the migration guide shows as a small Header component placed inside the body.

import mjml2html from 'mjml'

async function compile(source) {
  const { html, errors } = await mjml2html(source, { ignoreIncludes: false })
  return html
}

That follows the asynchronous mjml2html call and the ignoreIncludes option shown in the MJML docs. When your includes use relative paths, the same docs page also passes a filePath so MJML knows where to resolve them from.

Dev server and checks

Maizzle's dev server has live preview, device resizing, dark mode emulation and a Checks tab. The checks come in two kinds: compatibility warnings built from caniemail.com data, and lint rules such as a Button without an href or an image with no alt. By default they target Gmail, Apple Mail, Outlook and Yahoo!. MJML's tooling is lighter: a watch mode on the CLI, a validation level setting (strict, soft or skip) and editor plugins. Neither replaces real client screenshots, and Maizzle's own compatibility page says as much.

Outlook and other awkward clients

Both frameworks wrap the table and conditional-comment tricks so you do not write them by hand. Maizzle's Button has props such as msoPt, msoPb and msoPx for padding in classic Outlook and an outlookFallback switch, and it has Outlook, NotOutlook and OutlookBg (VML background images) components for the cases where you need to target that client directly. MJML's documentation is blunter about one limit: mj-button is not fully clickable in some clients because of limited support. Both approaches are fine; what matters is that you click the corners of the button in a real Outlook preview.

Where the project lives

Maizzle can be its own repository, or a Vite plugin inside an app. The docs name Laravel, Nuxt, SvelteKit and Astro, and describe the plugin as running Maizzle in its own dev server beside yours, then compiling emails after vite build. MJML sits outside your build: you call the CLI or mjml2html wherever you like, which is why it fits Rails, Django or .NET shops without any frontend toolchain.

Getting the HTML out

Compiled output is only half the job. Maizzle documents deploy recipes for Nodemailer, SendGrid, Mailgun, Postmark, Resend, AWS SES and Cloudflare. The Resend one, from its deploy page, renders a template and sends it in a few lines:

import { Resend } from 'resend'
import { render } from '@maizzle/framework'

const resend = new Resend(process.env.RESEND_API_KEY)
const { html, plaintext } = await render('emails/welcome.vue')

await resend.emails.send({
  from: 'hello@yourdomain.com',
  to: 'user@example.com',
  subject: 'Welcome',
  html,
  text: plaintext,
})

For a build step you run ahead of time, the programmatic form is:

import { build } from '@maizzle/framework'

const { files } = await build({
  content: ['emails/**/*.vue'],
  output: { path: 'dist' },
})

What the stack costs around two free frameworks

The framework is the cheap part. Two lines of the bill matter: previews and sending. On its pricing page Email on Acid lists Basic at $99 a month for 1,000 previews and Premium at $199 for 2,000, with overages at $0.15 per preview. Each client or device screenshot counts as one preview, so a test across 50 clients uses 50 of them: Basic covers roughly 20 full runs a month, Premium roughly 40. If you rebuild an email five times before sending, that budget goes quickly, which is an argument for the framework with the faster feedback loop, whichever you pick.

For sending, Resend's pricing page lists a Free plan at $0 for 3,000 emails a month (100 a day) and Pro at $20 for 50,000. Either framework's output works with it, and Maizzle's docs show exactly how. If you want to compare other senders, our Resend vs Postmark and Postmark vs SendGrid pages put numbers side by side.

Choose Maizzle if…

• Designers and developers already share a Tailwind configuration and you want email to follow it.
• Templates need real logic: locale switching, repeated rows from data, optional blocks.
• You want the framework to warn you about unsupported CSS before you open a preview service.
• The emails live next to a Vite app (Laravel, Nuxt, SvelteKit, Astro) and share components with it.

Choose MJML if…

• Your backend is not JavaScript, or several services need to compile the same source.
• You prefer a short vocabulary where layout is mj-section and mj-column, and you do not want to think about Tailwind at all.
• A platform you use takes MJML directly. Loops, for example, lets you upload your own MJML in place of its editor.
• People other than front-end developers need to read and review the templates.

Moving from one to the other

Going from MJML to Maizzle is the better-documented direction, since Maizzle supplies the component map. Rebuild one low-stakes email first, such as a password reset, send both versions through the same client previews, and compare the screenshots. Going the other way means flattening Vue logic into placeholders, so decide up front where conditional blocks will live afterwards. For other pairings see MJML vs React Email and React Email vs Maizzle, and for the CSS limits behind all of this read CSS in email and client compatibility.