Build responsive email templates faster with Maizzle

Stop wrestling with clunky table layouts and outdated inline styles. Build modern, responsive emails in a fraction of the time with Maizzle, a framework that brings Vue components, Tailwind CSS and a Vite-powered dev server to your email workflow.

Instead of fighting with legacy code, you can use simple HTML, ready-made components and utility-first CSS to create beautiful, consistent, and maintainable email templates.

Speed up your email development workflow

npx maizzle new
cd my-project
npm run dev

Coding emails has traditionally been a slow and painful process. Developers spend hours writing nested tables, inlining CSS by hand, and testing across dozens of frustratingly inconsistent email clients like Outlook. Maizzle transforms this experience by introducing a modern, efficient workflow.

Use familiar tools like Vue and Tailwind CSS

<template>
	<Html>
		<Head />
		<Body>
			<Tailwind>
				<Container class="max-w-xl bg-white p-6">
					<Heading level="2" class="m-0 text-4xl font-bold text-gray-900">
						Nice to meet you!
					</Heading>
					<Text class="m-0 text-base text-gray-900 dark:text-white">
						Hi [Customer Name], thank you for signing up ...
					</Text>
					<Button href="https://example.com">Get started</Button>
				</Container>
			</Tailwind>
		</Body>
	</Html>
</template>

Maizzle's biggest advantage is its integration with Tailwind CSS through @maizzle/tailwindcss, a Tailwind CSS 4 configuration tuned for email clients. Instead of writing custom CSS and worrying about what email clients support, you use simple utility classes directly in your templates.

Build complex layouts with intuitive classes like py-4, mx-auto, and text-lg. The email configuration uses a px spacing scale instead of rem, a HEX color palette instead of CSS variables, email-safe defaults for things like box-shadow and border-radius, and mso- utilities for Outlook. At build time, Maizzle lowers modern Tailwind CSS 4 syntax such as nesting and oklch() colors to plain CSS, rewrites class names that Gmail would strip (sm:text-lg becomes sm-text-lg), and inlines the result into style attributes. This approach delivers key benefits for any development team:

• Develop faster: Write less code and build templates in record time. Utility classes eliminate the need for custom stylesheets and manual style inlining.
• Ensure brand consistency: Define your brand's colors, fonts, and spacing once with @theme in your CSS. Every email built will be perfectly on-brand.
• Reduce complexity: Forget about memorizing obscure CSS workarounds for old email clients. The framework handles the hard parts for you.

Move away from outdated methods

If you've ever had to code an email in HTML, you know the pain of wrestling with nested tables and finicky client-specific hacks. The traditional workflow is repetitive, error-prone, and difficult to maintain.

Maizzle gives you both options. Reach for its 30+ built-in, render-tested Vue components such as Container, Row, Column, Button and Img, which expand to email-safe table markup, or keep the framework's original "Bring Your Own HTML" spirit and write the markup yourself when you need full control. Either way, Maizzle handles compilation and optimization, and provides progressive enhancement so modern clients get modern CSS while older clients that still require table-based structures keep rendering correctly.

Why Maizzle is ideal for modern teams

Maizzle isn't just a tool; it's a new way of thinking about email production. It's built for teams that value efficiency, maintainability, and high-quality design. By adopting a modern framework, you can produce better emails faster and with fewer headaches.

Traditional vs. Maizzle workflow: a comparison

Ultimately, the choice comes down to efficiency and scalability. While traditional methods get the job done, Maizzle provides a superior development experience that pays dividends in speed and quality. Understanding modern HTML email formats can help clarify why Maizzle's approach is so effective.

Enjoy key benefits for your team

Adopt Maizzle to bring the advantages of a modern development framework to your email production process.

• Faster development cycles: Build and iterate on templates quickly using reusable components and a streamlined workflow.
• Consistent styling across all emails: One @theme block defines your brand tokens, so every email adheres to your brand guidelines.
• Reduced complexity and fewer errors: The framework handles CSS inlining, attribute generation, and other tedious tasks automatically.
• Improved maintainability: Clean, readable code makes it simple for any developer to jump in and make updates.

