Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.


Build Status npm version

Inky is an HTML-based templating language that converts simple HTML into complex, responsive email-ready HTML. Designed for Foundation for Emails.

Give Inky simple HTML like this:

  <columns large="6"></columns>
  <columns large="6"></columns>

And get complicated, but battle-tested, email-ready HTML like this:

<table class="row">
      <th class="small-12 large-6 columns first">
            <th class="expander"></th>
      <th class="small-12 large-6 columns first">
            <th class="expander"></th>


npm install inky --save-dev


Inky can be used standalone, as a Gulp plugin, or with a CLI. You can also access the Inky parser class directly.


var inky = require('inky');

  src: 'src/pages/**/*.html',
  dest: 'dist'
}, function() {
  console.log('Done parsing.');

With Gulp

var inky = require('inky')

function parse() {

Command Line

Install foundation-cli to get the foundation command.

Plugin Settings

  • src (String): Glob of files to process. You don't need to supply this when using Inky with Gulp.
  • dest (String): Folder to output processed files to. You don't need to supply this when using Inky with Gulp.
  • components (Object): Tag names for custom components. See custom components below to learn more.
  • columnCount (Number): Column count for the grid. Make sure your Foundation for Emails project has the same column count in the Sass as well.
  • cheerio (Object): cheerio settings (for available options please refer to cheerio project at github).

Custom Components

Inky simplifies the process of creating HTML emails by expanding out simple tags like <row> and <column> into full table syntax. The names of the tags can be changed with the components setting.

Here are the names of the defaults:

  button: 'button',
  row: 'row',
  columns: 'columns',
  container: 'container',
  inky: 'inky',
  blockGrid: 'block-grid',
  menu: 'menu',
  menuItem: 'item'

Programmatic Use

The Inky parser can be accessed directly for programmatic use. It takes in a Cheerio object of HTML, and gives you back a converted Cheerio object.

var Inky = require('inky').Inky;
var cheerio = require('cheerio');

var options = {};
var input = '<row></row>';

// The same plugin settings are passed in the constructor
var i = new Inky(options);
var html = cheerio.load(input)

// Now unleash the fury
var convertedHtml = i.releaseTheKraken(html);

// The return value is a Cheerio object. Get the string value with .html()