MJML-Twig Mails

Blazing fast mail templating environment with ✉ MJML + 🌿 Twig. Create responsive emails quickly with less code.

Features

• MJML
• Twig
• Yaml
• Webpack
• Webpack-dev-server

System requirements

• Node.js
• npm or yarn

Getting started

Install dependencies and run webpack-dev-server:

npm

$ npm install

$ npm run dev

yarn

$ yarn import # migrate package-lock.json to yarn.lock
$ rm package-lock.json # or delete manually
$ yarn install --force

$ yarn dev

Optional

If the server port is already in use, adjust devServerPort in package.json

Production

Generate minified .html files and copy assets/ directory to dist/:

npm

$ npm run build

yarn

$ yarn build

Directories

Directory	Description
.config	Contains webpack configs.
src	Contains webpack's main entry point main.js which auto-loads all .twig files inside src/templates/ and all subdirectories.
src/assets	Contains images.
src/components	Contains reusable components.
src/data	Contains .yml files. The contents are accessible in all .twig files.
src/layouts	Contains layouts.
src/templates	Contains mail templates. A newly created template can be accessed in the browser by typing /template-name after the dev-server-url. Exmaple: http://localhost:8080/template-name. The index.twig template is reserved for navigation.

Documentation

• MJML docs
• Twig docs