How to get started with Maizzle

Getting up and running with Maizzle is straightforward, especially if you have experience with modern web development tools. The framework is designed to be approachable and easy to integrate into your existing workflow.

This walkthrough covers Maizzle 6, the June 2026 release that rebuilt the framework on Vite, Vue single-file components and Tailwind CSS 4. If you're still on Maizzle 5, the official upgrade guide walks through every change.

Set up your first project

To begin, you'll need Node.js (version 20.19 or higher) and npm installed on your machine. From there, you can scaffold a new project with a single command.

1. Create a new project: Run npx maizzle new in your terminal. The interactive wizard asks where to create the project (e.g., ./my-project), which starter to use (pick the default, maizzle/maizzle), and whether to install dependencies. Choose Yes. To skip the prompts entirely, run npx maizzle new maizzle/maizzle my-project --install.
2. Navigate to your project: cd into the newly created directory (e.g., cd my-project).
3. Install dependencies: If you didn't install dependencies during setup, run npm install.
4. Start the development server: Run npm run dev, which is a shortcut for npx maizzle serve. This starts a local server at http://localhost:3000 with live preview and hot module replacement, so you can see your changes in real-time as you code.

With the server running, you can start building your email. Templates live in the emails directory as Vue single-file components, and the starter ships with welcome, order confirmation, password reset and two-factor examples to learn from. Edit them using Tailwind CSS classes and the built-in components, and the preview updates instantly. For production builds, run npm run build (a shortcut for npx maizzle build) to render every template to optimized HTML files in the dist folder.

Customize your design system

The real power of Maizzle comes from its customizability. Tailwind CSS 4 is configured in CSS rather than a tailwind.config.js file, so you declare your brand's design tokens with @theme in the same stylesheet that imports Tailwind, whether that's a <style> tag inside your template's <Head> or a shared CSS file you link from it:

@import "@maizzle/tailwindcss";

@theme {
	--color-brand: #4f46e5;
	--color-brand-dark: #3730a3;
	--font-display: "Inter", sans-serif;
}

• Define your brand colors: Add --color-* tokens with your hex codes.
• Set up your typography: Declare --font-* tokens, or reuse Tailwind's default names such as --font-sans to override them.
• Customize spacing and borders: Any token you declare becomes a utility class, so every element aligns with your design guidelines.

Once configured, utilities like text-brand, bg-brand-dark and font-display are available in every template and component, enabling anyone on your team to build on-brand emails without ever writing a line of custom CSS.

Configuration and build options

Maizzle is configured through an optional maizzle.config.ts file at the root of your project, with sensible defaults: templates are picked up from emails/**/*.{vue,md}, output goes to dist, and CSS inlining, unused-CSS purging, shorthand expansion and safe class names are switched on. From there you can:

• Toggle CSS inlining, purging and HTML minification
• Change the output directory and file extension, which is handy for ESP or framework template formats such as .blade.php
• Register extra component directories for your own reusable building blocks
• Generate plaintext versions alongside the HTML
• Override any setting for a single template with defineConfig() inside its <script setup> block

Need different settings for staging and production? Run npx maizzle make:config production to scaffold a production.config.ts file, then build with npx maizzle build --config production.config.ts. This flexibility makes Maizzle powerful for teams that need to work with different email sending services (ESPs) and deployment scenarios.

Embrace a modern approach to email design

Switching to a framework like Maizzle is more than a technical upgrade—it's a strategic move to improve how your team creates and manages email campaigns. By leaving behind the slow, manual processes of the past, you free up your developers to focus on what truly matters: creating effective, engaging email experiences.

Produce higher-quality emails

A streamlined workflow leads directly to a higher-quality output. When developers aren't bogged down by repetitive tasks, they have more time to focus on strategic design and user experience.

