mailpeek

slim_sapphire_tabatha

Effortlessly preview and test emails in Vue.js across various clients.

1likes0comments

Visit project 1

Project details

About this project

mailpeek is the only Vue-native email toolkit. Build cross-client emails with 14 type-safe components and server-side rendering, then preview across Gmail, Outlook, and dark mode. Compatibility scoring, WCAG accessibility checks, and CSS filtering — enterprise features that SaaS tools charge hundreds for, free and open source.

mailpeek is the only Vue-native toolkit for both building and previewing HTML emails. It provides two focused packages: @mailpeek/preview for visualising how emails render across different clients and devices, and @mailpeek/components for composing emails with type-safe, SSR-compatible Vue components. Completely free and open source.

Live Demo | Documentation

Key Features

@mailpeek/preview

Email Client Preview: Simulate how emails appear in Gmail and Outlook, with client chrome and per-client CSS filtering applied.
Dark Mode Preview: Toggle dark mode to check how your email holds up under dark client themes.
Responsive Device Preview: Switch between mobile (375px) and desktop views to verify designs across screen sizes.
Compatibility Scoring: A 0–100 score with a per-property breakdown of CSS support across email clients.
Accessibility Checker: Ten WCAG-aligned checks covering alt text, heading hierarchy, link text, and colour contrast.
Email Metadata Display: Automatically surfaces the subject line, preview text, and file size.
Gmail 102KB Clipping Warning: Alerts when email content exceeds Gmail's clipping threshold to help avoid truncated messages.
CSS Filtering with Console Warnings: Strips unsupported CSS properties and logs a warning for each one removed.
Zero Dependencies: Only requires Vue 3 as a peer dependency.
TypeScript Support: Full type definitions included.
SSR Compatibility: Works with Nuxt 3 out of the box.

@mailpeek/components

14 Composable Email Components: A complete set of primitives for structuring and styling HTML emails in Vue.
Server-Side Rendering: Render emails to HTML strings on the server using the included render() function.
Type-Safe: Full TypeScript support throughout.
Zero Dependencies: Only requires Vue 3 as a peer dependency.

Getting Started with @mailpeek/preview

npm install @mailpeek/preview

<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

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' \| 'tablet' \| 'desktop'`	`'desktop'`	Device width preset

Events

<template>
  <EmailPreview
    :html="emailHtml"
    @client-change="onClientChange"
    @device-change="onDeviceChange"
  />
</template>

<script setup lang="ts">
function onClientChange(client: string) {
  console.log('Switched to:', client)
}

function onDeviceChange(device: string) {
  console.log('Device changed to:', device)
}
</script>

CSS Filtering and Warnings

@mailpeek/preview filters CSS properties that are unsupported by the selected email client and logs a console warning for each property removed:

[mailpeek] Gmail Web: removed "position: fixed" — Gmail does not support CSS positioning

Browser Support

Compatible with all modern browsers that support ES2020 and CSS Custom Properties.

Getting Started with @mailpeek/components

npm install @mailpeek/components

Build a complete email using the component primitives:

<script setup lang="ts">
import {
  EmailHtml, EmailHead, EmailBody, EmailContainer,
  EmailSection, EmailHeading, EmailText, EmailButton,
  EmailPreviewText,
} from '@mailpeek/components'
</script>

<template>
  <EmailHtml>
    <EmailHead>
      <EmailPreviewText>Thanks for signing up — here's what's next.</EmailPreviewText>
    </EmailHead>
    <EmailBody>
      <EmailContainer>
        <EmailSection>
          <EmailHeading>Welcome aboard</EmailHeading>
          <EmailText>Thanks for creating an account. We're glad to have you.</EmailText>
          <EmailButton href="https://example.com/get-started">
            Get started
          </EmailButton>
        </EmailSection>
      </EmailContainer>
    </EmailBody>
  </EmailHtml>
</template>

Server-Side Rendering

Use the render() function to generate an HTML string from any email component:

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

const html = await render(WelcomeEmail, { name: 'Aoife' })
// html is a fully rendered HTML string ready to send

Available Components

Component	Description
`EmailHtml`	Root element, renders the `<html>` tag
`EmailHead`	Renders the `<head>` tag
`EmailBody`	Renders the `<body>` tag
`EmailContainer`	Centred layout wrapper
`EmailSection`	Full-width section block
`EmailRow`	Horizontal row within a section
`EmailColumn`	Column within a row
`EmailHeading`	Heading element (`h1`–`h6`)
`EmailText`	Paragraph text
`EmailButton`	Call-to-action button with a link
`EmailImage`	Image with email-safe defaults
`EmailLink`	Inline hyperlink
`EmailDivider`	Horizontal rule / divider
`EmailPreviewText`	Hidden preview text shown in inbox snippet views

mailpeek is designed to make email development in Vue feel like any other component-driven workflow — from composing the template to previewing it in context. For full documentation and examples, visit mailpeek.dev.

Comments

Your draft will be saved

Start the conversation

Share the first comment.