### Create New Maizzle Project (Interactive)

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/cli.md

Launches an interactive wizard to guide you through creating a new Maizzle project, including choosing a directory, starter template, and installing dependencies.

```bash
npx maizzle new
```

--------------------------------

### Create New Project with Default Starter and Install

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/cli.md

Uses the default Maizzle starter to create a project in the 'my-emails' directory and automatically installs dependencies.

```bash
npx maizzle new maizzle/maizzle my-emails --install
```

--------------------------------

### Install Postmark and Maizzle

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/deploy/postmark.md

Install the necessary packages for using Postmark with Maizzle.

```bash
npm install postmark @maizzle/framework
```

--------------------------------

### Start Dev Server with Custom Config

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/development/local.md

Use the -c or --config flag to specify a custom configuration file when starting the dev server.

```bash
npx maizzle serve -c maizzle.staging.ts
```

--------------------------------

### Start the Maizzle Development Server

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/installation/index.md

After scaffolding a project, navigate to the project directory and run this command to start the development server.

```bash
cd project-name
npx maizzle serve
```

--------------------------------

### Full Build Example - JavaScript

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/api/utilities.md

A comprehensive example demonstrating how to configure content paths, output directory, and minification. It also shows how to access the list of generated files and the final configuration object.

```javascript
import { build } from '@maizzle/framework'

const { files, config } = await build({
  content: ['src/emails/**/*.vue'],
  output: { path: 'dist' },
  minify: true,
})

console.log(`Built ${files.length} templates to ${config.output.path}`)

```

--------------------------------

### Install Resend and Maizzle Dependencies

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/deploy/resend.md

Install the necessary packages for using Resend with Maizzle.

```bash
npm install resend @maizzle/framework
```

--------------------------------

### Start Development Server

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/cli.md

Starts the Maizzle development server, which includes live preview and Hot Module Replacement (HMR) for rapid development.

```bash
npx maizzle serve
```

--------------------------------

### Install SendGrid and Maizzle Packages

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/deploy/sendgrid.md

Install the SendGrid mail client and the Maizzle framework using npm.

```bash
npm install @sendgrid/mail @maizzle/framework
```

--------------------------------

### Start Maizzle Development Server with Qwik

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/installation/frameworks/qwik.md

Run this command to start the development server. Maizzle's dev server runs alongside Qwik's, providing live previews for email templates.

```bash
npm run start

```

--------------------------------

### Start Development Server with Network Exposure

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/cli.md

Starts the Maizzle development server and exposes it on the local network, enabling access from other devices via a QR code.

```bash
npx maizzle serve --host
```

--------------------------------

### Install Maizzle Framework

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/installation/frameworks/laravel.md

Install the Maizzle framework package using npm.

```bash
npm install @maizzle/framework
```

--------------------------------

### Use useFont Composable in Script Setup

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/components/font.md

Alternatively, use the `useFont` composable directly within `<script setup>` to load fonts programmatically. This example loads Roboto with weights 400 and 600.

```vue
<script setup>
  useFont({ family: 'Roboto', weights: [400, 600] })
</script>
```

--------------------------------

### Install AWS SDK and Maizzle Framework

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/deploy/aws-ses.md

Install the necessary packages for sending emails with AWS SES and Maizzle.

```bash
npm install @aws-sdk/client-sesv2 @maizzle/framework
```

--------------------------------

### Start Maizzle Dev Server

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/installation/frameworks/nextjs.md

Run this command from the `emails/` directory to start the Maizzle dev server for live preview and HMR. It runs on its own port and can be used alongside `next dev`.

```bash
npx maizzle dev
```

--------------------------------

### Install Nodemailer and Maizzle Framework

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/deploy/nodemailer.md

Install the necessary packages for sending emails with Nodemailer and Maizzle.

```bash
npm install nodemailer @maizzle/framework
```

--------------------------------

### Replace Fetch Tag with Script Setup

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/upgrade-guide.md

The PostHTML `<fetch>` tag is removed. Use `fetch()` or an HTTP client within `<script setup>` and bind the result.

```vue
<script setup>
  const items = await fetch('https://api.example.com/news').then(r => r.json())
</script>

<template>
  <Layout>
    <Container>
      <Text v-for="item in items" :key="item.id">{{ item.title }}</Text>
    </Container>
  </Layout>
</template>
```

--------------------------------

### Install and Run Maizzle in Monorepo

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/installation/monorepo.md

Commands to install dependencies from the monorepo root and run Maizzle development server from a workspace.

```bash
# From monorepo root
npm install

# From the workspace
cd packages/emails
npm run dev
```

--------------------------------

### Install Astro Node Adapter

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/installation/frameworks/astro.md

Install the Node.js adapter for Astro to enable server-side rendering of API routes. This is necessary for dynamic email rendering.

```bash
npm install @astrojs/node

```

--------------------------------

### Start Development Server on Custom Port

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/cli.md

Starts the Maizzle development server on a specified port, allowing you to run multiple instances or avoid conflicts.

```bash
npx maizzle serve --port 4000
```

--------------------------------

### Install Mailgun Dependencies

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/deploy/mailgun.md

