feat: maizzle 6 by cossssmin · Pull Request #1708 · maizzle/framework

cossssmin · 2026-04-04T13:34:35Z

Maizzle 6

Holy crap it's finally here! Tailwind CSS 4, Vue templating, Vite plugin and lots more 🥳

Maizzle 6 is a complete framework rewrite. It uses Vite for the build system and dev server, and it can even be used as a Vite plugin in your existing vite.config.js. We've moved to using Vue for templating: not only do you get a much better DX when coding emails, but the vast Vue ecosystem means you can do a lot more things, and LLMs will now be better at using Maizzle.

Given the above, this version is not backwards-compatible with Maizzle 5.

Highlights

Vite build system and dev server
Maizzle as a Vite plugin
Vue templating with SFCs
Tailwind CSS 4
Revamped dev UI
30+ built-in components
Composables for per-template configuration
AI skills for LLMs

Upgrade guide: SOON

Getting started

Scaffold a new project:

npx maizzle new

When prompted, select the Default starter.

Or use it as a Vite plugin in an existing project:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'
import { maizzle } from '@maizzle/framework'

export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(),
    maizzle({
      root: 'resources/js/emails',
      output: {
        path: 'resources/views/emails',
        extension: 'blade.php',
      },
      static: {
        source: ['resources/js/emails/images'],
      },
    }),
  ],
})

Laravel

Maizzle 6 detects Laravel projects and auto-configures itself.

Components

Maizzle 6 ships with a generous set of built-in Vue components that you can use without importing.

Skeleton

<Html>
<Head>
<Body>
<Layout>
<Tailwind>

Layout

<Container>
<Section>
<Row>
<Column>
<Overlap>
<Spacer>
<Hr>

Use Tailwind utilities directly on any of these. Widths, padding and Outlook fallbacks are computed for you:

<template>
  <Container class="max-w-xl">
    <Section>
      <Row>
        <Column>1</Column>
        <Column>2</Column>
      </Row>
    </Section>
  </Container>
</template>

You can opt out of Outlook fallback markup with :outlook-fallback="false" on any of these (cascades to nested components).

Content

<Heading>
<Text>
<Link>
<Button>
<Img>
<Font>
<Preheader>
<Markdown>
<CodeBlock> and <CodeInline>
<QrCode>

Conditional / utility

<Outlook> and <NotOutlook>
<NoWidows>
<OutlookBg>
<Vml>
<WithUrl>
<Raw>

Plaintext

Dedicated plaintext components, plus usePlaintext(options) composable for per-template configuration.

Composables

Available inside any <script setup>:

defineConfig()
useDoctype()
usePlaintext()
usePreheader()
useBaseUrl() — set url.base per template
useUrlQuery() — set url.query per template
useTransformers() — toggle the transformer pipeline per template (booleans or granular object)
useCurrentTemplate()
useEvent() — register events from inside .vue and .md templates

Dev UI

Completely revamped local dev experience.

Test emails

A Test tab at the bottom of the UI sends actual test emails via Nodemailer. Configure server.email, or leave it unset to fall back to Ethereal for preview links.

Checks (Compatibility + Linter)

Compatibility and linter unified into a single Checks tab. Define which clients to check against, or disable entirely:

export default defineConfig({
  server: {
    checks: {
      clients: ['outlook', 'gmail'],
    },
  },
})

Jump-to-editor 🔥

Click any error/warning to open the component or template in your default editor, cursor at the exact line.

Dark mode emulator

Toggle from the command dialog to approximate how email clients auto-invert your colors.

Command palette

Ctrl/Cmd + K (or /) to open
Email search matches parent directory names (app/welcome → ap w)
Order-independent token search (welcome app == app welcome)
Result count in footer
Quick links to docs, Can I Email, copy code, etc.

Device viewport

Width × height indicators are number inputs — type or scroll to change values. Click × to reset.

QR code

maizzle serve --host prints a QR code for the network URL, scan from your phone instantly.

Misc

Auto-imports new components added while the dev server is running
Source previews prefetched in the background (instant tab switching)
Custom scrollbars, polished resizables, touch drag support, mobile menu

Configuration

CSS

css.inline defaults to true
css.purge defaults to true
css.shorthand defaults to true
html.format defaults to true
<style raw> skips Tailwind/Lightning CSS compilation
<style embed> skips inlining

Build API

