What is mjml-core?
The mjml-core package is a framework for creating responsive email templates using a markup language called MJML (Mailjet Markup Language). It simplifies the process of designing and coding responsive emails by providing a set of high-level components that abstract away the complexities of HTML and CSS.
What are mjml-core's main functionalities?
Basic MJML to HTML Conversion
This feature allows you to convert MJML markup into responsive HTML. The code sample demonstrates how to use the `mjml2html` function to convert a simple MJML template into HTML.
const mjml2html = require('mjml');
const mjml = `
<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-text>Hello World</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>`;
const { html, errors } = mjml2html(mjml);
console.log(html);
Custom Components
This feature allows you to create custom MJML components. The code sample demonstrates how to create and register a custom button component.
const { registerComponent, BodyComponent } = require('mjml-core');
class CustomButton extends BodyComponent {
render() {
return this.renderMJML(`
<mj-button background-color="${this.getAttribute('background-color')}" href="${this.getAttribute('href')}">
${this.getContent()}
</mj-button>
`);
}
}
registerComponent(CustomButton);
Validation
This feature provides validation for MJML templates. The code sample demonstrates how to use the `mjml2html` function with strict validation to catch any errors in the MJML markup.
const mjml2html = require('mjml');
const mjml = `
<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-text>Hello World</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>`;
const { html, errors } = mjml2html(mjml, { validationLevel: 'strict' });
if (errors.length > 0) {
console.error('Validation errors:', errors);
} else {
console.log(html);
}
Other packages similar to mjml-core
handlebars
Handlebars is a popular templating engine that allows you to build dynamic HTML templates. Unlike MJML, which is specifically designed for responsive email templates, Handlebars is more general-purpose and can be used for a variety of web development tasks.
pug
Pug (formerly known as Jade) is a high-performance template engine heavily influenced by Haml and implemented with JavaScript for Node.js and browsers. While Pug is not specifically designed for email templates, it offers a powerful syntax for generating HTML.
nunjucks
Nunjucks is a rich and powerful templating language for JavaScript. It is heavily inspired by Jinja2, the templating engine for Python. Nunjucks is not specifically tailored for email templates but offers a lot of flexibility for general HTML generation.
| Introduction
| Installation
| Usage
| Contribute |
Introduction
MJML is a markup language designed to reduce the pain of coding a responsive email. Its semantic syntax makes it easy and straightforward while its rich standard components library fastens your development time and lightens your email codebase. MJML’s open-source engine takes care of translating the MJML you wrote into responsive HTML.
Installation
Requirements
Via NPM:
npm install -g mjml
Via... click:
Show me the code!
Command line
Compile the file and output the result in a.html
$> mjml -r input.mjml
Redirect the result to a file
$> mjml -r input.mjml -o output.html
Watch a file and compile every time the file changes
$> mjml -w input.mjml -o output.html
Inside Node.js
import { mjml2html } from 'mjml'
const htmlOutput = mjml2html(`<mj-body>
<mj-section>
<mj-column>
<mj-text>
Hello World!
</mj-text>
</mj-column>
</mj-section>
</mj-body>`)
console.log(htmlOutput)
In your browser
<html>
<head>
<script src="dist/mjml.js"></script>
<script>
var htmlOutput = mjml.mjml2html('<mj-body>' +
'<mj-section>' +
'<mj-column>' +
'<mj-text>' +
'Hello World!' +
'</mj-text>' +
'</mj-column>' +
'</mj-section>' +
'</mj-body>')
console.log(htmlOutput)
</script>
</head>
<body>
</body>
</html>
Create your component
Issue the following in your terminal
$> mjml --init-component <name of your component>
$> mjml --init-component <name of you component> -e
It will create a basic component template in a .js
file. Follow the instructions provided in the file
and read more about custom components in the documentation
Try it live
Get your hands dirty by trying the MJML online editor! Write awesome code on the left side and preview your email on the right. You can also get the rendered HTML directly from the online editor.
Contributors
Contribute