Install the Mailgun.js SDK, form-data, and the Maizzle framework using npm.

```bash
npm install mailgun.js form-data @maizzle/framework
```

--------------------------------

### Start Laravel Development Server

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/installation/frameworks/laravel.md

Run the Laravel development server using composer.

```bash
composer dev
```

--------------------------------

### Scaffold a New Maizzle Project with Arguments

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/installation/index.md

Quickly scaffold a Maizzle project by providing the project name and optionally including the `--install` flag to automatically install dependencies.

```bash
npx maizzle new maizzle/maizzle project-name --install
```

--------------------------------

### Install vue-i18n

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/development/i18n.md

Install the vue-i18n package to add internationalization capabilities to your project.

```bash
npm install vue-i18n
```

--------------------------------

### Create New Project with Custom GitHub Starter

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/cli.md

Creates a new Maizzle project using a custom GitHub repository as the starter template, without installing dependencies.

```bash
npx maizzle new user/repo my-emails
```

--------------------------------

### Scaffold a New Maizzle Project

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/installation/manual.md

Use these commands to create a new project directory, navigate into it, initialize a package.json, and install the Maizzle framework.

```bash
mkdir project-name
cd project-name
npm init -y
npm install @maizzle/framework
```

--------------------------------

### Start Maizzle Development Server with AdonisJS

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/installation/frameworks/adonisjs.md

Run `npm run dev` to start Maizzle's development server alongside your AdonisJS application. Maizzle provides email previews on a separate port.

```bash
npm run dev
```

--------------------------------

### Render Email Template in Qwik City API Route (GET)

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/installation/frameworks/qwik.md

An example Qwik City API route that renders a specific email template file (`welcome.vue`) on demand using Maizzle's `render` function. It returns the compiled HTML.

```tsx
import type { RequestHandler } from '@builder.io/qwik-city'
import { resolve } from 'node:path'
import { render } from '@maizzle/framework'

export const onGet: RequestHandler = async ({ json }) => {
  const { html } = await render(resolve('src/emails/welcome.vue'))

  json(200, { html })
}

```

--------------------------------

### useHead() Example

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/api/composables.md

Demonstrates basic usage of useHead() to set the title and meta tags for an email template.

```vue
<script setup>
  useHead({
    title: 'Order Confirmation',
    meta: [
      { name: 'format-detection', content: 'telephone=no' },
    ],
  })
</script>

<template>
  <Layout>
    <Container>
      <Text>Your order has been confirmed.</Text>
    </Container>
  </Layout>
</template>
```

--------------------------------

### WithUrl Base Prop Example

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/components/withurl.md

Demonstrates the usage of the `base` prop to prepend a base URL to image sources.

```vue
<template>
  <WithUrl base="https://cdn.example.com/images">
    <Img src="hero.jpg" alt="Hero" width="600" />
  </WithUrl>
</template>
```

--------------------------------

### Markdown Template with `<script setup>`

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/development/templates.md

Markdown templates support a `<script setup>` block for defining bindings and using composables. These bindings are available via interpolation in the markdown body.

```vue
<script setup>
  usePreheader('Your order has shipped')

  const items = [
    { name: 'Widget', price: '$9.99' },
    { name: 'Gadget', price: '$14.99' },
  ]
</script>

# Your Order

<div v-for="item in items" :key="item.name">
  {{ item.name }} — {{ item.price }}
</div>
```

--------------------------------

### Attribute to Style Example

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/transformers/attribute-to-style.md

Demonstrates how attributes like width and bgcolor are converted to inline styles.

```html
<td width="600" bgcolor="#ffffff">

```

```html
<td width="600" bgcolor="#ffffff" style="width: 600px; background-color: #ffffff">

```

--------------------------------

### Install Maizzle Nuxt Module

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/installation/frameworks/nuxt.md

Install the official Maizzle module for Nuxt as a development dependency.

```bash
npm install -D @maizzle/nuxt
```

--------------------------------

### Using Logic in Templates

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/development/templates.md

Add a `<script setup>` block to use logic or per-template configuration. You have full access to Vue's Composition API.

```vue
<script setup>
  const items = [
    { name: 'Widget', price: '$9.99' },
    { name: 'Gadget', price: '$14.99' },
  ]
</script>

<template>
  <Html>
    <Head />
    <Body>
      <Tailwind>
        <Container>
          <Heading level="2" class="text-2xl">Your Order</Heading>
          <div v-for="item in items" :key="item.name">
            <Text>{{ item.name }} — {{ item.price }}</Text>
          </div>
        </Container>
      </Tailwind>
    </Body>
  </Html>
</template>
```

--------------------------------

### Install Maizzle Skill with skills.sh

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/skill.md

Install the Maizzle skill into your agent's skills directory for automatic loading using the skills.sh utility. This command is compatible with various AI agents that support the Agent Skills specification.

```bash
npx skills add maizzle/framework
```

--------------------------------

### Start Maizzle Dev Server

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/api/utilities.md

Starts the Maizzle dev server programmatically. The server includes a dev UI and an SSR renderer. It defaults to port 3000 but can be configured.

