Maizzle

Maizzle is a build tool for HTML email. You write each email as a Vue single-file component styled with Tailwind CSS, and maizzle build renders it to a static HTML file in dist/.

Minimal example

The starter project creates an emails/welcome.vue file. This is the first part of it, trimmed (the starter also has Row, Column, Link, Img, Spacer and a footer):

<template>
  <Layout class="bg-gray-50 dark:bg-gray-950">
    <Preheader>Confirm your email to activate your account.</Preheader>

    <Container class="max-w-xl p-0 py-10 sm:p-6">
      <Section class="rounded-t-lg bg-gray-900 px-6 pt-6 pb-11">
        <Heading class="mb-4 text-[32px]/10 font-bold text-white">
          Welcome to [Brand Name]
        </Heading>
        <Button
          href="https://example.com"
          class="rounded-lg bg-gray-900 px-7 py-3 text-sm font-bold text-white"
        >
          Activate my account
        </Button>
      </Section>
    </Container>
  </Layout>
</template>

Create a project and build it:

npx maizzle new
npm run build

The starter's package.json maps npm run dev to maizzle serve and npm run build to maizzle build.

Pros and cons

The details behind each point are in Limits and gotchas and Maintenance.

How it works

Maizzle compiles each Vue component to a static HTML file, then runs transformers over the result. Three parts matter for email.

• Layout: Container, Section, Row and Column render <div> elements. The <table> and <td> markup is a ghost table inside <!--[if mso]> comments, so only Word-based Outlook sees it. Row also computes column widths.
• CSS inlining: the production build moves your Tailwind and component styles into style attributes. The transformer, src/transformers/inlineCss.ts, imports juice, an inliner maintained by Automattic. juice moves CSS into style attributes. It does not build table layouts, and its README makes no claim about specific email clients. The build removes unused CSS and minifies the result.
• Outlook conditionals: the <Outlook> placeholder markers become real <!--[if mso]> conditional comments in a msoConditionals transformer that runs after the DOM transformers. Button takes msoPt, msoPb and msoPx props and a toggle for its MSO fallback. It uses hidden <i> spacers for Outlook padding, not VML. VML comes from the crop mode of Img, OutlookBg and Vml.

For plain text, Maizzle has Plaintext and NotPlaintext components and a createPlaintext(html) function, and the dev UI shows the plain-text output. In the 6.3.2 package source, maizzle build writes a .txt file next to the HTML when the plaintext option is set, either in the config or in the template.

The package ships its own tooling. maizzle serve starts a Vite-based dev server with HMR, and the dev UI offers a live preview, device-size previews, dark-mode emulation, HTML and plain-text inspection, a compatibility check, lint errors and test-email sending. The maizzle binary has new, serve, build and prepare commands.

What the HTML becomes on the wire is covered in MIME and message format.

Send it with an email API

Maizzle produces a file, so build it first, then read the HTML and send it with the TypeScript SDK. Adjust the path to match your build output.

import { readFile } from 'node:fs/promises';
import { Nuntly } from '@nuntly/sdk';
const nuntly = new Nuntly({ apiKey: process.env.NUNTLY_API_KEY! });
const html = await readFile('dist/welcome.html', 'utf8');
await nuntly.emails.send({
  from: 'Acme <hello@example.com>',
  to: 'jane@example.org',
  subject: 'Welcome to Acme',
  html,
});

The send your first email guide covers the SDK setup and the other fields.

Email client support

The list comes from the compatibility docs, which say all components have been render-tested in those clients. We did not run the tests.

Outlook on Windows is where a layout usually breaks. Maizzle emits ghost tables and Outlook fallbacks by default, but caniemail lists @media and prefers-color-scheme as unsupported there. Gmail also does not support prefers-color-scheme, so dark: classes do nothing in it. The dev preview runs in your browser, not in an email client. Before you ship, send a test to the clients your recipients use, and look up any CSS property you depend on in caniemail.

Limits and gotchas

• Breakpoints are reversed from Tailwind. sm:, md: and lg: are max-width queries (600, 768 and 1024 px), so lg:text-blue-500 applies below 1024 px, not above. The maintainer says this desktop-first choice is intentional, so write the desktop style as the base and override it for small screens.
• render() does not read maizzle.config.ts. It uses only the config object you pass in, while maizzle build loads the file, and the API docs still say otherwise. Pass your settings explicitly, and in a long-running process use createMaizzle() (6.2.0 and later), because render() starts a Vite server on every call. It runs on Node.js only, so it cannot run in an edge runtime such as Cloudflare Workers.
• Gmail can drop a whole <style> tag. The Maizzle docs say Gmail discards the entire tag when it sees a \ (from yahoo:) or a nested at-rule (from stacked variants such as dark:ios:), and that the fix is a separate <Tailwind> block for those utilities. caniemail does not confirm this claim, so test it in Gmail.
• dark: is not shown by the preview and not read by every client. dark: compiles to prefers-color-scheme, which caniemail lists as unsupported in Gmail, classic Outlook on Windows and Yahoo. The dev UI "Emulate dark mode" button simulates forced color inversion and does not apply dark: rules, so switch your OS appearance to preview them.
• Content inside <Outlook> had no styling before 6.1.4. It was not inlined and its rules were purged, so classic Outlook on Windows rendered it unstyled. Upgrade if you are pinned below 6.1.4.

Maintenance

Active: five releases in the 25 days before 2026-11-05 (v6.2.1 on 2026-10-11 to v6.3.2 on 2026-11-03), and the last commit is from 2026-11-03.

• Treat v6 as a rewrite. Version 6.0.0 (2026-06-09) replaced the HTML templates of v5 with Vue single-file components, so v5 projects and tutorials from before June 2026 do not carry over.
• Install @maizzle/framework, start from maizzle/maizzle. Issues for the starter are filed on the framework repository.

Compare

• React components instead of Vue: React Email, or mjml-react over MJML output.
• Markup compiled by a separate engine: MJML.
• Svelte instead of Vue: Svelte Email.
• JSX or TSX, or the same tags as a string with no build step: @unitpost/email.
• Another JavaScript tool with the same authoring model as React Email: JSX Email.
• The full list with status: Email frameworks hub.

FAQ

Is Maizzle still maintained?

Yes, as read on 2026-11-05. The latest release is v6.3.2 from 2026-11-03, the last commit is from the same day, and the repository is not archived.

What changed in Maizzle v6?

Version 6.0.0 was released on 2026-06-09. It replaced the HTML-with-Tailwind templates of v5 with Vue single-file components, so tutorials written before June 2026 describe the older model.

Does Maizzle inline CSS?

Yes. The production build runs a CSS inlining transformer that uses juice, plus unused CSS removal and minification. Inlining moves CSS into style attributes. Layout and Outlook fallbacks come from the Maizzle components.

Do I need a sending service account to use Maizzle?

No. Maizzle renders HTML locally and the docs say the result can be sent through any provider. The project is maintained by the maizzle GitHub organization, not by a sending service.