See what your recipients see.

Build and preview emails in Vue. Compose with type-safe components, render to HTML, then preview across Gmail, Outlook, and dark mode. Open source, zero dependencies.

Get Started Try the Playground →

$npm install @mailpeek/preview @mailpeek/components

Star on GitHub

Preview Demo

See how @mailpeek/preview renders an email across Gmail, Outlook, and Raw views. Toggle between mobile and desktop, light and dark mode.

Want to test your own email? Try the Playground →

Welcome to Launchpad — your account is ready

Your account is ready. Here's everything you need to get started with Launchpad.9.3 KB

Build and preview emails in Vue

Vue Email Components

14 type-safe components that compile to cross-client HTML. Tables, buttons, headings, images — all email-safe out of the box.

Server-Side Render

One function to render any Vue email to an HTML string. Plug into Resend, SendGrid, Nodemailer, or any sending API.

Client Preview

Preview emails as Gmail and Outlook render them. Per-client CSS filtering approximates each client's restrictions.

Dark Mode Preview

Preview how Gmail, Outlook, and Apple Mail transform your email in dark mode before your users see it.

Compatibility Scoring

Get a 0-100 score with a detailed breakdown of which CSS properties will break in each email client.

Accessibility Checker

10 WCAG checks for alt text, heading hierarchy, link text quality, colour contrast, and more.

Device Preview

Toggle between mobile, tablet, and desktop views to check responsive behaviour across screen sizes.

Zero Dependencies

Only Vue 3 as a peer dependency. Fully typed with TypeScript. SSR compatible with Nuxt 3.

Catch issues early, ship with confidence

Mailpeek fits seamlessly into your development phase. Spot broken layouts and stripped CSS instantly, without sending a single test email.

Instant feedback

See how Gmail and Outlook handle your CSS as you build. No sending, no waiting, no switching tools.

Find issues before QA

Catch stripped properties, broken layouts, and accessibility gaps at dev time, not after a Litmus run.

No account required

No subscription, no external service, no sending credits. Drop it into your Vue app and it works offline.

Know what will break

A 0-100 compatibility score with a full breakdown of which CSS properties won't survive each client.

Mailpeek approximates how Gmail and Outlook handle your CSS. It's a faster feedback loop during development, not a replacement for QA testing in Litmus or Email on Acid.

Drop it into any Vue app

Preview emails or build them — one import, a few lines of code.

<script setup>
import { EmailPreview } from '@mailpeek/preview'
import '@mailpeek/preview/style.css'

const html = `<html>...your email...</html>`
</script>

<template>
  <EmailPreview :html="html" client="gmail" />
</template>

<script setup>
import {
  EmailContainer, EmailHeading, EmailText, EmailButton
} from '@mailpeek/components'
</script>

<template>
  <EmailContainer>
    <EmailHeading as="h1">Welcome!</EmailHeading>
    <EmailText>Thanks for signing up.</EmailText>
    <EmailButton
      href="https://example.com"
      backgroundColor="#0d9488"
    >
      Get Started
    </EmailButton>
  </EmailContainer>
</template>