```typescript
import { serve } from '@maizzle/framework'

const server = await serve()
```

--------------------------------

### SvelteKit Project Structure for Emails

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/installation/frameworks/sveltekit.md

Example project structure showing where to place email templates and related configuration files within a SvelteKit application.

```treeview
[your-sveltekit-app] {
├── src/
│   ├── emails/
│   │   ├── welcome.vue
│   │   └── tsconfig.json
│   ├── routes/
│   └── app.html
├── svelte.config.js
├── vite.config.ts
├── tsconfig.json
└── package.json
}
```

--------------------------------

### Add Scripts to package.json

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/installation/manual.md

Add 'dev' and 'build' scripts to your package.json to easily start the development server or build your emails for production.

```json
{
  "type": "module",
  "scripts": {
    "dev": "maizzle serve",
    "build": "maizzle build"
  }
}
```

--------------------------------

### WithUrl Parameters Prop Example

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/components/withurl.md

Demonstrates the usage of the `parameters` prop to append query parameters to a button's href attribute.

```vue
<template>
  <WithUrl parameters="utm_source=email&utm_medium=newsletter">
    <Button href="https://example.com">Click here</Button>
  </WithUrl>
</template>
```

--------------------------------

### Nuxt 4 Project Structure for Emails

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/installation/frameworks/nuxt.md

Example project structure for Nuxt 4, showing the location of email templates within the `app/emails/` directory.

```bash
your-nuxt-app/
├── app/
│   └── emails/
│       ├── welcome.vue
│       └── tsconfig.json
├── nuxt.config.ts
├── tsconfig.json
└── package.json
```

--------------------------------

### Nuxt 3 Project Structure for Emails

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/installation/frameworks/nuxt.md

Example project structure for Nuxt 3, showing the location of email templates within the root `emails/` directory.

```bash
your-nuxt-app/
├── emails/
│   ├── welcome.vue
│   └── tsconfig.json
├── nuxt.config.ts
├── tsconfig.json
└── package.json
```

--------------------------------

### CodeBlock with CSS Example

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/components/codeblock.md

Demonstrates using the CodeBlock component for CSS code. The `language` prop should be set to 'css' for correct syntax highlighting.

```vue
<template>
  <CodeBlock language="css">
    .button {
      background-color: #4338ca;
      color: white;
    }
  </CodeBlock>
</template>
```

--------------------------------

### Maizzle 6 Markdown Template

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/upgrade-guide.md

Example of a Markdown template in Maizzle 6, which supports frontmatter and `<script setup>` for dynamic content and configuration.

```md
---
title: Product Update
---

<script setup>
  usePreheader('We shipped some new features')
</script>

# Hello

Some **markdown** content with a Vue component:

<Button href="https://example.com">Read more</Button>
```

--------------------------------

### Basic Column Usage

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/components/column.md

Demonstrates how to use the Column component within a Row and Layout. This example shows two columns side-by-side.

```vue
<template>
  <Layout>
    <Container class="max-w-xl">
      <Row>
        <Column>
          <Text>Left column</Text>
        </Column>
        <Column>
          <Text>Right column</Text>
        </Column>
      </Row>
    </Container>
  </Layout>
</template>
```

```html
<!DOCTYPE html>
<html lang="en" dir="ltr" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head>
    <!-- ... -->
  </head>
  <body xml:lang="en" style="margin: 0; width: 100%; height: 100%; padding: 0; word-break: break-word;">
    <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><![endif]-->
    <div style="margin: 0 auto; max-width: 576px;">
      <!--[if mso]><table role="none" cellpadding="0" cellspacing="0" style="width: 100%"><tr><![endif]-->
      <div style="font-size: 0;">
        <!--[if mso]><td style="width: 288px; vertical-align: top"><![endif]-->
        <div style="width: 288px; max-width: 100%; display: inline-block; vertical-align: top; font-size: medium">
          <p style="margin: 16px 0; font-size: 16px; line-height: 24px;">
            Left column
          </p>
        </div>
        <!--[if mso]></td><![endif]-->
        <!--[if mso]><td style="width: 288px; vertical-align: top"><![endif]-->
        <div style="width: 288px; max-width: 100%; display: inline-block; vertical-align: top; font-size: medium">
          <p style="margin: 16px 0; font-size: 16px; line-height: 24px;">
            Right column
          </p>
        </div>
        <!--[if mso]></td><![endif]-->
      </div>
      <!--[if mso]></tr></table><![endif]-->
    </div>
    <!--[if mso]></td></tr></table><![endif]-->
  </div>
  </body>
</html>
```

--------------------------------

### Configure Attribute Removal in Maizzle

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/transformers/remove-attributes.md

Specify attributes to remove in your `maizzle.config.ts` file. This example shows removing `data-test` and class attributes starting with `js-`.

```typescript
export default defineConfig({
  html: {
    attributes: {
      remove: [
        'data-test',
        { name: 'class', value: /^js-/ },
      ],
    },
  },
})
```

--------------------------------

### Create a Basic Email Template

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/installation/manual.md

Add a simple Vue template file in the 'emails' directory to start designing your emails with Maizzle.

