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

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
	happy-dom@20.9.0
	class-variance-authority@0.7.1
	@types/postcss-safe-parser@5.0.4
	@types/nodemailer@8.0.0
	@vueuse/core@14.3.0
	@maizzle/tailwindcss@1.5.5
	shiki@4.1.0
	markdown-exit@1.0.0-beta.9
	tinyglobby@0.2.15 ⏵ 0.2.16	⁺¹
	vitest@3.2.4 ⏵ 4.1.7	⁺¹		⁺¹
	@vitest/coverage-v8@3.2.4 ⏵ 4.1.7	⁺¹		⁺⁸
	clsx@2.1.1
	@lucide/vue@1.16.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	⁺¹	⁺²
	vite@7.3.0 ⏵ 7.3.3	⁺¹	⁺²³	⁺¹
	uqr@0.1.3
	css-select@7.0.0
	ora@8.2.0 ⏵ 9.4.0	⁺¹		⁺¹
	defu@6.1.6 ⏵ 6.1.7
	tailwind-merge@3.6.0
	postcss-merge-longhand@7.0.5 ⏵ 7.0.7
	jiti@1.21.7 ⏵ 2.7.0	⁺²		⁺¹
	unplugin-auto-import@21.0.0
	tw-animate-css@1.4.0
	dom-serializer@1.4.1 ⏵ 3.1.1			⁺¹
	tsdown@0.22.0
	oxfmt@0.35.0
	@tailwindcss/vite@4.3.0
	typescript@5.9.3
See 13 more rows in the dashboard

View full report

add background-position prop, improve dx

increase coverage

wrap in article div with font size

the default, opinionated maizzle layout

renders a <p> tag with default spacing and typography

correct double inline css font-size order

passthrough all juice options

land classes on article div

normalize with Preheader component

Adds `aspect`, `position`, `size`, and `outlookFallback` props to the Img component. When `aspect` is set (or a Tailwind `aspect-*` class is detected), Img renders a padding-bottom + background-image wrapper with role="img" plus a VML `<v:rect>` for Outlook. `size` maps to VML `aspect` (cover → atleast, contain → atmost).

The post-process pass added a space after every `:` and `;`, which broke URLs in inline style values (`url('https://...')` → `url('https: //...')`) and forced visual consistency with Juice's spaced output that email clients don't care about. Dropped the colon/semicolon rewriting and the trailing-semicolon ensure; kept `preferUnitlessValues` (0px → 0) and gated its walk on the option being enabled.

The Shiki theme background only landed on the `<pre>`, leaving the td's mso-padding-alt-4 area to show through as white in Outlook — visible as a white frame around dark themes.

…ule graphs

…d templates

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

cossssmin added 28 commits April 14, 2026 15:42

refactor: normalize inline css whitespace in components

c701c82

feat: mso-style prop for column component

0d8c3b2

refactor: remove width from row component

80a8ea6

fix: nesting rows and columns

bb1215c

refactor: test tab ux

519bb21

feat: add info tooltip to html size stat

4503210

fix: xmlns prop on html component

9c18e4c

feat: support double head hack in component

5feb36a

refactor: provide/inject with types for lang in html and body components

4fc16b8

refactor: do not wrap markdown component by default

d63fd81

refactor: vml component

a352cdc

add background-position prop, improve dx

test: update tests

3594523

increase coverage

feat: jsdoc for component props

63592fe

fix: ensure source preview is full height

c4f87f7

refactor: body component

f72c63f

wrap in article div with font size

fix: make href mandatory in button component

9d2680e

feat: layout component

d16f992

the default, opinionated maizzle layout

feat: text component

7fcb507

renders a <p> tag with default spacing and typography

refactor: layout component

06a7f6d

correct double inline css font-size order

refactor: css inliner

2a650e7

passthrough all juice options

refactor: layout component

9dc9769

land classes on article div

feat: as prop for text component

aaaa5bb

feat: heading component

15a3efc

fix: no margins for text as span

448a69e

feat: link component

95ac3a2

6.0.0-rc.8

0544ac0

feat: support passing vite and vue configs

d394ee3

fix: watching glob paths

fe5a30f

cossssmin added 30 commits May 13, 2026 20:01

feat: use shiki for CodeInline

a9cd215

feat(codeinline): opt-in shiki highlighting via theme prop

23a15c7

test: add useCurrentTemplate tests

69be2ca

chore: add height css on body component

1f89604

fix: usePreheader output

df6ce90

normalize with Preheader component

fix(serializer): re-encode < and > in text nodes

7c15f46

docs(skills): sync COMPONENTS reference with current props

34bf8d5

docs(skills): sync usePreheader options with current API

9af9187

docs(skills): tighten references, add missing composables

1418983

docs(skills): add v5 → v6 migration reference

35325a2

fix(code-block): apply shiki theme bg to wrapping td

0c21898

The Shiki theme background only landed on the `<pre>`, leaving the td's mso-padding-alt-4 area to show through as white in Outlook — visible as a white frame around dark themes.

docs(skills): document Img cropped mode

640523e

6.0.0-rc.22

9a29c9b

feat(img): add alt to VML rect in cropped mode

0582a48

feat: add support for amp4email

e86ffd7

feat(img): add href prop with VML rect href and anchor wrapping

89cf98e

fix: preserve yahoo: variant CSS and dedupe component class binding

3312648

fix(useCurrentTemplate): make composable work in serve and across mod…

3b45f6e

…ule graphs

feat: vml component

6d5c2a4

chore(deps): replace deprecated lucide-vue-next with @lucide/vue

a284359

chore: remove unused @types/js-beautify

b79e45a

fix(dev-ui): drop postcss-safe-parser from browser bundle

e994431

feat(dev-ui): harmonize icon stroke/opacity, add Markdown icon for .m…

d13d345

…d templates

fix(dev-ui): reflect actual file extension in page title

72fd9bd

style: convert multi-line // comments to /** */ blocks

6309bf7

chore: update dependencies

886672d

build(deps): use juice@next

ad9d931

6.0.0-rc.23

97306d0

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: maizzle 6#1708

feat: maizzle 6#1708
cossssmin wants to merge 392 commits into
masterfrom
next

cossssmin commented Apr 4, 2026 •

edited

Loading

Uh oh!

socket-security Bot commented Apr 6, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

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!

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