Why?

Coding responsive HTML that works on all email clients is daunting and time consuming. stencil helps you create beautiful emails in just a couple of lines of code.

Install

npm install @radval/stencil
//or
yarn add @radval/stencil

Usage

const Stencil = require('@radval/stencil')


const stencil = new Stencil('transactional')
const html = stencil.render({
    heading: 'Welcome, Jane! 🎉',
    message: 'We’ve heard you like emails!',
})

Each stencil email has the same structure: header, body, footer. The header has a logo, heading (title), message and an action button. The footer contains social media links, the business address and the unsubscribe message.

Check out stencil.email to see how templates look! Alternatively you can use the .sketch file here.

There are 4 body categories:

• welcome: Adds a list of tasks or next steps to follow.
• transactional: Suited for password resets, account-related alerts, event-driven notifications and so on.
• confirmation: Adds a confirmation code.
• newsletter: Adds an articles list, each having an image, title, subtile, description and action button.

Customization

There are several ways in which you can customize stencil emails: beyond text you can change the color theme and each image and icon. Customization is done by passing a view object to the render method. Keep in mind that all the urls you're using have to be publicly available so that the recipient of your emails can see them. Also, all of the properties are optional, although without some of them the email would make little sense.

Here's what you can tweak:

Top-level views

Sent directly to the render method.

General

Name	Description	Type
title	The title that shows up in web browsers tab	string
preview	The preview that shows up in email clients lists	string
font	The global font	font
logo	The logo	image
banner	A image banner appearing under the logo	image
action	The header main button's action	action
heading	The header's title	string/html
message	The header's message	string/html
social	The footer's social media links	array<social>
businessAddress	The business address below the social media links	address
unsubscribe	The unsubscribe message	string/html

Welcome

Name	Description	Type
steps	A todo or next steps list	steps

Confirmation

Name	Description	Type
code	The confirmation code	string/html

Newsletter

Name	Description	Type
articles	A list of articles	array<article>

Objects

These are used by the view's properties (see above)

Font

Name	Description	Type
name	The font name, (e.g. Roboto)	string
url	The font URL (publicly available)	string

Image

Name	Description	Type
width	The width (don't forget the CSS units i.e. 100px)	string
height	The height (don't forget the CSS units i.e. 100px)	string
src	The image URL (publicly available)	string

Action

Name	Description	Type
label	The button label	string
href	The target URL	string

Social

Name	Description	Type
name	Provider name	one of twitter, facebook, instagram, pinterest, tiktok, whatsapp, youtube
href	The target social page URL	string

Address

Name	Description	Type
firstLine	The address first line (e.g. Bohemian Inc, 221B Baker Street)	string
secondLine	The address second line (e.g. London, United Kingdom)	string

Steps

Name	Description	Type
title	The title above the list	string/html
items	List items	array<steps-item>

Steps item

Name	Description	Type
icon	The item icon	image
description	The item description	string/html

Article

Name	Description	Type
icon	The article icon	image
title	The article title	string/html
subtitle	The article subtitle	string/html
preview	The article short preview	string/html
action	The item description	action