preview-email

What is preview-email?

The preview-email npm package allows developers to preview email templates during development. It is particularly useful for testing and debugging email content before sending it to actual recipients.

What are preview-email's main functionalities?

Preview Email in Browser

This feature allows you to preview an email in the browser. The email object contains the necessary fields like 'from', 'to', 'subject', and 'html'. The previewEmail function generates a preview URL that you can open in your browser.

const previewEmail = require('preview-email');
const email = {
  from: '[e-mail]',
  to: '[e-mail]',
  subject: 'Test Email',
  html: '<h1>Hello World</h1>'
};

previewEmail(email).then(console.log).catch(console.error);

Custom Template Rendering

This feature allows you to use custom template engines like EJS to render dynamic email content. The rendered HTML is then passed to the previewEmail function for previewing.

const previewEmail = require('preview-email');
const ejs = require('ejs');
const emailTemplate = '<h1>Hello <%= name %></h1>';
const emailData = { name: 'John Doe' };
const emailHtml = ejs.render(emailTemplate, emailData);
const email = {
  from: '[e-mail]',
  to: '[e-mail]',
  subject: 'Personalized Email',
  html: emailHtml
};

previewEmail(email).then(console.log).catch(console.error);

Inline CSS

This feature allows you to inline CSS styles in your email HTML using the 'juice' library. The inlined HTML is then passed to the previewEmail function for previewing.

const previewEmail = require('preview-email');
const juice = require('juice');
const emailHtml = '<style>h1 { color: red; }</style><h1>Hello World</h1>';
const inlinedHtml = juice(emailHtml);
const email = {
  from: '[e-mail]',
  to: '[e-mail]',
  subject: 'Styled Email',
  html: inlinedHtml
};

previewEmail(email).then(console.log).catch(console.error);

Other packages similar to preview-email

nodemailer

Nodemailer is a module for Node.js applications to allow easy email sending. While it focuses on sending emails, it also provides a plugin system that can be used to preview emails. However, it is more complex and feature-rich compared to preview-email.

maildev

MailDev is a simple way to test email sending during development. It acts as a local SMTP server and web interface for viewing emails. Unlike preview-email, MailDev provides a full SMTP server and a web interface for viewing emails.

email-templates

Email-templates is a Node.js module for rendering email templates. It supports various template engines and inline CSS. While it focuses on rendering and sending emails, it also provides a preview feature. It is more comprehensive compared to preview-email.

README

preview-email

Automatically opens your browser to preview Node.js email messages sent with Nodemailer. Made for Lad!

VIEW THE DEMO

Table of Contents

• Install
• Usage
• Options
• Contributors
• License

Install

npm:

npm install preview-email

yarn:

yarn add preview-email

Usage

NOTE: You should probably just use email-templates directly instead of using this package.

The function previewEmail returns a Promise which resolves with a URL. We automatically open the browser to this URL unless you specify the third argument open as false (see Options for more info).

const previewEmail = require('preview-email');
const nodemailer = require('nodemailer');

const transport = nodemailer.createTransport({
  jsonTransport: true
});

// <https://nodemailer.com/message/>
const message = {
  from: '[e-mail]',
  to: '[e-mail]',
  subject: 'Hello world',
  html: '<p>Hello world</p>',
  text: 'Hello world',
  attachments: [ { filename: 'hello-world.txt', content: 'Hello world' } ]
};

previewEmail(message).then(console.log).catch(console.error);

transport.sendMail(message).then(console.log).catch(console.error);

Options

Note that you can also pass two additional arguments to previewEmail function.

These arguments are id and open (e.g. previewEmail(message, id, open)).

By default we automatically set an id using uuid.v4() (see uuid for more info).

Also, open is set to true by default - this means that we automatically open the browser for you.

Contributors

Name	Website
Nick Baugh	http://niftylettuce.com/

License

MIT © Nick Baugh