mjml-project

This package helps you develop MJML projects:

• Create a basic MJML project structure to bootstrap your email development
• Process your MJML files along with additional data interpolation using Twig.js
• Locally serve your processed MJML files with "hot reloading" while you develop

Installation

npm install --save-dev mjml-project
yarn add --dev mjml-project

Usage

Create a new project

This command will bootstrap your project within a folder called my-project:

npx create-mjml-project my-project

This command will bootstrap your project in the current directory with the name my-project:

npx create-mjml-project my-project .

NOTE: if using the . file path option, the contents of the current folder must be empty. An error will prevent you overwriting existing folder contents.

The folders it will create are:

# Contains source code for custom MJML components 
/src
  /components
    HelloWorld.js
 
# Contains transpiled code for custom MJML components 
/components
  HelloWorld.js
 
# Contains re-usable MJML partial templates 
/partials
 
# Contains all your MJML layouts representing your email designs 
/layouts
  # Nested folders can help organise your files 
  /example
    hello-world.mjml
 
# Any data you wish to inject into templates 
/data
  # You can have shared data files which the data 
  # will be included in all the processed templates 
  shared.json
 
  # If using data interpolation within your templates, 
  # you will need to match the `/templates` folder structure 
  /example
    # You can also have shared data per nested folder. 
    # All templates within `/templates/example` will use 
    # this shared data file along with `/data/shared.json` 
    # and any other data file which has the same name. 
    shared.json
 
    # This is a template specific data file which it will 
    # only be included when processing the file 
    # `/templates/example/hello-world.mjml` 
    hello-world.json
 
# Any files that won't be processed can go here 
/public
  /fonts
  /images
  /styles
 
# The folder that will contain your processed HTML files 
/build

Process your MJML project into email-ready HTML

npx mjml-project process

This will take the contents of /templates and /data and process the files into email appropriate HTML to the /build folder.

Serve files locally while developing your MJML project

npx mjml-project process --watch

Files are also served using browser-sync. Any changes you make to files in the /templates and /data folder will trigger those files to be updated in the browser, so you can see the fruits of your labour in real-time.

Contribute

Have suggestions, questions or feedback? Found a bug? Post an issue

Added a feature? Fixed a bug? Post a PR

License

Apache 2.0