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.
mjml-core
Installation
npm install --save mjml-core
This is the core mjml library, composed by a set of functions for both parsing, and rendering mjml
Usage
import { mjml2html } from 'mjml'
console.log(mjml2html(`code`))