Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
mjml-core
Advanced tools
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.
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);
}
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 (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 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 |
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.
npm install -g mjml
Via... click:
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
import { mjml2html } from 'mjml'
/*
Compile an mjml string
*/
const htmlOutput = mjml2html(`<mj-body>
<mj-section>
<mj-column>
<mj-text>
Hello World!
</mj-text>
</mj-column>
</mj-section>
</mj-body>`)
/*
Print the responsive HTML generated
*/
console.log(htmlOutput)
<html>
<head>
<script src="dist/mjml.js"></script>
<script>
/*
Compile an mjml string
*/
var htmlOutput = mjml.mjml2html('<mj-body>' +
'<mj-section>' +
'<mj-column>' +
'<mj-text>' +
'Hello World!' +
'</mj-text>' +
'</mj-column>' +
'</mj-section>' +
'</mj-body>')
/*
Print the responsive HTML generated
*/
console.log(htmlOutput)
</script>
</head>
<body>
</body>
</html>
Issue the following in your terminal
$> mjml --init-component <name of your component>
# If your component cannot contain anything else than text:
$> mjml --init-component <name of you component> -e
# It means nothing inside it will be parsed by the mjml engine.
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
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.
Maxime | Robin | Loeck | Guillaume | Meriadec | Arnaud | HTeuMeuLeu | Emmanuel Payet | Matthieu |
FAQs
mjml-core
The npm package mjml-core receives a total of 423,472 weekly downloads. As such, mjml-core popularity was classified as popular.
We found that mjml-core demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 6 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.