• Build with confidence: Maizzle's components and transformers are render-tested in the major email clients, including Apple Mail, Gmail, Yahoo Mail and Outlook, so your designs start from code that is known to work.
• Focus on design, not hacks: Spend your energy perfecting the user journey instead of troubleshooting rendering bugs in Outlook.
• Implement advanced features: Use Maizzle's powerful features, like components, Vue's Composition API for loops and conditionals, and transformers, to add dynamic content and other advanced functionality. Transformers handle tasks like CSS inlining, unused-CSS purging, attribute generation, and HTML formatting automatically.

By following modern best practices for email design, you can ensure your campaigns not only look great but also drive results. The efficiency gains from Maizzle directly translate into more polished, effective, and impactful emails.

Future-proof your email workflow

Adopting a modern framework ensures your team's skills and processes stay relevant. As email clients evolve, Maizzle is updated to keep pace, protecting you from future compatibility headaches. This forward-thinking approach is backed by impressive email marketing data, which shows that modern, responsive designs consistently outperform static templates.

Stop coding emails like it's 2005. Embrace the speed, consistency, and power of a modern framework like Maizzle, and start building better emails today.

Common questions about Maizzle

Here are answers to some common questions developers have when considering a switch to the Maizzle framework.

Is Maizzle difficult to learn?

If you're already familiar with HTML and Tailwind CSS, you'll feel right at home with Maizzle. A template is mostly plain HTML plus a handful of components, and the <script setup> block is optional, so you don't need deep Vue experience to be productive. The framework handles the email-specific complexities behind the scenes, so you can focus on building.

For those new to Tailwind CSS, the initial adjustment involves getting used to utility classes, but most developers pick it up quickly and appreciate the speed it offers.

How does Maizzle handle email client quirks?

Maizzle is designed specifically to address the inconsistencies across different email clients, from modern apps like Gmail and Apple Mail to legacy clients like Outlook.

It automatically:

• Inlines your CSS into style attributes for clients that ignore <style> tags, and purges any CSS you don't use.
• Lowers modern CSS such as nesting, oklch() colors and CSS variables to plain values that email clients understand.
• Rewrites class names that Gmail would strip and converts longhand margin, padding and border rules to shorthand for Outlook.
• Renders built-in components like Container, Row and Column to bulletproof table-based markup.

Outlook-specific components

Maizzle includes specialized components and utilities for Outlook compatibility, such as:

• Button component: Creates bulletproof, fully clickable buttons whose padding also holds up in Outlook for Windows, without resorting to VML
• Outlook and NotOutlook components: Wrap markup in conditional comments so it renders only in Word-based Outlook on Windows, or everywhere except there
• OutlookBg and Vml components: Add background images, gradients and rounded shapes for Outlook for Windows using Vector Markup Language (VML)
• MSO utilities: Special utility classes like mso-hide-all and mso-text-raise-4 for Outlook-specific styling

These components ensure your emails render correctly across all versions of Outlook, from the legacy desktop versions to the modern web-based Outlook.

Can I integrate Maizzle with my current tools?

Yes. Maizzle is highly adaptable and can be integrated into most marketing automation or development workflows. You can use it to create master templates for your ESP, connect it to a CMS to pull in content dynamically, run it as a Vite plugin inside an existing app, or use it as a standalone tool for rapid prototyping. The documentation also includes deploy guides for Nodemailer, SendGrid, Mailgun, Postmark, Resend, AWS SES and Cloudflare.

Because the final output is just a single HTML file, it's compatible with virtually any platform that allows you to import custom HTML emails.

Implementing these best practices for email design requires deep technical expertise, especially when ensuring flawless rendering across dozens of email clients. If you want to deploy high-performance email campaigns without the technical headache, craftingemails specializes in designing and coding bespoke, pixel-perfect email templates for SaaS and eCommerce. Let us handle the complexities of responsive code and accessibility, so you can focus on what you do best: building relationships with your customers. Visit craftingemails to learn more.