Skip to main content

MJML

MJML is a markup language designed to reduce the pain of coding a responsive email.

Language Info

Name

mjml

Extension

.mjml

Editor

markup

Compiler

The browser build of the official MJML compiler.

Version

mjml-browser: v4.15.3

Custom Settings

Custom settings added to the property mjml are passed as a JSON object to the mjml compiler. Please check the documentation for full reference.

Example:

{
"mjml": {
"keepComments": false,
"minify": true
}
}

Example Usage

show code
import { createPlayground } from 'livecodes';

const options = {
"params": {
"mjml": "<mjml>\n\t<mj-body>\n\t\t<mj-section>\n\t\t\t<mj-column>\n\t\t\t\t<mj-text>\n\t\t\t\t\tHello World!\n\t\t\t\t</mj-text>\n\t\t\t</mj-column>\n\t\t</mj-section>\n\t</mj-body>\n</mjml>\n"
}
};
createPlayground('#container', options);

This playground loads a template from the official MJML email templates:

show code
import { createPlayground } from 'livecodes';

const options = {
"import": "https://github.com/mjmlio/email-templates/blob/master/templates/onepage.mjml"
};
createPlayground('#container', options);