You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
> Compile the file and output the result in `a.html`
70
77
71
-
```bash
72
-
78
+
```bash
73
79
$> mjml -r input.mjml
74
-
75
80
```
76
81
77
82
> Redirect the result to a file
78
83
79
-
```bash
80
-
84
+
```bash
81
85
$> mjml -r input.mjml -o output.html
82
-
83
86
```
84
87
85
88
> Watch a file and compile every time the file changes
86
89
87
-
```bash
88
-
90
+
```bash
89
91
$> mjml -w input.mjml -o output.html
90
-
91
92
```
92
93
93
-
<br>
94
-
### Inside NodeJs
94
+
### Inside Node.js
95
95
96
-
```javascript
97
-
98
-
importmjmlfrom'mjml'
96
+
```javascript
97
+
import { mjml2html } from'mjml'
99
98
100
99
/*
101
100
Compile an mjml string
102
101
*/
103
-
consthtmlOutput=mjml.mjml2html(`<mj-body>
102
+
consthtmlOutput=mjml2html(`<mj-body>
104
103
<mj-section>
105
104
<mj-column>
106
105
<mj-text>
107
106
Hello World!
108
107
</mj-text>
109
108
</mj-column>
110
109
</mj-section>
111
-
</mj-body>
112
-
`)
110
+
</mj-body>`)
113
111
114
112
/*
115
113
Print the responsive HTML generated
116
114
*/
117
-
console.log(htmlOutput);
115
+
console.log(htmlOutput)
116
+
```
117
+
118
+
### In your browser
119
+
120
+
```html
121
+
<html>
122
+
<head>
123
+
<scriptsrc="dist/mjml.js"></script>
124
+
<script>
125
+
/*
126
+
Compile an mjml string
127
+
*/
128
+
var htmlOutput =mjml.mjml2html('<mj-body>'+
129
+
'<mj-section>'+
130
+
'<mj-column>'+
131
+
'<mj-text>'+
132
+
'Hello World!'+
133
+
'</mj-text>'+
134
+
'</mj-column>'+
135
+
'</mj-section>'+
136
+
'</mj-body>')
137
+
138
+
/*
139
+
Print the responsive HTML generated
140
+
*/
141
+
console.log(htmlOutput)
142
+
</script>
143
+
</head>
144
+
<body>
145
+
146
+
</body>
147
+
</html>
118
148
```
119
149
120
150
### Create your component
121
151
122
152
> Issue the following in your terminal
123
153
124
-
```bash
125
-
154
+
```bash
126
155
$> mjml --init-component <name of your component>
127
156
128
157
# If your component cannot contain anything else than text:
@@ -135,8 +164,6 @@ $> mjml --init-component <name of you component> -e
135
164
It will create a basic component template in a `.js` file. Follow the instructions provided in the file
136
165
and read more about custom components in the documentation
137
166
138
-
<br>
139
-
140
167
# Try it live
141
168
142
169
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.
0 commit comments