A powerful mjml component that embed the
{{ handlebars }}
syntax in your mjml files.
- Create and reuse UI components for emailing
- Create advanced layout logic
- Easily reusable for emails on steroids.
<mj-hydrate> needs:
- a .mjml file to include refered with the
path
attribute - data to process the handlebars tag (remember to use {{{ syntax }}} to avoid HTML escaping).
You can pass data in many ways:
<!-- index.mjml -->
<mj-hydrate path="path/to/mjml.mjml">Lorem ipsum...</mj-hydrate>
<!-- path/to/mjml.mjml -->
<mj-text>{{{mjHydrateContent}}}</mj-text>
<mj-hydrate path="path/to/mjml.mjml">Lorem ipsum...</mj-hydrate>
and use in path/to/mjml.mjm
==> <mj-text>Lorem ipsum...</mj-text>
see Define data section
<mj-hydrate path="path/to/mjml.mjml"></mj-hydrate>
and use in path/to/mjml.mjm
<mj-text>Hello {{user.firstname}} {{user.lastname}}</mj-text>
==> <mj-text>Hello John Doe</mj-text>
<mj-hydrate path="path/to/mjml.mjml" source="user"></mj-hydrate>
and use in path/to/mjml.mjm
<mj-text>Hello {{firstname}} {{lastname}}</mj-text>
==> <mj-text>Hello John Doe</mj-text>
<mj-hydrate path="path/to/mjml.mjml" firstname="Jane" lastname="Doh"></mj-hydrate>
and use in path/to/mjml.mjm
<mj-text>Hello {{firstname}} {{lastname}}</mj-text>
==> <mj-text>Hello Jane Doh</mj-text>
<mj-hydrate path="path/to/mjml.mjml" mapping="key:value;foo:baz;"></mj-hydrate>
and use in path/to/mjml.mjm
<mj-text>{{key}} / {{foo}}</mj-text>
==> <mj-text>value / baz</mj-text>
<mj-hydrate path="path/to/mjml.mjml"></mj-hydrate>
and use in path/to/mjml.mjm
<mj-text>This is a title</mj-text>
<mj-hydrate path="{{layout.header}}"></mj-hydrate>
==>
<mj-text>This is a title</mj-text>
<mj-section>... HEADER ...</mj-section>
Use simple quote around attribute value
The value of the attribute will be JSON.parse()
, the value needs to be valid JSON (with double-quoted property).
If this method throws an error, the value of the attribute will be used as string.
<mj-hydrate path="path/to/mjml.mjml" myJson='{"key": "a json value", "number":42}'></mj-hydrate>
and use in path/to/mjml.mjm
<mj-text>{{key}} // {{number}}</mj-text>
==> <mj-text>a json value // 42</mj-text>
# Define data only in nodejs
Before executing the mjml2html(...)
method, add some data to the context.
This is only available if you run the nodejs version. Not available in mjml app.
MjHydrate.setData({
user: {
firstname: "John",
lastname: "Doe",
email: "[email protected]"
},
layout: {
header: "inc/header.mjml",
footer: "inc/footer.mjml",
}
})
mjml2html(...)
<mj-hydrate> have some limitations as it works like an <mj-include> but it's not treated as one by the MJML XML Parser.
Then each <mj-hydrate> tag is treated by the parser in the XML flow, not before the other tags.
The MJML XML Parser seems to process the <mj-include> tags before the other tag.
- bad computation of <mj-column> width. To resolve the issue, specify the "width" attribute.