@mailpeek/preview

@mailpeek/preview

Vue 3 component for previewing email HTML across Gmail, Outlook, and dark mode, with compatibility scoring and accessibility checking built in.

Live Demo · Docs · GitHub

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 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 with Nuxt 3

Installation

npm install @mailpeek/preview

Quick Start

<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>

Props

Events

CSS Filtering

When previewing in Gmail or Outlook mode, mailpeek removes unsupported CSS properties and logs warnings:

[mailpeek] Gmail Web: removed "position: fixed" — Gmail does not support CSS positioning
[mailpeek] Outlook: removed "border-radius: 4px" — Outlook Word renderer does not support border-radius

Gmail strips: position, transform, animation, transition, box-shadow, display: grid, flexbox sub-properties, @font-face, @media queries, and more. Style blocks over 8,192 characters are removed entirely.

Outlook (Word engine, 2016-2021) strips everything Gmail does, plus: border-radius, display: flex, background-size, max-width, min-width, float, and more.

Also Available

@mailpeek/components - 14 Vue components for building cross-client email HTML with server-side rendering.

mailpeek templates - 45 production-ready email templates (transactional, marketing, and reusable patterns) with typed props, dark mode, and pre-rendered HTML.

License

MIT