

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 each template looks!
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 |