https://github.com/tinovyatkin/tag-mjml

Tagged template string function that converts MJML to HTML string
https://github.com/tinovyatkin/tag-mjml

mjml mjml-framework mjml-template mjml-to-html mjml4 nodejs tagged-template-literals

Last synced: 25 days ago
JSON representation

Tagged template string function that converts MJML to HTML string

• Host: GitHub
• URL: https://github.com/tinovyatkin/tag-mjml
• Owner: tinovyatkin
• License: mit
• Created: 2019-11-20T19:52:44.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-11-07T12:17:20.000Z (over 1 year ago)
• Last Synced: 2025-04-14T14:16:56.770Z (about 1 month ago)
• Topics: mjml, mjml-framework, mjml-template, mjml-to-html, mjml4, nodejs, tagged-template-literals
• Language: TypeScript
• Size: 309 KB
• Stars: 8
• Watchers: 1
• Forks: 1
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# [MJML](https://mjml.io/) Template String [![codecov](https://codecov.io/gh/tinovyatkin/tag-mjml/branch/master/graph/badge.svg)](https://codecov.io/gh/tinovyatkin/tag-mjml) [![NPM Version](https://img.shields.io/npm/v/tag-mjml.svg)](https://www.npmjs.com/package/tag-mjml) [![Dependencies](https://img.shields.io/david/tinovyatkin/tag-mjml.svg)](https://david-dm.org/tinovyatkin/tag-mjml) [![Downloads per month](https://img.shields.io/npm/dm/tag-mjml.svg)](https://npmcharts.com/compare/tag-mjml?minimal=true)



A simple yet powerful module to allow you to use ES6 tagged template strings for rendering (generating HTML) of [MJML](https://mjml.io/) email templates using dynamic substitutions, etc.

Module takes care of automatic escaping/converting variables for HTML.

So, something as crazy as below works just fine:

```ts

const mjml = require('tag-mjml')({ beautify: true });

const companyName = chalk`

                                I love

                                My 🤘🏻 < {keyword('orange').bold Company}`;

const textSize = 62;

const htmlResult = mjml`

        

          

            

            

              

                

                  ${companyName}

                

              

            

          

        

      `;

```

and renders to nice HTML like this:

```html

  

  


    I love my

    


    My 🤘🏻 <

    

      

        Company

      

    

  

  


```

So, now you don't need to repass MJML with Handlebars, etc, to have dynamic data binding.

Written in Typescript with 100% test coverage.

# License: MIT