mjmlio / mjml Goto Github PK
View Code? Open in Web Editor NEWMJML: the only framework that makes responsive-email easy
Home Page: https://mjml.io
License: MIT License
MJML: the only framework that makes responsive-email easy
Home Page: https://mjml.io
License: MIT License
<mj-body>
<mj-section>
<mj-column >
<mj-divider border-color="#F45E43"></mj-divider>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh lorem, fermentum sit amet leo sed, consectetur egestas ligula. </mj-text>
</mj-column>
</mj-section>
<mj-section>
<mj-column >
<mj-divider border-color="#F45E43"></mj-divider>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hoj</mj-text>
</mj-column>
</mj-section>
</mj-body>
vs
<mj-body>
<mj-section>
<mj-column >
<mj-divider border-color="#F45E43"></mj-divider>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh lorem, fermentum sit amet leo sed, consectetur egestas ligula. </mj-text>
</mj-column>
<mj-column >
<mj-divider border-color="#F45E43"></mj-divider>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hoj</mj-text>
</mj-column>
</mj-section>
<mj-section>
<mj-column >
<mj-divider border-color="#F45E43"></mj-divider>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hoj</mj-text>
</mj-column>
<mj-column >
<mj-divider border-color="#F45E43"></mj-divider>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh lorem, fermentum sit amet leo sed, consectetur egestas ligula.</mj-text>
</mj-column>
</mj-section>
</mj-body>
Removing the redundant <mj-column > </mj-column >
in the first example results in aligned text but there is no reason why a single column should behave different from multi column.
Adding width=100% to the column has the desired effect. This should be the default for a single column.
New features added in 1.1 are not visible on the website's documentation (namely, mj-column's background-color, certainly others)
Bulletproof buttons using the same principle as https://buttons.cm/
For font sizes, paddings and such of standard components, add a column default that give the default value of the attribute
I am using the template generated by mjml --init-component product
. When I try to render a MJMLElement (default generated render method), I have an error. Here is the render method:
render() {
const css = this.getStyles(),
content = 'Hello World!'
return (
<MjText style={ css }>
{ content }
</MjText>
)
}
The error is when running the command DEBUG="mjml-engine/mjml2html" babel-node app.js
mjml-engine/mjml2html Start parsing content +0ms
mjml-engine/mjml2html Content parsed. +8ms
mjml-engine/mjml2html Start rendering +1ms
mjml-engine/mjml2html Create root React element +0ms
mjml-engine/mjml2html Render to static markup +0ms
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <td>. See MJMLColumnElement > td > Product > MJMLElement > MJMLColumnElement > tr.
Warning: React.renderToStaticMarkup is deprecated. Please use ReactDOMServer.renderToStaticMarkup from require('react-dom/server') instead.
/Users/c2249657/WebstormProjects/responsive-email-desssipi/node_modules/fbjs/lib/invariant.js:46
throw error;
^
Invariant Violation: renderToStaticMarkup(): You must pass a valid ReactElement.
at invariant (/Users/c2249657/WebstormProjects/responsive-email-desssipi/node_modules/fbjs/lib/invariant.js:39:15)
at Object.renderToStaticMarkup (/Users/c2249657/WebstormProjects/responsive-email-desssipi/node_modules/react/lib/ReactServerRendering.js:59:83)
at Object.newFn [as renderToStaticMarkup] (/Users/c2249657/WebstormProjects/responsive-email-desssipi/node_modules/react/lib/deprecated.js:38:17)
at MJMLElement.mjContent (/Users/c2249657/WebstormProjects/responsive-email-desssipi/node_modules/mjml/lib/components/decorators/MJMLElement.js:102:96)
at Text.render (/Users/c2249657/WebstormProjects/responsive-email-desssipi/node_modules/mjml/lib/components/Text.js:85:44)
at [object Object].ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (/Users/c2249657/WebstormProjects/responsive-email-desssipi/node_modules/react/lib/ReactCompositeComponent.js:587:34)
at [object Object].ReactCompositeComponentMixin._renderValidatedComponent (/Users/c2249657/WebstormProjects/responsive-email-desssipi/node_modules/react/lib/ReactCompositeComponent.js:607:32)
at [object Object].wrapper [as _renderValidatedComponent] (/Users/c2249657/WebstormProjects/responsive-email-desssipi/node_modules/react/lib/ReactPerf.js:66:21)
at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/c2249657/WebstormProjects/responsive-email-desssipi/node_modules/react/lib/ReactCompositeComponent.js:220:30)
at [object Object].wrapper [as mountComponent] (/Users/c2249657/WebstormProjects/responsive-email-desssipi/node_modules/react/lib/ReactPerf.js:66:21)
Here is my app.js:
import Product from './Product'
import mjml from 'mjml'
/*
Compile an mjml string
*/
const htmlOutput = mjml.mjml2html(`<mj-body>
<mj-section>
<mj-column>
<mj-product></mj-product>
</mj-column>
</mj-section>
</mj-body>
`)
/*
Print the responsive HTML generated
*/
console.log(htmlOutput);
However, when I render simple html like this:
render() {
return (
<span>test</span>
)
}
It is working fine. I cannot see why I cannot render MJMLElements like MjText but I can render simple html :/
Thanks
Default in section is set to "top center" why is not working with background-position="X Y" ? Like that.
background: 'url(${mjAttribute('background-url')}) ${mjAttribute('background-position')} / ${mjAttribute('background-size') || ''} ${mjAttribute('background-repeat') || ''}'
Would be fine if we will have possibility to set order of links. By now, all links are rendered in default order.
Maybe something like order parameter?
<mj-social order="google|facebook|pinterest" />
Although it might not be your intention, any email sent out will 'phone home' to one of your servers. Please allow a base-url
attribute for mj-social
tags and include the icons in this repo.
entities seem to get stripped and replaced with a space when rendering html.
If I wrap it in <mj-raw>
, the space disappears entirely.
Doesn't seem to be anything on linking to different styles or how to change any head values in the documentation?
Hi,
By default, Mailchimp can't support @import
webfont directly in a <style>
tag :
It works by doing <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
instead.
Default compiling from mjml need that the html files must be edited to be Mailchimp compatible :(
Hello,
The --watch option seems to crash after some saves on my mjml file.
> mjml --watch test.mjml --output test.html
produces:
Error: [MJMLError] EmptyMJMLError: Null element found in mjmlElementParser at MJMLError.Error (native)
at new MJMLError (C:[...]\AppData\Roaming\npm\node_modules\mjml\lib\Error.js:24:85)
at Object.mjmlElementParser (C:[...]\AppData\Roaming\npm\node_modules\mjml\lib\documentParser.js:24:13)
at documentParser (C:[...]\AppData\Roaming\npm\node_modules\mjml\lib\documentParser.js:65:22)
at mjml2html (C:[...]\AppData\Roaming\npm\node_modules\mjml\lib\mjml2html.js:49:52)
at C:[...]\AppData\Roaming\npm\node_modules\mjml\lib\cli.js:88:12
No problem with:
> mjml -r test.mjml --output test.html
I'm using Node v4.3.0, NPM v2.14.12 & MJML v1.0.3
Thank you
Hi,
I can't set a padding on <mj-column>
If i got 3 columns of 33%, the only way to put a padding between columns is to apply this padding on each children of this column.
What I do (trying to apply a padding on whole col):
<mj-body background-color="grey">
<mj-section>
<mj-column width="33%" padding="50px">
<mj-text align="left" color="#EEE" font-family="roboto" align="center">test title lorem ipsum dolor lorem ipsum dolor</mj-text>
<mj-text align="left" color="#EEE" font-family="roboto" align="center">lorem ipsum dolor sit amet consectetur lorem ipsum </mj-text>
</mj-column>
<mj-column width="33%" padding="50px">
<mj-text align="left" color="#EEE" font-family="roboto" align="center">test title lorem ipsum dolor lorem ipsum dolor</mj-text>
<mj-text align="left" color="#EEE" font-family="roboto" align="center">lorem ipsum dolor sit amet consectetur lorem ipsum </mj-text>
</mj-column>
<mj-column width="33%" padding="50px">
<mj-text align="left" color="#EEE" font-family="roboto" align="center">test title lorem ipsum dolor lorem ipsum dolor</mj-text>
<mj-text align="left" color="#EEE" font-family="roboto" align="center">lorem ipsum dolor sit amet consectetur lorem ipsum </mj-text>
</mj-column>
</mj-section>
</mj-body>
What I get with padding on <mj-column>
:
What I get width padding on each children of <mj-column>
(each <mj-text>
):
Padding on <mj-column>
is not supported? or it's the default padding of <mj-text>
?
If i put padding-left & padding-right at 0px on each <mj-text>
, I can see again less padding:
So I think putting default padding is not a good idea.
If we set a padding on a component with no padding on his children, we've to apply it, what do u think about this approach?
Thank
Hello,
Mandrill and Mailchimp support Handlebars template syntax, could we imagine a command like mjml -r template.mjml -o template.html --syntax=handlebars
or mjml -r template.mjml -o template.html --syntax=mailchimp
?
Example:
Links:
Thank u, Mjml is great!
Really liking the look of mjml so far.
One immediate question I have though is, with the most basic MJML template I can make, there's certain styles cascading which I haven't specified, such as the font stack for components seeming being set to Ubuntu first.
I may be missing something fundamental — is there a way to reset certain stylistic aspects common to the whole mjml file, so I don't have to specify font-family as Helvetica on every <mjml-text>
component in a file?
Add possibility to add a background-color
on Column (or MJMLColumnElement ?)
Would be nice to allow font-family in , as otherwise we cannot have the same font on all the document
The section element has padding-left
, padding-right
etc but no padding
which makes it slightly annoying having to set the padding on all 4 sides.
Code:
<mj-body>
<mj-section>
<mj-column >
<mj-divider border-color="#F45E43"></mj-divider>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">World</mj-text>
</mj-column>
<mj-column >
<mj-divider border-color="#F45E43"></mj-divider>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello</mj-text>
</mj-column>
<mj-column >
<mj-divider border-color="#F45E43"></mj-divider>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">H</mj-text>
</mj-column>
<mj-column >
<mj-divider border-color="#F45E43"></mj-divider>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">W2</mj-text>
</mj-column>
<mj-column >
<mj-divider border-color="#F45E43"></mj-divider>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello crazy World2</mj-text>
</mj-column>
</mj-section>
</mj-body>
Remove 1 column and all is ok. If 4 columns is the limit it should be documented.
I looked through the documentation and could not find a component for a link.
would you just put it inside the component?
would it be RAW?
I basically want a simple
<a href="google.com" target="_blank"> google </a>
I am getting this error. Something to do with React.
Warning: React.renderToStaticMarkup is deprecated. Please use ReactDOMServer.renderToStaticMarkup from require('react-dom/server') instead.
Invariant Violation: renderToStaticMarkup(): You must pass a valid ReactElement.
at invariant (/usr/local/lib/node_modules/mjml/node_modules/fbjs/lib/invariant.js:39:15)
at Object.renderToStaticMarkup (/usr/local/lib/node_modules/mjml/node_modules/react/lib/ReactServerRendering.js:59:83)
at Object.newFn as renderToStaticMarkup
at MJMLElement.mjContent (/usr/local/lib/node_modules/mjml/lib/components/decorators/MJMLElement.js:102:96)
at Text.render (/usr/local/lib/node_modules/mjml/lib/components/Text.js:85:44)
at ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (/usr/local/lib/node_modules/mjml/node_modules/react/lib/ReactCompositeComponent.js:587:34)
at ReactCompositeComponentMixin._renderValidatedComponent (/usr/local/lib/node_modules/mjml/node_modules/react/lib/ReactCompositeComponent.js:607:32)
at wrapper as _renderValidatedComponent
at ReactCompositeComponentMixin.mountComponent (/usr/local/lib/node_modules/mjml/node_modules/react/lib/ReactCompositeComponent.js:220:30)
at wrapper [as mountComponent] (/usr/local/lib/node_modules/mjml/node_modules/react/lib/ReactPerf.js:66:21)
When I'm using a with a background-url and a repeat rule, the rendered CSS is broken.
source :
<mj-section
background-repeat="repeat-x"
background-url="http://www.synbioz.com/images/articles/background_bleu.gif">
styles rendered :
width:100%;
font-size:0px;
background:url(http://www.synbioz.com/images/articles/background_bleu.gif) top center / repeat-x;
See the "/" caraxtere has nothing to do here and break the rule .
https://mjml.io/try-it-live/kili
I changed http://placehold.it/250x150 to http://placehold.it/600x400. The image does not scale to device width in Mobile View. I expect it to scale to fit without horizontal scroll.
It would be cool to be able to assign different widths for elements for different breakpoints.
For example if I have three columns on desktop but I want them to be three 1 columns on mobile.
Maybe with m-width and t-width attributes that compile to media queries?
DylanMBPr-2:/ dylanet$ mjml -r input.mjml
TypeError: undefined is not a function
at /usr/local/lib/node_modules/mjml/lib/cli.js:71:23
at /usr/local/lib/node_modules/mjml/lib/cli.js:43:17
at /usr/local/lib/node_modules/mjml/lib/cli.js:42:12
at Object.render (/usr/local/lib/node_modules/mjml/lib/cli.js:85:3)
at main (/usr/local/lib/node_modules/mjml/lib/mjml:35:28)
at Object. (/usr/local/lib/node_modules/mjml/lib/mjml:52:3)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
DylanMBPr-2:/ dylanet$
Hi I was wondering if there is any solution to modify the default width of the email. Because for now it's 600px wide but I want a 550px wide email.
When doing a parse error, the debug does not tell which line from the mjml file is concerned :
➜ mjmltest mjml -r test.mjml
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <td>. See Section > td > MJMLElement > MJMLColumnElement > tr.
There's a way to edit the padding left and right with mjml? 25px by default had broked my design :/
This is a future release? 👍
In my Litmus testing I found that in:
Polymail
Outlook Web App
The columns that were meant to be 50% width were stacking as 100% columns.
Error: ENOENT: no such file or directory, access 'C:\Users\NAME\Desktop\Reponsive'
at Error (native)
When attempting to compile my .mjml file Node throws this error. Any idea why this could be happening?
Great tool btw 😄
MJML to reproduce :
<mj-body>
<mj-section background-color="#F45E43" padding-top="0" padding-bottom="0" padding-left="0" padding-right="0">
<mj-column width="300">
<mj-image padding-top="0" padding-bottom="0" padding-left="0" padding-right="0" src="https://upload.wikimedia.org/wikipedia/commons/8/8c/Clouds_edited.jpg"></mj-image>
</mj-column>
<mj-column width="300">
<mj-text font-size="22" color="white" font-family="helvetica">
Greatness of layout
</mj-text>
<mj-text color="white" font-family="helvetica">
Simple layout with 10 line of MJML
</mj-text>
</mj-column>
</mj-section>
</mj-body>
Hi,
IMO current "social component" servers for sharing, therefore it should be renamed to "social share".
Then there should be new "social follow" component with links to channels like Twitter, Youtube, Website, Pinterest, Instagram, etc....
Would be happy to contribute with "social follow" component.
In order to make perfect pill-shaped buttons, the height should be either explicit, or the border-radius shoud allow % units.
I'm using server-side react to render emails and I was wondering if there was an easy way to use the mjml components as standard react components.
Basically, can I do this:
React.createClass({
render() {
return (
<MjBody>
// mj-sections go here....
</MjBody
);
}
});
After installing MJML globally via npm, I get the following error message when running any command in the cli:
$ mjml -r input.mjml
ReferenceError: engine is not defined
at /usr/local/lib/node_modules/mjml/lib/cli.js:86:12
I do not get any sort of error messages while installing. I also tried running the installer with sudo and the cli commands with sudo and both situations reproduced the error above.
Hi guyz,
I got a problem with <mj-divider>
.
I want a separator (a kind of border in fact) with no spaces or margin around.
Even if I set a margin & padding at 0px on <mj-divider>
and on <mj-section>
, the generated HTML code is wrapped inside a <p>
with 13px margin: 13px 0;
What i do:
<mj-body>
<mj-section background-color="grey">
<mj-column>
<mj-image width="100" src="/assets/img/logo-small.png"></mj-image>
</mj-column>
</mj-section>
<mj-section margin-top="0px" margin-bottom="0" padding-top="0px" padding-left="0px" padding-bottom="0px" padding-right="0px">
<mj-divider border-color="#F45E43" padding-top="0px" padding-left="0px" padding-bottom="0px" padding-right="0px"></mj-divider>
</mj-section>
</mj-body>
What I expected:
What I get:
Maybe I miss something but i didn't see any CSS reset.
In general, I understand that the tool was initially designed to facilitate the building of newsletter but I regret that we don't get a reset mode.Override each padding of each component is a bit tedious.
What do you think about that?
Thanks
When using the template generated by the command mjml --init-component product
, it generates this:
import {
elements,
registerElement,
MJMLColumnElement
} from 'mjml'
...
@MJMLColumnElement({
tagName: 'mj-product',
content: ' ',
/*
* These are your default css attributes
*/
attributes: {
'color': '#424242',
'font-family': 'Helvetica',
'margin-top': '10px'
}
})
class Product extends Component {
...
}
When I do babel-node Product.js
, I have this error:
var Product = (_dec = (0, _mjml.MJMLColumnElement)({
^
TypeError: (0 , _mjml.MJMLColumnElement) is not a function
The only way I got it to work was to change
import {
elements,
registerElement,
MJMLColumnElement
} from 'mjml'
to this
import {
elements,
registerElement
} from 'mjml'
var MJMLColumnElement = require('mjml').MJMLColumnElement.default
I believe this has something to do with the babel decorator plugin and es6 imports, I tried with transform-decorators-legacy
and transform-decorators
, same result.
What are your thoughts on this? Thanks
try following code and look at the image size:
<mj-body>
<mj-section>
<mj-column width="20%">
<mj-image src="/assets/img/logo-small.png"></mj-image>
<mj-divider border-color="#F45E43"></mj-divider>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World</mj-text>
</mj-column>
<mj-column width="60%">
<mj-image src="/assets/img/logo-small.png"></mj-image>
<mj-divider border-color="#F45E43"></mj-divider>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World2</mj-text>
</mj-column>
</mj-section>
</mj-body>
Try <mj-column width="400">
to see the image blow up
try following code:
<mj-body>
<mj-section>
<mj-column>
<mj-image src="https://fr.mailjet.com/wp-content/uploads/2015/09/personnalisation.png"></mj-image>
<mj-divider border-color="#F45E43"></mj-divider>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World test test test test test test test test test test test test test test test test</mj-text>
</mj-column>
<mj-column>
<mj-image src="https://fr.mailjet.com/wp-content/uploads/2015/09/personnalisation.png"></mj-image>
<mj-divider border-color="#F45E43"></mj-divider>
<mj-text font-size="20px" color="#F45E43" font-family="helvetica">Hello World test test test test test test test test test test test test test test test test</mj-text>
</mj-column>
</mj-section>
</mj-body>
I've seen this being mentioned on Hacker News, but I'm wondering when it will be ready ;-) I'm about to layout some templates that need this functionality. Thanks!
Hey just saw this project, looks like a great start and I'm planning on trying it out later. Noticed in the MJML-tags you use inline styles. Was wondering if you considered something like Radium to keep it cleaner.
Hope to contribute/use this soon!
(with Chrome 48.0.2564.97 (64-bit), on Mac OsX El Capitan)
As seen on your site template :
<!-- Side image -->
<mj-section background-color="white">
<mj-column>
<mj-image width="200" src="https://designspell.files.wordpress.com/2012/01/sciolino-paris-bw.jpg"></mj-image>
</mj-column>
<mj-column>
<mj-text font-style="italic"
font-size="20"
font-family="Helvetica Neue"
color="#626262">
Find amazing places
</mj-text>
<mj-text color="#525252">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum enim eget magna efficitur, eu semper augue semper. Aliquam erat volutpat. Cras id dui lectus. Vestibulum sed finibus lectus.</mj-text>
</mj-column>
</mj-section>
Does not render well in gmail :
Work in that case (small texts in columns) :
<mj-section>
<mj-column>
<mj-text align="center">
foo
</mj-text>
</mj-column>
<mj-column>
<mj-text align="center">
bar
</mj-text>
</mj-column>
</mj-section>
but not with more text :
<mj-section>
<mj-column>
<mj-text align="center">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</mj-text>
</mj-column>
<mj-column>
<mj-text align="center">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</mj-text>
</mj-column>
</mj-section>
Hi,
I am building up a newsletter frame, but I am having some issues with the custom components.
I want to create a simple title component to start with. But it doesn't seem to work.
I execute
mjml --init-component title
This creates a .js file name Title. Until this point everything works as expected.
From this point if I put a <mj-title>
component in my template I expect it to be valid and compiled. But instead I get
Error: [MJMLError] UnknownMJMLElement: Could not find element for : mj-title at MJMLError.Error (native) at new MJMLError (/usr/local/lib/node_modules/mjml/lib/Error.js:24:85) at /usr/local/lib/node_modules/mjml/lib/components/decorators/MJMLElement.js:193:21
I can't seem to figure out how the new component get's registered with the basic one's.
Thanks
outlook?
gmail?
ios?
etc...
thanks!
Pulsar:mjml-demo andrea$ mjml --watch index.mjml -o index.html
/Users/andrea/.npm-packages/lib/node_modules/mjml/lib/cli.js:42
return new Promise(function (resolve, reject) {
^
ReferenceError: Promise is not defined
at /Users/andrea/.npm-packages/lib/node_modules/mjml/lib/cli.js:42:16
at render (/Users/andrea/.npm-packages/lib/node_modules/mjml/lib/cli.js:85:3)
at FSWatcher. (/Users/andrea/.npm-packages/lib/node_modules/mjml/lib/cli.js:101:12)
at FSWatcher.EventEmitter.emit (events.js:98:17)
at FSEvent.FSWatcher._handle.onchange (fs.js:1039:12)
We'd like to integrate MJML with EJS. It seems more efficient to generate HTML from MJML only once and then let EJS put in any dynamic text - rather than generating HTML from MJML for every single email.
I thought that using mj-raw component should let us embed EJS code - but it doesn't get rendered properly, i.e.:
<mj-raw><% if (undefined) {} %></mj-raw>
renders as
<!--[if mso]>
<table border="0" cellpadding="0" cellspacing="0" width="600" align="center" style="width:600px;"><tr><td>
<![endif]--><% if="" (undefined)="" {}="" %=""></%><!--[if mso]>
</td></tr></table>
<![endif]-->
Two issues here:
< >
etc. doesn't help)A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.