Mjml: Rendering Components without a Body

Created on 25 Mar 2016 · 8Comments · Source: mjmlio/mjml

Hey guys, loving this so far!

Out of curiosity, is there a way to render individual components, without a body?

For instance, right now for a component I can do something like:

<mj-body>
  <mj-section>
    <mj-text>
      Hi!
    </mj-text>
  </mj-section>
</mj-body>

and then grab everything in between the <div> tags inside the <body>, save that to a variable, and repeat. Finally, I do a render of a block of mjml with _all_ of my possible components, so that I have a header that addresses all of the columns, etc. and wrap that around all of my other content. Which works. Which is great! But from an efficiency standpoint, not so much. What I'd like to be able to render is from:

<mj-section>
  <mj-text>
  </mj-text>
<mj-section>

so I'm not stripping out the body/header on each render.

It seems like there are references/dependencies on the parent elements that may prevent this right now? Which is why the Null element found in mjmlElementParser error is triggered?

Thanks in advance for you thoughts here!

Discussion

Source

arist0tl3

👍2

Most helpful comment

Hi !

From MJML 2.0 "core" have no dependencies to mj-container, known as mj-body in 1.X.
So now you can render

<mjml>
  <mj-body>
    <mj-text>hello</mj-text>
  </mj-body>
</mjml>

iRyusa on 29 Apr 2016

👍3

All 8 comments

in fact, there are dependencies: if you check the generated html, mainly css classes and stuff.

I think this proposal may cover what you asked: #78 , so please check it and leave a thumb up if it would work for you

jquinter on 28 Mar 2016

@jquinter Thanks for the response, I thumbed that thread -- looks interesting!

arist0tl3 on 28 Mar 2016

👍1

Hi @arist0tl3, thanks for sharing. Thanks @jquinter for helping here!

The body, acting as a root for the document is indeed required and we won't be able to bypass it. Also, in order to provide you with a responsive HTML code, we need the full HTML generated.

Since each component is actually a ReactJS one, I believe there is a way to render it individually through React directly, allowing you just to grab the final HTML, and mix everything later on including the full body we generate.

May I ask what is your exact use-case here, in order to see if there is not another solution, already implemented to help you here?

Thanks!

arnaudbreton on 29 Mar 2016

👍1

@arnaudbreton Thanks for the response!

I agree that my use is likely a bit of an edge case and probably wouldn't justify putting in a considerable effort. That being said, though:

A current project is building out a way for users to create newsletters, transactional emails, etc. Right now, my workflow looks like:

1) Designer comes up with a new theme/template
2) I take each of our components and render them individually (mjml->html)
3) I put all of the components together and render them to get the header (mjml->html)
4) I place the placeholder variables for the content in the html-rendered components and kind of piece things together.

I recently got the parser working in my app (built in Meteor), which is cool! But, when users are making adjustments at the component level, it requires me to re-build and re-render the entire email, rather than just re-rendering the component with the adjustments.

I hope this makes sense? As I said, I think this is likely a complicated edge case, but I wanted to at least ask before I started exploring some other options (or continuing with my current situation).

Thanks!

arist0tl3 on 29 Mar 2016

Hi,

I think I also need this kind of feature.

In my app I include sometime a part in many emails.

Actually I render my part and I only take the html (without the body, header...). And it's sometimes hard to find the html I need.

Regards,

groomain on 19 Apr 2016

Hi !

From MJML 2.0 "core" have no dependencies to mj-container, known as mj-body in 1.X.
So now you can render

<mjml>
  <mj-body>
    <mj-text>hello</mj-text>
  </mj-body>
</mjml>

iRyusa on 29 Apr 2016

👍3

@arnaudbreton could you take a look at the use case presented in https://github.com/sighmon/mjml-rails/issues/4?

We can't use the extension .mjml in partials nor in files included by layouts. The way Rails handle these is applying the mjml handler (a call to mjml bin in the template file), includes it's result in the layout and call the mjml handler in the layout again.

I already figured out a workaround, that involves changing the file extension of partials/templates, but if we could use the .mjml extension would be awesome.

Maybe only have mjml render partial components is not sufficient due to how Rails handle this rendering. This gist explain the ideal process: https://gist.github.com/cerdiogenes/3d5d0ce1290c6d76d6abc8d2ef0575cd

But mjml will ignore the HTML used in the second render phase. I'm posting just to have a feedback if it's feasibly: render partial components and output HTML content as is, instead of ignore.

If this is something interesting for the project I would love to receive some comments of how this can be accomplished so I can find my way easier to make a pull-request ;-)

kdiogenes on 9 Aug 2016

@cerdiogenes I believe that partial and variables should be handled by erb. The only feature close to partials is mj-include but it doesn't support variable ( by choice, not a feature missing ). So erb act as a preprocessor and build the final mjml document with layout + content from your email, and that's how it need to be done

iRyusa on 9 Aug 2016

Was this page helpful?

0 / 5 - 0 ratings