1 | # MJML 4
|
2 |
|
3 | <p style="text-align: center;" >
|
4 | <a href="http://mjml.io" target="_blank">
|
5 | <img width="250"src="https://mjml.io/assets/img/litmus/mjmlbymailjet.png">
|
6 |
|
7 | </a>
|
8 | </p>
|
9 |
|
10 | <p style="text-align: center;" >
|
11 | <a href="https://github.com/mjmlio/mjml/actions">
|
12 | <img src="https://github.com/mjmlio/mjml/workflows/Mjml%20CI/badge.svg?branch=master" alt="github actions">
|
13 | </a>
|
14 | <a href="https://www.codacy.com/app/gbadi/mjml">
|
15 | <img src="https://api.codacy.com/project/badge/grade/575339cb861f4ff4b0dbb3f9e1759c35"/>
|
16 | </a>
|
17 | </p>
|
18 |
|
19 |
|
20 | <p style="text-align: center;" >
|
21 | | <b><a href="#introduction">Introduction</a></b>
|
22 | | <b><a href="#installation">Installation</a></b>
|
23 | | <b><a href="#usage">Usage</a></b>
|
24 | | <b><a href="#contribute">Contribute</a></b> |
|
25 | </p>
|
26 |
|
27 | ---
|
28 |
|
29 | # Introduction
|
30 |
|
31 | `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 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.
|
32 |
|
33 | <p style="text-align: center;" >
|
34 | <a href="http://mjml.io" target="_blank">
|
35 | <img width="75%" src="https://cloud.githubusercontent.com/assets/6558790/12450760/ee034178-bf85-11e5-9dda-98d0c8f9f8d6.png">
|
36 | </a>
|
37 | </p>
|
38 |
|
39 |
|
40 | # Installation
|
41 |
|
42 | 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 <a href="#usage">Usage</a> for other ways to use MJML.
|
43 |
|
44 | ```bash
|
45 | npm install mjml
|
46 | ```
|
47 |
|
48 | # Usage
|
49 |
|
50 | ## Online
|
51 |
|
52 | Don't want to install anything? Use the free online editor!
|
53 |
|
54 | <p style="text-align: center;" >
|
55 | <a href="http://mjml.io/try-it-live" target="_blank"><img src="https://cloud.githubusercontent.com/assets/6558790/12195421/58a40618-b5f7-11e5-9ed3-80463874ab14.png" alt="try it live" width="75%"></a>
|
56 | </p>
|
57 | <br>
|
58 |
|
59 | ## Applications and plugins
|
60 |
|
61 | MJML comes with an ecosystem of tools and plugins, check out:
|
62 | - The [MJML App](https://mjmlio.github.io/mjml-app/) (MJML is included)
|
63 | - [Visual Studio Code plugin](https://github.com/mjmlio/vscode-mjml) (MJML is included)
|
64 | - [Atom plugin](https://atom.io/users/mjmlio) (MJML needs to be installed separately)
|
65 | - [Sublime Text plugin](https://packagecontrol.io/packages/MJML-syntax) (MJML needs to be installed separately)
|
66 |
|
67 | For more tools, check the [Community](https://mjml.io/community) page.
|
68 |
|
69 | ## Command line interface
|
70 |
|
71 | > Compiles the file and outputs the HTML generated in `output.html`
|
72 |
|
73 | ```bash
|
74 | mjml input.mjml -o output.html
|
75 | ```
|
76 |
|
77 | You can pass optional `arguments` to the CLI and combine them.
|
78 |
|
79 | argument | description | default value
|
80 | ---------|--------|--------------
|
81 | `mjml -m [input]` | Migrates a v3 MJML file to the v4 syntax | NA
|
82 | `mjml [input] -o [output]` | Writes the output to [output] | NA
|
83 | `mjml [input] -s` | Writes the output to `stdout` | NA
|
84 | `mjml -w [input]` | Watches the changes made to `[input]` (file or folder) | NA
|
85 | `mjml [input] --config.beautify` | Beautifies the output (`true` or `false`) | true
|
86 | `mjml [input] --config.minify` | Minifies the output (`true` or `false`) | false
|
87 |
|
88 | See [mjml-cli documentation](https://github.com/mjmlio/mjml/blob/master/packages/mjml-cli/README.md) for more information about config options.
|
89 |
|
90 | ## Inside Node.js
|
91 |
|
92 | ```javascript
|
93 | import mjml2html from 'mjml'
|
94 |
|
95 | /*
|
96 | Compile an mjml string
|
97 | */
|
98 | const htmlOutput = mjml2html(`
|
99 | <mjml>
|
100 | <mj-body>
|
101 | <mj-section>
|
102 | <mj-column>
|
103 | <mj-text>
|
104 | Hello World!
|
105 | </mj-text>
|
106 | </mj-column>
|
107 | </mj-section>
|
108 | </mj-body>
|
109 | </mjml>
|
110 | `, options)
|
111 |
|
112 |
|
113 | /*
|
114 | Print the responsive HTML generated and MJML errors if any
|
115 | */
|
116 | console.log(htmlOutput)
|
117 | ```
|
118 |
|
119 | You can pass optional `options` as an object to the `mjml2html` function:
|
120 |
|
121 | option | unit | description | default value
|
122 | -------------|--------|--------------|---------------
|
123 | fonts | object | Default fonts imported in the HTML rendered by HTML | See in [index.js](https://github.com/mjmlio/mjml/blob/master/packages/mjml-core/src/index.js#L36-L44)
|
124 | keepComments | boolean | Option to keep comments in the HTML output | true
|
125 | ignoreIncludes | boolean | Option to ignore mj-includes | false
|
126 | beautify | boolean | Option to beautify the HTML output | false
|
127 | minify | boolean | Option to minify the HTML output | false
|
128 | validationLevel | string | Available values for the [validator](https://github.com/mjmlio/mjml/tree/master/packages/mjml-validator#validating-mjml): 'strict', 'soft', 'skip' | 'soft'
|
129 | filePath | string | Path of file, used for relative paths in mj-includes | '.'
|
130 | preprocessors | array of functions | Preprocessors applied to the xml before parsing. Input must be xml, not json. Functions must be (xml: string) => string | []
|
131 | 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
|
132 | 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
|
133 | mjmlConfigPath | string | The path or directory of the `.mjmlconfig` file (for custom components use) | `process.cwd()`
|
134 | useMjmlConfigOptions | Allows to use the `config` attribute from `.mjmlconfig` file | false
|
135 |
|
136 | ## API
|
137 |
|
138 | 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.
|
139 |
|
140 | # MJML Slack
|
141 |
|
142 | 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.
|