```vue
<template>
  <Html>
    <Head />
    <Body>
      <Tailwind>
        <Container class="bg-gray-100">
          <Text class="text-lg text-gray-800">
            Hello!
          </Text>
        </Container>
      </Tailwind>
    </Body>
  </Html>
</template>
```

--------------------------------

### Basic Preheader Usage

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/components/preheader.md

Demonstrates how to use the Preheader component to add preview text to an email. The content is rendered at the start of the body.

```vue
<template>
  <Layout>
    <Preheader>Check out our latest deals — up to 50% off everything.</Preheader> 

    <Container>
      <Text>Email body content.</Text>
    </Container>
  </Layout>
</template>
```

--------------------------------

### Forward Options to string-strip-html with usePlaintext()

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/api/composables.md

Pass options directly to the underlying `string-strip-html` library via the `options` argument in `usePlaintext()`. This example ignores `<br>` tags.

```vue
<script setup>
  usePlaintext({
    options: {
      ignoreTags: ['br'],
    },
  })
</script>
```

--------------------------------

### Per-Template Configuration Override

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/development/configuration.md

Override global configuration settings on a per-template basis using `defineConfig()` within a `<script setup>` block. This example disables CSS inlining for a specific template.

```vue
<script setup>
  defineConfig({
    css: {
      inline: false, // disable CSS inlining for this template
    },
  })
</script>

<template>
  <!-- template content -->
</template>
```

--------------------------------

### Send Emails with Nodemailer via SMTP in TanStack API Route

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/installation/frameworks/tanstack.md

Send emails using Nodemailer with SMTP in a TanStack Start API route. This example renders a welcome email and sends it to a specified recipient.

```typescript
import { createFileRoute } from '@tanstack/react-router'
import { resolve } from 'node:path'
import { render } from '@maizzle/framework'
import { createTransport } from 'nodemailer'

const transporter = createTransport({
  host: 'smtp.example.com',
  port: 587,
  auth: {
    user: process.env.SMTP_USER,
    pass: process.env.SMTP_PASS,
  },
})

export const Route = createFileRoute('/api/send')({
  server: {
    handlers: {
      POST: async ({ request }) => {
        const { to } = await request.json()

        const { html } = await render(resolve('src/emails/welcome.vue'))

        await transporter.sendMail({
          from: 'no-reply@example.com',
          to,
          subject: 'Welcome!',
          html,
        })

        return Response.json({ success: true })
      },
    },
  },
})
```

--------------------------------

### Get Current Template Info

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/api/composables.md

Use `useCurrentTemplate()` within `<script setup>` to access path information about the template file being built. It returns an object similar to Node's `path.parse()` or `undefined` if called outside the per-template scope.

```vue
<script setup>
  const file = useCurrentTemplate()

  // file.name === 'welcome'
  // file.ext  === '.vue'
  // file.base === 'welcome.vue'
  // file.dir  === '/abs/path/to/emails'
</script>
```

--------------------------------

### Create New Maizzle Project (Arguments)

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/cli.md

Skips the interactive wizard and creates a new Maizzle project by directly providing the starter template and target directory.

```bash
npx maizzle new [starter] [directory]
```

--------------------------------

### serve()

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/api/utilities.md

Starts the Maizzle development server programmatically. This function initializes a Vite dev server with the Maizzle dev UI and an SSR renderer for on-the-fly template compilation. The server defaults to port 3000, but this can be configured.

```APIDOC
## serve()

### Description
Start the Maizzle dev server programmatically.

### Method Signature
`serve(options?: ServeOptions): Promise<ViteDevServer>`

### Options
#### config
Type: `Partial<MaizzleConfig> | string`
Description: Pass a config object to merge with the resolved config, or a string path to a config file.

#### host
Type: `boolean | string`
Default: `false`
Description: Expose the server on the network. Pass `true` to listen on all addresses, or a specific address string.

#### silent
Type: `boolean`
Default: `false`
Description: Suppress the startup banner output.

### Return Value
Returns a `Promise<ViteDevServer>` — the underlying Vite dev server instance. This instance can be used to programmatically close the server or access its internals.
```

--------------------------------

### Start Astro Development Server

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/installation/frameworks/astro.md

Run the development server to preview your Astro site and Maizzle email templates. Changes to templates are reflected automatically in the Maizzle preview UI.

```bash
npm run dev

```

--------------------------------

### Render Template and Write to Disk

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/api/utilities.md

This example demonstrates how to render an email template and then asynchronously write the resulting HTML to a file using Node.js's `fs/promises` module.

```javascript
import { render } from '@maizzle/framework'
import { writeFile } from 'node:fs/promises'

const { html } = await render('emails/welcome.vue')

await writeFile('dist/welcome.html', html)
```

--------------------------------

### Custom Layout Component Example

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/development/templates.md

A custom layout component can consume frontmatter data via props. This example defines a `frontmatter` prop and uses it to set the `aria-label` and `h1` content.

```vue
<script setup>
const props = defineProps({
  frontmatter: { type: Object, default: () => ({}) },
})
</script>

<template>
  <Layout :aria-label="props.frontmatter.title">
    <h1>{{ props.frontmatter.title }}</h1>
    <slot />
  </Layout>
</template>
```

