EML file preview web component

Demo

Preview the contents of an email file right in your browser.

Installation with a CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/eml-view.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/eml-view.js"></script>

<!-- Don't forget to include Shoelace -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/themes/light.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/shoelace-autoloader.js"></script>

Installation with a bundler

npm install eml-view

import 'eml-view';
import 'eml-view/dist/eml-view.css';

Install Shoelace

Usage

<!-- Pass a URL to an EML file to preview -->
<eml-view src="https://example.com/reply.eml"></eml-view>

<!-- Or use blob/data URLs to load files however you like -->
<eml-view src="blob:https://example.com/4df96023-a58c-4bbd-82d6-3c4b98bdc040"></eml-view>
<eml-view src="data:..."></eml-view>

Screenshot

Features

• Toggle between HTML and text parts
• Preview arbitrarily nested attached EML files
• See large previews of attachments like PDFs, images, videos, text, html
• View the full headers
• Download all attachments with a single click

Customisation

Add custom actions:

<eml-view>
  <sl-menu-item slot="action-menu-item" value="test">
    Test
    <sl-icon slot="prefix" name="emoji-sunglasses"></sl-icon>
  </sl-menu-item>
</eml-view>

document.addEventListener('eml-action', event => {
  const { eml, action } = event.detail;

  switch (action) {
    case 'test':
      alert('The email subject is: ' + eml.subject);
      break;
  }
});

Uses

• postal-mime to parse the email files
• @shoelace-style/shoelace for the UI

Todo

• Additional previews of common attachments
  • iCal ICS files