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>

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.

• Documentation MJML
• Documentation {{ handlerbars }}
• Complete exemple