Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mjmlio/mjml
MJML: the only framework that makes responsive-email easy
https://github.com/mjmlio/mjml
email email-boilerplate email-campaigns mjml responsive responsive-email
Last synced: 3 days ago
JSON representation
MJML: the only framework that makes responsive-email easy
- Host: GitHub
- URL: https://github.com/mjmlio/mjml
- Owner: mjmlio
- License: mit
- Created: 2016-01-28T14:04:05.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2024-10-29T16:19:24.000Z (about 1 month ago)
- Last Synced: 2024-10-29T21:51:50.572Z (about 1 month ago)
- Topics: email, email-boilerplate, email-campaigns, mjml, responsive, responsive-email
- Language: JavaScript
- Homepage: https://mjml.io
- Size: 10.3 MB
- Stars: 17,051
- Watchers: 167
- Forks: 961
- Open Issues: 72
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome - mjmlio/mjml - MJML: the only framework that makes responsive-email easy (JavaScript)
- awesome - mjml - MJML: the only framework that makes responsive-email easy (JavaScript)
- my-awesome-list - mjml - email easy | mjmlio | 17139 | (JavaScript)
- awesome-nodejs-cn - MJML - 旨在减少创建响应式电子邮件困难的一种标记语言 (包 / 电子邮件)
- awesome-nodejs - mjml - Makes responsive-email easy.  (Repository / Email)
- awesome-nodejs-cn - MJML - **star:17072** 标记语言，旨在减少创建响应电子邮件的痛苦 ![star > 2000][Awesome] (包 / 邮件)
- awesome - mjmlio/mjml - MJML: the only framework that makes responsive-email easy (JavaScript)
- awesome-email-marketing - MJML 4
- awesome-opensource-email - MJML - Framework to make responsive-email easy (Code / Framework)
- awesome-list - mjml - email easy | mjmlio | 12395 | (JavaScript)
- awesome-nodejs - MJML - Markup language designed to reduce the pain of creating responsive emails. (Packages / Email)
- awesome-alternatives-in-rust - mjml
- awesome-node - MJML - Markup language designed to reduce the pain of creating responsive emails. (Packages / Email)
- awesome-nodejs-cn - MJML - 旨在减少创建响应电子邮件的痛苦的标记语言. (目录 / 邮箱)
- awesome-nodejs - mjml - 一个标识语言，用来减少编写响应式邮件的复杂度 (Uncategorized / Uncategorized)
- starred-awesome - mjml - MJML: the only framework that makes responsive-email easy (JavaScript)
- awesome-starred - mjmlio/mjml - MJML: the only framework that makes responsive-email easy (others)
README
# MJML 4
If you're looking for MJML 3.3.X check [this branch](https://github.com/mjmlio/mjml/tree/3.3.x)
| Translated documentation
| Introduction
| Installation
| Usage |
---
# Translated documentation
| Language | Link for documentation |
| :-: | :-: |
| 日本語 | [日本語ドキュメント](https://github.com/mjmlio/mjml/blob/master/readme-ja.md) |
# Introduction
`MJML` is a markup language created by [Mailjet](https://www.mailjet.com/) and designed to reduce the pain of coding a responsive email. Its semantic syntax makes the language easy and straightforward while its rich standard components library shortens 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
You can install `MJML` with `NPM` to use it with NodeJS or the Command Line Interface. If you're not sure what those are, head over to Usage for other ways to use MJML.
```bash
npm install mjml
```
# Development
To work on MJML, make changes and create merge requests, download and install [yarn](https://yarnpkg.com/lang/en/docs/install/) for easy development.
```bash
git clone https://github.com/mjmlio/mjml.git && cd mjml
yarn
yarn build
```
You can also run `yarn build:watch` to rebuild the package as you code.
# Usage
## Online
Don't want to install anything? Use the free online editor!
## Applications and plugins
MJML comes with an ecosystem of tools and plugins, check out:
- The [MJML App](https://mjmlio.github.io/mjml-app/) (MJML is included)
- [Visual Studio Code plugin](https://github.com/mjmlio/vscode-mjml) (MJML is included)
- [Sublime Text plugin](https://packagecontrol.io/packages/MJML-syntax) (MJML needs to be installed separately)
For more tools, check the [Community](https://mjml.io/community) page.
## Command line interface
> Compiles the file and outputs the HTML generated in `output.html`
```bash
mjml input.mjml -o output.html
```
You can pass optional `arguments` to the CLI and combine them.
argument | description | default value
---------|--------|--------------
`mjml -m [input]` | Migrates a v3 MJML file to the v4 syntax | NA
`mjml [input] -o [output]` | Writes the output to [output] | NA
`mjml [input] -s` | Writes the output to `stdout` | NA
`mjml -w [input]` | Watches the changes made to `[input]` (file or folder) | NA
`mjml [input] --config.beautify` | Beautifies the output (`true` or `false`) | true
`mjml [input] --config.minify` | Minifies the output (`true` or `false`) | false
See [mjml-cli documentation](https://github.com/mjmlio/mjml/blob/master/packages/mjml-cli/README.md) for more information about config options.
## Inside Node.js
```javascript
import mjml2html from 'mjml'
/*
Compile an mjml string
*/
const htmlOutput = mjml2html(`
Hello World!
`, options)
/*
Print the responsive HTML generated and MJML errors if any
*/
console.log(htmlOutput)
```
You can pass optional `options` as an object to the `mjml2html` function:
option | unit | description | default value
-------------|--------|--------------|---------------
fonts | object | Default fonts imported in the HTML rendered by MJML | See in [index.js](https://github.com/mjmlio/mjml/blob/master/packages/mjml-core/src/index.js#L100-L108)
keepComments | boolean | Option to keep comments in the HTML output | true
ignoreIncludes | boolean | Option to ignore mj-includes | false
beautify | boolean | Option to beautify the HTML output | false
minify | boolean | Option to minify the HTML output | false
validationLevel | string | Available values for the [validator](https://github.com/mjmlio/mjml/tree/master/packages/mjml-validator#validating-mjml): 'strict', 'soft', 'skip' | 'soft'
filePath | string | Path of file, used for relative paths in mj-includes | '.'
preprocessors | array of functions | Preprocessors applied to the xml before parsing. Input must be xml, not json. Functions must be (xml: string) => string | []
juicePreserveTags | Preserve some tags when inlining css, see [mjml-cli documentation](https://github.com/mjmlio/mjml/blob/master/packages/mjml-cli/README.md) for more info | NA
minifyOptions | Options for html minifier, see [mjml-cli documentation](https://github.com/mjmlio/mjml/blob/master/packages/mjml-cli/README.md) for more info | NA
mjmlConfigPath | string | The path or directory of the `.mjmlconfig` file (for custom components use) | `process.cwd()`
useMjmlConfigOptions | Allows to use the `options` attribute from `.mjmlconfig` file | false
## Client-side (in browser)
```javascript
var mjml2html = require('mjml-browser')
/*
Compile a mjml string
*/
var htmlOutput = mjml2html(`
Hello World!
`, options)
/*
Print the responsive HTML generated and MJML errors if any
*/
console.log(htmlOutput)
```
## API
A free-to-use MJML API is available to make it easy to integrate MJML in your application. Head over [here](https://mjml.io/api) to learn more about the API.
# MJML Slack
MJML wouldn't be as cool without its amazing community. Head over the [Community Slack](https://join.slack.com/t/mjml/shared_invite/zt-gqmwfwmr-kPBnfuuB7wof5httaTcXxg) to meet fellow MJML'ers.
# Contributors
- [Maxime](https://github.com/iRyusa)
- [Nicolas](https://github.com/ngarnier)
- [Cedric](https://github.com/kmcb777)
- [Loeck](https://github.com/lohek)
- [Robin](https://github.com/robink)
- [Guillaume](https://github.com/GuillaumeBadi)
- [Meriadec](https://github.com/meriadec)
- [Arnaud](https://github.com/arnaudbreton)
- [HTeuMeuLeu](https://github.com/hteumeuleu)
- [Emmanuel Payet](https://github.com/epayet)
- [Matthieu](https://github.com/swibge)
- [Rogier](https://github.com/rogierslag)