--------------------------------

### Expose Dev Server on Local Network

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/development/local.md

Use the --host flag to make the dev server accessible on your local network. You can also provide an explicit address like 0.0.0.0.

```bash
npx maizzle serve --host
```

```bash
npx maizzle serve --host 0.0.0.0
```

--------------------------------

### Create a Markdown Component

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/components/overview.md

Define a component using a `.md` file in the `components` directory. Maizzle auto-registers it, allowing you to use it like a Vue component. This example shows a basic promotional component.

```md
## Big Sale

Get **50% off** your first order this weekend only.

<Button href="https://example.com">Shop now</Button>
```

--------------------------------

### Maizzle Object-Based Styles

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/migrate/react-email.md

Example of using object-based styles in Maizzle with Vue syntax.

```vue
<Button
  href="https://example.com"
  :style="{
    backgroundColor: '#2563eb',
    color: '#ffffff',
    padding: '12px 20px',
    borderRadius: '6px'
  }">
  Verify email
</Button>
```

--------------------------------

### CodeInline with Theme Only

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/components/codeinline.md

Demonstrates applying a Shiki theme to inline code without specifying a language. This example uses the `theme` prop to style the code, but syntax highlighting for a specific language is not enabled.

```vue
<template>
  <CodeInline theme="github-dark">npm install</CodeInline>
</template>
```

--------------------------------

### Maizzle Tailwind CSS Classes

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/migrate/react-email.md

Example of using Tailwind CSS classes in Maizzle components for styling.

```vue
<Button
    href="https://example.com"
    class="bg-blue-600 text-white px-5 py-3 rounded-md">
    Verify email
  </Button>
```

--------------------------------

### React Email Inline Styles

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/migrate/react-email.md

Example of using inline style objects in React Email components.

```tsx
<Button
    href="https://example.com"
    style={{
      backgroundColor: '#2563eb',
      color: '#ffffff',
      padding: '12px 20px',
      borderRadius: '6px',
    }}>
    Verify email
  </Button>
```

--------------------------------

### build()

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/api/utilities.md

Build all email templates to HTML files, programmatically. This resolves your config, globs templates from the configured `content` paths, compiles each one through the full rendering pipeline, and writes the output to disk. Events like `beforeRender`, `afterRender`, and `afterBuild` are fired at the appropriate stages.

```APIDOC
## build()

### Description
Build all email templates to HTML files, programmatically. This resolves your config, globs templates from the configured `content` paths, compiles each one through the full rendering pipeline, and writes the output to disk. Events like `beforeRender`, `afterRender`, and `afterBuild` are fired at the appropriate stages.

### Parameters
#### Config input
Type: `Partial<MaizzleConfig> | string | undefined`
Pass a config object to merge with the resolved config, a string path to a config file, or omit to load `maizzle.config` from the working directory.

**Config object** — merged with the resolved config:
```ts
const { files } = await build({
  output: { path: 'build_production' },
})
```

**Path to config file** — loads config from a specific file:
```ts
const { files } = await build('./maizzle.production.ts')
```

**No argument** — loads the default `maizzle.config.ts` from the working directory:
```ts
const { files } = await build()
```

### Return value
A `Promise` that resolves to:
- `files` (`string[]`) — array of file paths that were written to disk
- `config` (`MaizzleConfig`) — the fully resolved config object that was used for the build

### Example
```ts
import { build } from '@maizzle/framework'

const { files, config } = await build({
  content: ['src/emails/**/*.vue'],
  output: { path: 'dist' },
  minify: true,
})

console.log(`Built ${files.length} templates to ${config.output.path}`)
```
```

--------------------------------

### Example of CSS Inlining

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/transformers/inline-css.md

Demonstrates how a CSS class is transformed into an inline style attribute on an HTML element.

```html
<p class="text-blue-500">Hello</p>
```

```html
<p class="text-blue-500" style="color: #3b82f6;">Hello</p>
```

--------------------------------

### Suppress Startup Banner

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/api/utilities.md

Set the `silent` option to `true` to prevent the startup banner from being displayed when the server starts.

```typescript
const server = await serve({ silent: true })
```

--------------------------------

### Configure CSS Declaration Removal

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/development/configuration.md

Specify CSS declarations to remove based on selectors. For example, remove all declarations from ':root'.

```typescript
export default defineConfig({
  css: {
    removeDeclarations: {
      ':root': '*',
    },
  },
})
```

--------------------------------

### Add Logic and Props to a Markdown Component

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/components/overview.md

Enhance Markdown components by adding a `<script setup>` block at the top. This allows for defining props and using logic within the component.

```md
<script setup>
defineProps({
  discount: { type: Number, default: 50 },
})
</script>

## Big Sale

Get **{{ discount }}% off** your first order this weekend only.

<Button href="https://example.com">Shop now</Button>
```

--------------------------------

### Maizzle 6 Vue Layout Example

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/upgrade-guide.md

Demonstrates using the built-in `<Layout>` component in Maizzle 6 for email structure.

