The modern email development framework.

Develop, preview and build production-ready emails in a modern environment, with Vue and Tailwind CSS.

Get started
$npx maizzle new

Workflows

Use in any Vite project,
or as a standalone tool.

Plug Maizzle into your existing build, run it from the command line, or call it as a library. Same components, same output.

emails/welcome.vue
<template>
  <Layout class="bg-gray-50 dark:bg-gray-950">
    <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">
        <Row>
          <Column class="w-1/2">
            <Link href="https://maizzle.com">
              <Img src="/logo.png" width="60" alt="Maizzle" />
            </Link>
          </Column>
          <Column class="w-1/2 text-right">
            <Link
              href="https://maizzle.com"
              class="text-sm font-medium text-gray-400"
            >
              My Account
            </Link>
          </Column>
        </Row>

        <Spacer class="h-36" />

        <Heading class="mb-4 text-[32px]/10 font-bold text-white">
          Welcome to [Brand Name]
        </Heading>

        <Text class="m-0 text-lg text-gray-300">
          Your account is almost ready.
        </Text>
      </Section>

      <Section class="rounded-b-lg bg-white px-6 py-16 dark:bg-gray-800">
        <Heading level="2" class="mb-6 text-2xl font-bold text-gray-950 dark:text-white">
          Confirm your email
        </Heading>

        <Text class="mb-6 text-base text-gray-600 dark:text-gray-300">
          Thanks for signing up for [Brand Name]. Please confirm your email address to activate your account and start using all features.
        </Text>

        <Button
          href="https://maizzle.com"
          class="rounded-lg bg-gray-900 px-7 py-3 text-sm font-bold text-white dark:bg-white dark:text-gray-900"
        >
          Activate my account
        </Button>

        <Text class="mt-6 text-sm text-gray-600 dark:text-gray-400">
          <Text as="span" class="text-sm font-semibold">This link will expire in 24 hours.</Text>
          <br>
          If you did not create an account, you can safely ignore this email.
        </Text>
      </Section>

      <Section class="px-6 py-11">
        <Img src="/logo-footer.png" dark-src="/logo-footer-dark.png" width="106" alt="Maizzle" />

        <Spacer class="h-9" />

        <Text class="m-0 text-xs/4.5 text-gray-400">
          &copy; {{ new Date().getFullYear() }} [Brand Name]. All rights reserved.
        </Text>
      </Section>
    </Container>
  </Layout>
</template>
dist/welcome.html

Components

Build beautiful emails with reusable components.

Render-tested email components that look great across major email clients, with a developer experience to match.

<html><Body><!-- Content --></Body></html>

Html

<head>

Head

Body

Layout

Container

Section

Row

Column

Heading

Heading

Dev UI

The best email development
experience around.

Preview your emails in real-time as you code, in a beautiful interface purposely built for email development.

1

screenshot placeholder

Live preview

See your changes in real-time as you code, with no need to refresh.

“Maizzle is amazing! I use it for building all our emails, and being able to combine Tailwind with Maizzle's component system feels so modern and powerful. I can't imagine building email templates any other way.”

Eric L. Barnes

Creator of Laravel News

Tailwind CSS

Style HTML emails
with Tailwind CSS.

Tailwind CSS is a first‑class citizen in Maizzle, finely‑tuned for email client compatibility.

emails/welcome.vue
<template>
  <Layout>
    <Container class="max-w-xl bg-white">
      <Section class="px-6 py-12">
        <Heading class="text-3xl sm:text-2xl font-bold text-gray-900">
          Build stunning emails, faster.
        </Heading>

        <Text class="m-0 mt-4 mb-6 text-base text-gray-600">
          Tailwind CSS, fine-tuned for every email client.
        </Text>

        <Button
          href="https://maizzle.com"
          class="px-5 py-3 text-sm rounded-lg bg-indigo-600 font-semibold text-white"
        >
          Read the docs
        </Button>
      </Section>
    </Container>
  </Layout>
</template>
dist/welcome.html
<!DOCTYPE html>
<html lang="en" dir="ltr" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
    <meta charset="utf-8">
    <meta name="x-apple-disable-message-reformatting">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no, date=no, address=no, email=no, url=no">
    <meta name="color-scheme" content="light dark">
    <meta name="supported-color-schemes" content="light dark">
    <!--[if mso]>
      <style>
        td,th,div,p,a,h1,h2,h3,h4,h5,h6 {font-family: "Segoe UI", sans-serif; mso-line-height-rule: exactly;}
      </style>
    <![endif]-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" media="screen">
    <style>
      @media (max-width: 600px) {
        .sm-text-2xl {
          font-size: 24px !important;
          line-height: 32px !important;
        }
      }
    </style>
  </head>
  <body xml:lang="en" style="margin: 0; width: 100%; height: 100%; padding: 0; word-break: break-word;">
    <span style="display:none;">
      <!--[if mso]>
        <xml>
          <o:OfficeDocumentSettings>
            <o:PixelsPerInch>96</o:PixelsPerInch>
          </o:OfficeDocumentSettings>
          <w:WordDocument>
            <w:DontUseAdvancedTypographyReadingMail />
          </w:WordDocument>
        </xml>
      <![endif]-->
    </span>
    <div role="article" aria-roledescription="email" lang="en" dir="ltr" style="font-size: medium; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; font-size: max(16px, 1rem);">
      <!--[if mso]><table role="none" cellpadding="0" cellspacing="0" style="width: 576px" align="center"><tr><td style="background-color: #fffffe"><![endif]-->
      <div style="margin: 0 auto; max-width: 576px; background-color: #fffffe;">
        <!--[if mso]><table role="none" cellpadding="0" cellspacing="0" style="width: 100%"><tr><td style="padding: 48px 24px"><![endif]-->
        <div style="padding: 48px 24px;">
          <h1 class="sm-text-2xl" style="margin: 0; font-size: 30px; line-height: 36px; font-weight: 700; color: #111827;">Build stunning emails, faster.</h1>
          <p style="margin: 16px 0 24px; font-size: 16px; line-height: 24px; color: #4b5563;">Tailwind CSS, fine-tuned for every email client.</p>
          <div>
            <a style="display: inline-block; border-radius: 8px; background-color: #4f46e5; padding: 12px 20px; font-size: 14px; line-height: 20px; font-weight: 600; color: #fffffe; text-decoration: none;" href="https://maizzle.com">
              <!--[if mso]><i style="mso-font-width: 150%; mso-text-raise: 31px;" hidden>&emsp;</i><![endif]-->
              <span style="mso-text-raise: 16px;">Read the docs</span>
              <!--[if mso]><i style="mso-font-width: 150%;" hidden>&emsp;&#8203;</i><![endif]-->
            </a>
          </div>
        </div>
        <!--[if mso]></td></tr></table><![endif]-->
      </div>
      <!--[if mso]></td></tr></table><![endif]-->
    </div>
  </body>
</html>

Deploy

Send with any platform.

Maizzle compiles your emails to pure HTML, so you can use any email service provider.

In production

Build any kind of email.

Maizzle is used by companies of all sizes to build HTML emails.

plugshare
riviera-motors
balmain
sneakerhead
pot-sa-ajut
green4ever
laravel
nuage

Take it to the
next level with Mailviews.

A vast collection of super high quality, production‑ready email templates and components that help you quickly build HTML emails. Buy once, own forever.

Explore Mailviews