mailpeek

KO | EN

gitlite — search

#javascript #python #react #typescript #llm #golang #android #machine-learning #linux #nodejs #java #cli #pytorch #openai

(★ 28)

Build, test, and preview responsive HTML emails with Vue components. Supports Nuxt 3 & dark mode emulation.

mailpeek Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# mailpeek

The only Vue-native email toolkit. Build cross-client emails with type-safe components, then preview them across Gmail, Outlook, and dark mode.

[![npm](https://img.shields.io/npm/v/@mailpeek/preview?label=%40mailpeek%2Fpreview&color=00b2ad)](https://www.npmjs.com/package/@mailpeek/preview)
[![npm](https://img.shields.io/npm/v/@mailpeek/components?label=%40mailpeek%2Fcomponents&color=00b2ad)](https://www.npmjs.com/package/@mailpeek/components)
[![GitHub Stars](https://img.shields.io/github/stars/mailpeek/mailpeek?style=flat&color=00b2ad)](https://github.com/mailpeek/mailpeek/stargazers)
[![License: MIT](https://img.shields.io/badge/license-MIT-00b2ad.svg)](https://raw.githubusercontent.com/mailpeek/mailpeek/main/LICENSE)

![mailpeek demo](https://raw.githubusercontent.com/mailpeek/mailpeek/main/demo/mailpeek-demo.gif)

**[Playground](https://mailpeek.dev/playground)** · **[Live Demo](https://mailpeek.dev/demo)** · **[Docs](https://mailpeek.dev)** · **[GitHub](https://github.com/mailpeek/mailpeek)**

## Packages

| Package | Description |
|---------|-------------|
| [`@mailpeek/preview`](packages/preview) | Preview emails across Gmail, Outlook, and dark mode with CSS filtering, compatibility scoring, and accessibility checking |
| [`@mailpeek/components`](packages/components) | 14 Vue components that compile to cross-client email HTML, with server-side rendering |

## @mailpeek/preview

Preview any email HTML inside Gmail and Outlook with per-client CSS filtering, dark mode, compatibility scoring, and accessibility checking.

```bash
npm install @mailpeek/preview
```

```vue
<script setup lang="ts">
import { EmailPreview } from '@mailpeek/preview'
import '@mailpeek/preview/style.css'

const emailHtml = `
  <html>
    <head>
      <title>Welcome to Our Service</title>
    </head>
    <body>
      <h1>Hello!</h1>
      <p>Thanks for signing up.</p>
    </body>
  </html>
`
</script>

<template>
  <EmailPreview :html="emailHtml" />
</template>
```

### Features

- **Gmail & Outlook preview** — Per-client CSS filtering strips unsupported properties (`@font-face`, `@media`, positioning, flexbox, grid, and more)
- **Dark mode** — Preview how each client transforms your email in dark mode
- **Compatibility scoring** — 0-100 score with per-property breakdown of what breaks in each client
- **Accessibility checker** — 10 WCAG checks for alt text, heading hierarchy, link text, and colour contrast
- **Device toggle** — Switch between mobile, tablet, and desktop viewports
- **Metadata display** — Subject line, preview text, and file size with Gmail 102KB clipping warning
- **Zero dependencies** — Vue 3 peer dep only, fully typed, SSR compatible

### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `html` | `string` | `undefined` | Raw email HTML to preview |
| `width` | `string` | `'600px'` | CSS width for the preview container |
| `client` | `'gmail' \| 'outlook' \| 'raw'` | `'gmail'` | Email client to preview |
| `mobile` | `boolean` | `false` | Enable mobile chrome variant |
| `deviceWidth` | `'mobile' \| 'desktop'` | `'desktop'` | Device width preset |
| `darkMode` | `boolean` | `false` | Enable dark mode preview |

## @mailpeek/components

Build cross-client email HTML with 14 type-safe Vue components.

```bash
npm install @mailpeek/components
```

```vue
<script setup>
import {
  EmailHtml, EmailHead, EmailBody, EmailContainer,
  EmailHeading, EmailText, EmailButton,
} from '@mailpeek/components'
</script>

<template>
  <EmailHtml>
    <EmailHead title="Welcome" />
    <EmailBody>
      <EmailContainer>
        <EmailHeading as="h1">Hello!</EmailHeading>
        <EmailText>Thanks for joining us.</EmailText>
        <EmailButton href="https://example.com">Get Started</EmailButton>
      </EmailContainer>
    </EmailBody>
  </EmailHtml>
</template>
```

### Server-Side Rendering

```ts
import { render } from '@mailpeek/components'
import WelcomeEmail from './WelcomeEmail.vue'

const html = await render(WelcomeEmail, { name: 'Aoife' })
// Send with Resend, SendGrid, Nodemailer, etc.
```

### Components

`EmailHtml` · `EmailHead` · `EmailBody` · `EmailContainer` · `EmailSection` · `EmailRow` · `EmailColumn` · `EmailHeading` · `EmailText` · `EmailButton` · `EmailImage` · `EmailLink` · `EmailDivider` · `EmailPreviewText`

All components output email-safe HTML with inline styles and table-based layouts. Full TypeScript support, zero dependencies beyond Vue 3.

## License

MIT

mailpeek

mailpeek Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

mailpeek

mailpeek Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README