stencil

KO | EN

gitlite — search

#javascript #python #hacktoberfest #golang #go #machine-learning #linux #macos #java #windows #awesome #cli #ios #open-source

(★ 86)

Customizable transactional and marketing email templates

File Explorer

Download Latest Version (.zip)

- settings.json
- calendar.png
- card.png
- checkbox.png
- dialog.png
- facebook.png
- github-logo.svg
- gpu.png
- imac.png
- instagram.png
- location.png
- logo.png
- macbook.png
- map.png
- pinterest.png
- rocket.png
- sliders.png
- tiktok.png
- twitter.png
- whatsapp.png
- youtube.png
- index.js
- confirmation.mjml
- footer.mjml
- head.mjml
- header.mjml
- newsletter.mjml
- transactional.mjml
- welcome.mjml
- confirmation.js
- newsletter.js
- transactional.js
- welcome.js
.gitignore
design.sketch
index.js
LICENSE.md
package.json
README.md
yarn.lock

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

![Dependencies](https://img.shields.io/badge/dependencies-up%20to%20date-yellowgreen.svg)
[![GitHub Issues](https://img.shields.io/github/issues/valentinradu/stencil.svg)](https://github.com/valentinradu/stencil/issues)
![Contributions welcome](https://img.shields.io/badge/contributions-welcome-blueviolet.svg)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)

## 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

```javascript
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](https://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

### Welcome

### Confirmation

### Newsletter

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

### Font

### Image

### Action

### Social

### Address

### Steps

### Steps item

### Article

stencil

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

stencil

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README