The programmatic build() API now takes config directly:

await build({ css: { inline: true } })
await build('./my.config.ts')
await build() // loads maizzle.config.ts from cwd

Markdown layouts

.md templates are wrapped in a built-in MarkdownLayout automatically. Choose a different layout via frontmatter:

---
layout: Layout
title: Welcome
---

# Hello!

Set layout: false to opt out.

Other

maizzle prepare postinstall script generates .maizzle/*.d.ts so your editor knows about composables and components before the dev server starts
vue.plugins accepts a factory form
Liquid-like filters via attributes
Auto self-closing tags (<br> → <br /> based on doctype)
Six-hex color transformer (#fff → #ffffff)
AMP4Email support

AI / Skills

Bundled Maizzle skill for LLMs, plus:

Skill for converting React Email components to Maizzle
Skill for converting MJML to Maizzle
V5 → V6 migration reference

Requirements

Maizzle 6 requires Node.js 22+

Full diff: v5.5.0...v6.0.0

socket-security · 2026-04-06T17:58:52Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality
	class-variance-authority@0.7.1
	@types/postcss-safe-parser@5.0.4
	happy-dom@20.10.1
	@types/nodemailer@8.0.0
	@vueuse/core@14.3.0
	@maizzle/tailwindcss@1.5.5
	shiki@4.2.0
	@types/culori@4.0.1
	tinyglobby@0.2.15 ⏵ 0.2.17	⁺¹
	markdown-exit@1.1.0-beta.2
	vitest@3.2.4 ⏵ 4.1.8	⁺¹	⁺⁷⁵	⁺¹
	@vitest/coverage-v8@3.2.4 ⏵ 4.1.8	⁺¹		⁺⁸
	clsx@2.1.1
	@lucide/vue@1.17.0
	@types/node@25.9.1
	domhandler@4.3.1 ⏵ 6.0.1			^-3
	culori@4.0.2
	htmlparser2@7.2.0 ⏵ 12.0.0	⁺¹		⁺¹
	postcss@8.5.8 ⏵ 8.5.15	⁺¹	⁺²
	uqr@0.1.3
	vite@7.3.0 ⏵ 7.3.5	⁺¹	⁺²³	⁺¹
	defu@6.1.6 ⏵ 6.1.7
	css-select@7.0.0
	ora@8.2.0 ⏵ 9.4.0	⁺¹		⁺¹
	dom-serializer@1.4.1 ⏵ 3.1.1	⁺¹		⁺¹
	tailwind-merge@3.6.0
	tw-animate-css@1.4.0
	postcss-merge-longhand@7.0.5 ⏵ 7.0.7
	unplugin-auto-import@21.0.0
	jiti@1.21.7 ⏵ 2.7.0	⁺¹		⁺¹
	query-string@9.3.1 ⏵ 9.4.0	⁺¹		⁺¹
	tsdown@0.22.2
	oxfmt@0.35.0
See 15 more rows in the dashboard

View full report

too many issues with remote content, just use your os' screenshotting functionality...

use caniemail data directly, drop outdated caniemail package, improve signal to noise in results

data-embed also still works

use <style raw> to have the contents skip our tailwind pipeline

choose which clients or completely turn it off

rough approximation of how email clients auto-invert colors for their "dark mode"

ctrl+b was firing twice, so there was no value changed in fact

derive mso width from tailwind utilities or inline css

make it also work with just tailwind utilities or inline css width on wrappers

`let counter = 0` in `<script setup>` is compiled into the component's setup function, so it reset on every instance. Container/Section/Column/Overlap all minted `c1`/`s1`/`co1`/`o1` for every render, causing marker IDs to collide. Two `<Container>`s on a page resolved to the same MSO width, etc. Move the counter into a shared `nextId(prefix)` helper in utils.ts where it lives at true module scope.

Co-authored-by: Copilot <copilot@github.com>

cossssmin changed the title ~~feat: add tailwindcss v4 support~~ feat: maizzle 6 Apr 4, 2026

cossssmin and others added 28 commits April 23, 2026 13:06

revert: screenshot feature

5c4fee7

too many issues with remote content, just use your os' screenshotting functionality...

refactor: mobile menu dev ui

045376d

fix: touch drag for bottom panel resizing

0f4b538

refactor: compatibility checker

0ee7454

use caniemail data directly, drop outdated caniemail package, improve signal to noise in results

fix: compatibility check for style in body

bd13d61

feat: support disabling auto-added attributes with boolean

17893e6

refactor: merge compatibility and linter into checks

4031c0f

feat: link media query warnings to first offending line found

034c9c4

feat: support embed attribute on style blocks

0394b8f

data-embed also still works

feat: raw attribute to skip tailwind compilation

fb805b3

use <style raw> to have the contents skip our tailwind pipeline

feat: customize checks

51d6cad

choose which clients or completely turn it off

refactor: replace picomatch with node built-in

225b026

6.0.0-rc.13

49645dc

fix: copying code to clipboard

c9c3499

feat: emulate dark mode

2f13db7

rough approximation of how email clients auto-invert colors for their "dark mode"

fix: toggle sidebar keybinding

7179f83

ctrl+b was firing twice, so there was no value changed in fact

refactor: move emulator to command dialog

b80df96

fix: merge component classes with user provided ones

a085927

feat: add font component

c636c41

fix(font): emit plain font utility when tailwind import is missing

34ddca9

fix: add alt attribute to button component images

1fa4623

refactor: container component

d362b54

derive mso width from tailwind utilities or inline css

refactor: section component

231fdf3

derive mso width from tailwind utilities or inline css

refactor: layout components width calculations

6bd56c7

make it also work with just tailwind utilities or inline css width on wrappers

6.0.0-rc.14

cbf0f09

feat: add double head hack to Layout component

395fe46

Co-authored-by: Copilot <copilot@github.com>

test: add tests for Layout component

0a47152

cossssmin added 29 commits June 4, 2026 15:36

test: cover markdownExtract src and guard paths

530e21d

test: cover base transformer edge cases, drop redundant guards

6b829be

test: complete coverage for msoPlaceholders

5a7c4d5

test: add coverage for tailwindComponent transformer

8516ae4

test: full coverage for cssBox utils

f5d529f

test: complete coverage for tailwindcss transformer

e8e1eaf

test: cover omitted-value rule in removeAttributes

d80215e

test: cover detached link in inlineLink, drop dead guard

92015c4

test: expand coverage for columnWidth transformer

5397760

test: cover juice-failure and codeBlocks paths in inlineCss

750e942

test: full branch coverage for runTransformers pipeline

0326bdd

test: cover render() invalid-input guards

d8a678d

test: cover renderer fonts, markdown, and invalidation paths

e63aaa0

test: cover codeBlockExtract and fill markdownExtract guards

e21b29b

test: cover empty-style and embed paths in purgeCss

0a3d380

test: cover build config and static-copy branches

cf6f573

test: cover doctype context and boolean attrs in Html

830fcc1

test: cover vnode edge cases in NoWidows

dc0f1e5

test: expand Row coverage for counting, width, and warnings

e990401

test: expand WithUrl coverage for srcset, params, and edge cases

8c9f411

test: cover component sources and config file loading

d481ad0

chore: update juice to stable v12

058b8ad

chore: update markdown-exit dependency

dac6269

chore: update unplugin-vue-components

e1114dc

fix: drop .ts extension from useConfig import in Markdown

e365de1

chore: update unplugin-vue-markdown

02b1bf9

chore: update tailwindcss

10e7a1c

fix: normalize code-block wrapper and preserve whitespace !important

c00b529

6.0.0-rc.25

71c77b0

cossssmin merged commit f6f5f6c into master Jun 4, 2026
7 checks passed

Navigation Menu

Uh oh!

feat: maizzle 6 - #1708

feat: maizzle 6#1708
cossssmin merged 460 commits into
masterfrom
next

cossssmin commented Apr 4, 2026 •

edited

Loading

Uh oh!

socket-security Bot commented Apr 6, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

cossssmin commented Apr 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Maizzle 6

Highlights

Getting started

Laravel

Components

Skeleton

Layout

Content

Conditional / utility

Plaintext

Composables

Dev UI

Test emails

Checks (Compatibility + Linter)

Jump-to-editor 🔥

Dark mode emulator

Command palette

Device viewport

QR code

Misc

Configuration

CSS

Build API

Markdown layouts

Other

AI / Skills

Requirements

Uh oh!

socket-security Bot commented Apr 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

cossssmin commented Apr 4, 2026 •

edited

Loading

socket-security Bot commented Apr 6, 2026 •

edited

Loading