Mjml: [proposal] import tag

[luizbills]

Any plans to an import tag?

<mj-import file="some-template.mjml"></mj-import>
<!-- or -->
<mj-import template="some-template.mjml"></mj-import>

<!-- or -->
<mj-include template="some-template.mjml"></mj-include>

useful to maintain a large template, large raw parts, reusable blocks, etc...

[peckrob]

+1. Was literally just trying to figure out how to do this!

[arnaudbreton]

Very interesting idea, thanks @luizbills for sharing.

Do you expect this tag to include the other template in place exactly where wrote in the document?

Personally, I prefer mj-include for the name

[luizbills]

Yes, @arnaudbreton
Like this:

<mj-body>
    <mj-include template="my-header.mjml" ></mj-include>
    <mj-include template="my-content-1.mjml" ></mj-include>
    <mj-include template="my-content-2.mjml" ></mj-include>
    <mj-include template="my-footer.mjml" ></mj-include>
</mj-body>

Maybe will be interesting too, if has template arguments

<mj-include 
    template="my-header.mjml"
    name="My Company"
    image="https://domain.com/header-image.png"
></mj-include>

<!-- inside my-header.mjml -->
<mj-section>
  <mj-section>
    <mj-column>
      <mj-image src="{image}">
      </mj-image>
    </mj-column>
  </mj-section>
  <mj-section>
    <mj-column>
      <mj-text>{name}</mj-text>
    </mj-column>
  </mj-section>
</mj-section>

[patrickguevara]

This would be so helpful!

[arnaudbreton]

:+1:. I don't think going into templates arguments is necessary. The way I see it is that MJML is focused on producing responsive HTML, not really templating.

In that case, I would expect my-header.mjml to contain MJML with templating tags (using the templating engine of your choice, handlebarsJS, Twig, Mailjet Templating Language, etc):

<mj-text>
{{foobar}}
</mj-text>

Which translates to a final HTML output, where the templating tags are preserved. Next, you can pass the HTML in your templating engine to get the final output. I agree it is a heavier process to setup, but I love also this separation of concerns.

We would however love to review any contribution bringing all of that together in a single, easy to use process ;).

What do you think?

[peckrob]

@arnaudbreton Yes, this is pretty much exactly what I'm currently doing with Laravel Blade template tags.

What I ended up doing was creating a master MJML email with a {{content}} block, and using Blade to fill in the {{content}} with simple HTML. This is less than ideal, primarily because I cannot use MJML outside of the master template. Anything used in the content has to be kept very simple.

With an include tag, you could use partials to generate an entire email for parsing using Blade. So I could have a header and footer partial, include them at the top and bottom and use MJML in the body to have rich content. Like so:

<mj-body>
  <mj-include template="header.mjml"></mj-include>
  <mj-section>
    {{ $name }}
  </mj-section>
  <mj-include template="footer.mjml"></mj-include>
</mj-body>

[groomain]

Any advance on this feature? 👍

[nitindhar7]

echoing @groomain -- any updates on this?

[arnaudbreton]

Hey guys, sorry for the delayed answer. Unfortunately, no progress on that yet since we're busy finalising MJML 2.0 which will be released in the coming days (more to come about that, please subscribe to our newsletters via https://mjml.io to be informed when it's out).

We'll keep you posted on our progress in the coming weeks. Meanwhile, we would love to review a contribution from you for this feature.

Best.

[yshterev]

Hi guys,
I did something similar for an in-house project. I called it mjml-inject. I have been using it for a week and so far no problems. Let me know if it is any good and what would be the best way to integrate it with mjml. Or it can work as a gulp plugin maybe ? ..

[iRyusa]

Hi there, mj-include will be added in 2.3 !

[iRyusa]

And it is now released ! Documentation will be available on the website tomorrow or check it here : https://github.com/mjmlio/mjml/blob/master/doc/guide.md#mj-include