```vue
<template>
  <Layout>
    <Container>
      <Text>Your content here.</Text>
    </Container>
  </Layout>
</template>
```

--------------------------------

### Remove Attribute by Empty Value

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/transformers/remove-attributes.md

Configure Maizzle to remove an attribute only when its value is empty. This example targets `data-src` attributes.

```typescript
export default defineConfig({
  html: {
    attributes: {
      remove: ['data-src'],
    },
  },
})
```

--------------------------------

### useEvent()

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/api/composables.md

Registers event handlers within a template's `<script setup>` block to hook into the build process. You can modify content before rendering, after rendering, or after transformations. This allows for dynamic content injection and custom build logic.

```APIDOC
## useEvent()

Register event handlers from inside a template's `<script setup>` block.

```vue [emails/example.vue]
<script setup>
  useEvent('afterRender', ({ html }) => {
    return html.replace('</body>', '<img src="https://example.com/pixel.gif" width="1" height="1" alt="">
</body>')
  })
</script>

<template>
  <Html>
    <Head />
    <Body>
      <Container>
        <Text>This template gets a tracking pixel.</Text>
      </Container>
    </Body>
  </Html>
</template>
```

### Available events

| Event | When it fires | Receives | Can return |
| --- | --- | --- | --- |
| `beforeCreate` | Before the build starts | `{ config }` | — |
| `beforeRender` | Before each template renders | `{ config, template }` | New `source` string |
| `afterRender` | After Vue, before transformers | `{ config, template, html }` | Modified `html` |
| `afterTransform` | After all transformers | `{ config, template, html }` | Modified `html` |
| `afterBuild` | When the build finishes | `{ files, config }` | — |

`template` is `{ source, path }` — the raw SFC and the result of Node's [`path.parse()`](https://nodejs.org/api/path.html#pathparsepath) (`{ root, dir, base, ext, name }`). To read just the path from anywhere inside an SFC, use [`useCurrentTemplate()`](#usecurrenttemplate). 

Handlers can be sync or async. Where a return value is supported, returning a string replaces the value for subsequent handlers in the chain.

### Execution order

Config handlers run first, then SFC handlers in registration order. If multiple handlers return a value, the result from each handler becomes the input for the next one in the chain.

SFC handlers are automatically cleared between template renders, so they only apply to the template that registered them.

### Examples

Inject content after rendering but before transformers, so it still goes through CSS inlining and purging:

```vue [emails/welcome.vue]
<script setup>
  useEvent('afterRender', ({ html }) => {
    const banner = '<div class="bg-blue-500 text-white p-4 text-center">Limited time offer!</div>'

    return html.replace('<body', `<body>${banner}`)
  })
</script>
```

Add a tracking pixel after all transformers have run:

```vue [emails/newsletter.vue]
<script setup>
  useEvent('afterTransform', ({ html }) => {
    return html.replace(
      '</body>',
      '<img src="https://track.example.com/open.gif" width="1" height="1" alt="">
</body>'
    )
  })
</script>
```

You can also register event handlers globally in your config file — see the [Events](/docs/development/events) page for the full reference.
```

--------------------------------

### Sending Emails with Nodemailer

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/installation/frameworks/adonisjs.md

This example illustrates how to use Maizzle's `render` function with Nodemailer for sending emails directly.

```APIDOC
## Sending Emails with Nodemailer

### Description
This example shows how to integrate Maizzle's `render` function with Nodemailer to send emails directly from an AdonisJS route.

### Method
POST

### Endpoint
/api/send

### Parameters
#### Request Body
- **to** (string) - Required - The recipient's email address.

### Request Example
```json
{
  "to": "recipient@example.com"
}
```

### Code Example
```ts [start/routes.ts]
import { resolve } from 'node:path'
import { render } from '@maizzle/framework'
import { createTransport } from 'nodemailer'
import router from '@adonisjs/core/services/router'

const transporter = createTransport({
  host: 'smtp.example.com',
  port: 587,
  auth: {
    user: process.env.SMTP_USER,
    pass: process.env.SMTP_PASS,
  },
})

router.post('/api/send', async ({ request }) => {
  const { to } = request.only(['to'])
  const { html } = await render(resolve('emails/welcome.vue'))

  await transporter.sendMail({
    from: 'no-reply@example.com',
    to,
    subject: 'Welcome!',
    html,
  })

  return { success: true }
})
```

### Response
#### Success Response (200)
- **success** (boolean) - Indicates if the email sending process was initiated successfully.

#### Response Example
```json
{
  "success": true
}
```
```

--------------------------------

### Expose Server on Network

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/api/utilities.md

Use the `host` option to expose the dev server on the network. Set to `true` to listen on all addresses or provide a specific address string.

```typescript
const server = await serve({ host: true })
```

--------------------------------

### OutlookBg Props Reference

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/components/outlookbg.md

Detailed reference for all available props for the OutlookBg component, including their types, defaults, and usage examples.

```APIDOC
## OutlookBg Component Props

### width

- **Type**: `string | number`
- **Default**: `'600px'`
- **Description**: Width of the VML rectangle.

### height

- **Type**: `string | number`
- **Default**: `null`
- **Description**: Height of the VML rectangle. When not set, the rectangle auto-sizes to fit its content.

### type

- **Type**: `'solid' | 'gradient' | 'gradientradial' | 'tile' | 'pattern' | 'frame'`
- **Default**: `'frame'`
- **Description**: The VML fill type. Use `frame` for background images, `solid` for solid colors, or one of the gradient/pattern types.

### src

- **Type**: `string`
- **Default**: `'https://via.placeholder.com/600x400'`
- **Description**: URL of the background image.

### fillcolor

- **Type**: `string`
- **Default**: `'none'`
- **Description**: Fallback background color shown while the image loads or if it fails.

### color

- **Type**: `string`
- **Default**: `undefined`
- **Description**: Fill color, used with `solid` and `gradient` fill types.

### sizes

- **Type**: `string`
- **Default**: `undefined`
- **Description**: Comma-separated fill image dimensions.

### origin

- **Type**: `string`
- **Default**: `undefined`
- **Description**: Fill origin offset as fractional values. Replicates the CSS `background-position` property.

### position

- **Type**: `string`
- **Default**: `undefined`
- **Description**: Fill position offset as fractional values. Overrides the value set by `backgroundPosition`.

### backgroundPosition

- **Type**: `string`
- **Default**: `undefined`
- **Description**: A convenience prop that maps position names to VML `origin` and `position` values. Format is `vertical,horizontal`. Supported values: `top,left`, `top,center`, `top,right`, `center,left`, `center,center`, `center,right`, `bottom,left`, `bottom,center`, `bottom,right`. Explicit `origin` or `position` props will override the values set by `backgroundPosition`.

### aspect

- **Type**: `'atleast' | 'atmost'`
- **Default**: `undefined`
- **Description**: Aspect ratio constraint for the fill image. Replicates the CSS `background-size` property.

### inset

- **Type**: `string`
- **Default**: `'0,0,0,0'`
- **Description**: `top,right,bottom,left` textbox padding, replicates the CSS padding property.

### stroke

- **Type**: `boolean | string`
- **Default**: `false`
- **Description**: Whether the VML rectangle has a visible border.

### strokecolor

- **Type**: `string`
- **Default**: `undefined`
- **Description**: Border color. Setting this automatically enables `stroke`.

### fill

- **Type**: `boolean | string`
- **Default**: `true`
- **Description**: Whether the VML rectangle has a fill.

### Example Usage for Props:

```vue
<template>
  <!-- Example for width -->
  <OutlookBg width="500">
    <!-- ... -->
  </OutlookBg>

  <!-- Example for height -->
  <OutlookBg height="300">
    <!-- ... -->
  </OutlookBg>

  <!-- Example for type -->
  <OutlookBg type="tile" src="https://example.com/pattern.png">
    <!-- ... -->
  </OutlookBg>

  <!-- Example for src -->
  <OutlookBg src="https://example.com/hero.jpg">
    <!-- ... -->
  </OutlookBg>

  <!-- Example for fillcolor -->
  <OutlookBg fillcolor="#1e3a5f">
    <!-- ... -->
  </OutlookBg>

  <!-- Example for color -->
  <OutlookBg type="solid" color="#4338ca">
    <!-- ... -->
  </OutlookBg>

  <!-- Example for sizes -->
  <OutlookBg sizes="300px,200px">
    <!-- ... -->
  </OutlookBg>

  <!-- Example for origin -->
  <OutlookBg origin="0,0">
    <!-- ... -->
  </OutlookBg>

  <!-- Example for position -->
  <OutlookBg position="0.5,0.5">
    <!-- ... -->
  </OutlookBg>

  <!-- Example for backgroundPosition -->
  <OutlookBg background-position="center,center">
    <!-- ... -->
  </OutlookBg>

  <!-- Example for aspect -->
  <OutlookBg aspect="atleast">
    <!-- ... -->
  </OutlookBg>

  <!-- Example for inset -->
  <OutlookBg inset="10px,20px,10px,20px">
    <!-- ... -->
  </OutlookBg>

  <!-- Example for stroke -->
  <OutlookBg :stroke="true">
    <!-- ... -->
  </OutlookBg>

  <!-- Example for strokecolor -->
  <OutlookBg strokecolor="#000000">
    <!-- ... -->
  </OutlookBg>

  <!-- Example for fill -->
  <OutlookBg :fill="false">
    <!-- ... -->
  </OutlookBg>
</template>
```
```

--------------------------------

### Build with Custom Output Path - JavaScript

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/api/utilities.md

Provide a configuration object to the build function to specify a custom output path for the compiled HTML files.

```javascript
const { files } = await build({
  output: { path: 'build_production' },
})

```

--------------------------------

### Build Astro Project for Production

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/installation/frameworks/astro.md

Compile your Astro project, including Maizzle email templates, into static HTML files. These are output to the configured output path, typically dist/emails.

```bash
npm run build

```

--------------------------------

### Use Tailwind CSS with the <Layout> Component

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/tailwindcss.md

The <Layout> component includes pre-configured Tailwind CSS, simplifying setup for your email templates.

```vue
<template>
  <Layout>
    <Container class="bg-slate-100 p-4">
      <Text class="text-lg text-slate-800">Hello!</Text>
    </Container>
  </Layout>
</template>
```

--------------------------------

### Build Maizzle Email Templates for Production

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/installation/frameworks/laravel.md

Compile email templates to production-ready Blade files using npm build.

```bash
npm run build
```

--------------------------------

### Maizzle 5 HTML Email Template

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/upgrade-guide.md

Example of an email template structure in Maizzle 5 using HTML and PostHTML expressions.

```html
---
title: World
---

<x-main>
  <table align="center" class="m-0 mx-auto">
    <tr>
      <td class="w-[552px] max-w-full">
        <h1 class="text-2xl">Hello, {{ name }}!</h1>
        <x-button
          href="https://maizzle.com"
          class="bg-slate-950 hover:bg-slate-800"
        >
          Get Started
        </x-button>
      </td>
    </tr>
  </table>
</x-main>
```

--------------------------------

### Configure Nodemailer Transport

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/development/local.md

Provide Nodemailer transport options for sending test emails. See 'Custom SMTP' for a full example.

```typescript
export default defineConfig({
  email: {
    transport: {
      host: 'smtp.ethereal.email',
      port: 587,
      secure: false,
      auth: {
        user: 'your-email@ethereal.email',
        pass: 'your-password',
      },
    },
  },
})
```

--------------------------------

### Build Emails with Custom Source Directory and Extension

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/cli.md

Builds email templates from a custom source directory and specifies a custom file extension for the output HTML files.

```bash
npx maizzle build --dir templates --ext blade.php
```

--------------------------------

### Configure Monorepo Workspaces (pnpm-workspace.yaml)

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/installation/monorepo.md

If using pnpm, specify workspace packages in pnpm-workspace.yaml.

```yaml
packages:
  - packages/*
```

--------------------------------

### Inject Content with 'afterRender' Event

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/api/composables.md

An example of using the `afterRender` event to inject content, such as a banner, into the HTML before CSS inlining and purging.

```vue
<script setup>
  useEvent('afterRender', ({ html }) => {
    const banner = '<div class="bg-blue-500 text-white p-4 text-center">Limited time offer!</div>'

    return html.replace('<body', `<body>${banner}`)
  })
</script>
```

--------------------------------

### Configure Astro with Node Adapter and Maizzle Plugin

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/installation/frameworks/astro.md

Set up your Astro configuration file to use the Node adapter and the Maizzle Vite plugin. Ensure the adapter is configured for standalone mode.

```javascript
import { defineConfig } from 'astro/config'
import node from '@astrojs/node' // [!code ++]
import { maizzle } from '@maizzle/framework'

export default defineConfig({
  adapter: node({ mode: 'standalone' }), // [!code ++]
  vite: {
    plugins: [
      maizzle({ /* ... */ }),
    ]
  }
})

```

--------------------------------

### Basic Build - JavaScript

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/api/utilities.md

Import and use the build function to compile email templates. This will use the default maizzle.config.ts from the working directory.

```javascript
import { build } from '@maizzle/framework'

const { files } = await build()

```

--------------------------------

### OutlookBg with Background Position

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/components/outlookbg.md

Shows how to control the background image placement using the `background-position` prop. This example centers the background image.

```vue
<template>
  <OutlookBg
    src="https://example.com/bg.jpg"
    width="600"
    height="300"
    background-position="center,center"
    fillcolor="#1e3a5f"
  >
    <div class="bg-[#1e3a5f] bg-[url('https://example.com/bg.jpg')] bg-cover bg-center bg-no-repeat">
      <Text class="text-white p-12">Centered background.</Text>
    </div>
  </OutlookBg>
</template>
```

--------------------------------

### Scaffold New Layout File

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/cli.md

Scaffolds a new layout file using Maizzle's official `<Layout>` component.

```bash
npx maizzle make:layout [filepath]
```

--------------------------------

### Disable Transformers Per-Template

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/transformers/overview.md

Use the `useTransformers()` composable within a `<script setup>` block to disable all transformers or specific ones for a single template.

```vue
<script setup>
  useTransformers(false)
  // or: useTransformers({ inlineCss: false, purgeCss: false })
</script>
```

--------------------------------

### Build with Specific Config File - JavaScript

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/api/utilities.md

Pass a string path to the build function to load configuration from a specific file, overriding the default maizzle.config.ts.

```javascript
const { files } = await build('./maizzle.production.ts')

```

--------------------------------

### Register Multiple Fonts

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/components/font.md

Register multiple fonts by including multiple `<Font>` components in your template. This example registers 'Inter' and 'JetBrains Mono'.

```vue
<template>
  <Font family="Inter" :weights="[400, 700]" />
  <Font family="JetBrains Mono" :weights="[400]" />
</template>
```

--------------------------------

### Configure Server Port

Source: https://github.com/maizzle/maizzle.com/blob/main/content/docs/api/utilities.md

Pass a configuration object to `serve()` to override default settings, such as the server port. This merges with the resolved Maizzle configuration.

```typescript
const server = await serve({
  config: {
    server: { port: 8080 },
  },
})
```