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
<script setup>
const name = 'friend'
</script>

<template>
  <Layout>
    <Container class="max-w-[600px]">
      <Heading as="h1">
        Welcome, {{ name }}
      </Heading>
      <Button href="https://maizzle.com">
        Read the docs
      </Button>
    </Container>
  </Layout>
</template>
Terminal

VITE v7.0.0 ready in 312 ms

Local: http://localhost:5173/

Network: use --host to expose

press h to show help

dist/welcome.html

Dev UI

The best email development experience around.

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

  • screenshot placeholder

    Live preview

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

  • screenshot placeholder

    Device sizes

    Drag to resize or pick a device from the list to see how your email looks on different screen sizes.

  • screenshot placeholder

    Debugging tools

    Inspect the HTML and plaintext output, check compatibility, view linting errors and even send yourself a test email.

  • screenshot placeholder

    Commands

    Use the command palette to quickly find an email, screenshot it, or check the documentation.

“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-[600px] bg-white">
      <Section class="px-12 py-12">
        <Heading
          as="h1"
          class="text-2xl font-bold text-slate-900 sm:text-3xl"
        >
          Build stunning emails, faster.
        </Heading>

        <Text class="mt-4 text-base text-slate-600">
          Tailwind CSS, fine‑tuned for every email client.
        </Text>

        <Button
          href="https://maizzle.com"
          class="mt-7 rounded-lg bg-indigo-600 px-5 py-3 font-semibold text-white"
        >
          Read the docs
        </Button>
      </Section>
    </Container>
  </Layout>
</template>
main
1.2 KB

Deploy

Send with any platform.

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

Resend
SendGrid
Mailgun
Postmark
Amazon SES
Mailchimp
Brevo
Loops
Customer.io
Nodemailer
Mailtrap
Klaviyo
Resend
SendGrid
Mailgun
Postmark
Amazon SES
Mailchimp
Brevo
Loops
Customer.io
Nodemailer
Mailtrap
Klaviyo

In production

Build any kind of email.

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

screenshot

PlugShare

screenshot

AIHR

screenshot

Laravel News

screenshot

Green4Ever

screenshot

Screencasting.com

screenshot

TrekWorld

screenshot

Foundation

screenshot

The Whiskey Diary

screenshot

Santos

Mailviews

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