email-template-renderer

[![Build Status](https://travis-ci.org/tmont/email-template-renderer.png)](https://travis-ci.org/tmont/email-template-renderer) [![NPM version](https://badge.fury.io/js/email-template-renderer.png)](http://badge.fury.io/js/email-template-renderer)

Usage no npm install needed!

<script type="module">
  import emailTemplateRenderer from 'https://cdn.skypack.dev/email-template-renderer';
</script>

README

HTML email templates

Build Status NPM version

This is a little library that allows you to easily compile templated HTML into the pile of hot garbage that HTML email clients require. It makes a few things easier:

  • Writing HTML (by using Jade, EJS or nunjucks). See the tests for examples of each.
  • Inlining CSS (by using Juice2)
  • Managing lots o' templates (by requiring a specific directory structure)

For example, it will turn this:

//- /my/templates/examples/test.jade
html
    head
        link(rel="stylesheet", href="./style.css")
    body
        p Hello #{hello}
/* style.css */
p {
    color: red;
}

into this:

<html>
  <head>
    
  </head>
  <body>
    <p style="color: red;">Hello world</p>
  </body>
</html>

by doing this:

var Renderer = require('email-template-renderer'),
    renderer = new Renderer('/my/templates');
    
renderer.render('examples', { hello: 'world' }, function(err, result) {
    if (err) {
        console.error(err);
        return;
    }
    
    console.log(result.test);
});

Usage

Basically, you have to set up your templates in a particular directory structure. Something like this:

templates
|- reset-password
|-- text.jade
|-- html.jade
|-- style.css
|- registration
|-- text.jade
|-- html.jade
|-- style.css

The idea being that each directory (reset-password and registration above) would contain different templates. A common theme is to have an HTML template and a text template. You can use jade/ejs for both. If your template is named text.<whatever> it will not be juiced.

You would then pass /path/to/that/templates directory into the renderer. Then you just call render and give it the name of the template to render as well as any template variables, and it returns an object with each key being each template inside the template directory.

For example, the result would be something like the following for the reset-password template above:

{
    text: 'Click on this link to reset your password: http://example.com/asdf',
    html: '<a style="color: blue; text-decoration: underline;" href="http://example.com/asdf">Click here</a> to reset your password.'
}

NOTE You will have to load the template library yourself. This library does not have any dependencies on template libraries, so it's up to you to ensure that the templating language is being loaded.