eml-view

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/eml-view@1.0.1/dist/eml-view.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/eml-view@1.0.1/dist/eml-view.js"></script>

<!-- Don't forget to include Shoelace -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/cdn/themes/light.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.20.1/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

Uses

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

Todo

• Additional previews of common attachments
  • iCal ICS files