why use mjml?

[fuchao2012]

first, mjml & mjml-react did a great job! save lots of my working time.

while we build a dynamic email(with identity user info, aka, username). react email -> mjml-react -> mjml -> html

so, i just concern why do not transfer react email directly to html react email(with mjml-dsl in react component) -> html

with react server render function, like this API renderToStaticMarkup maybe have some

• render performance improvement
• more easy to use for react developer ( mjml-react did also)

[emmclaughlin]

Hi @fuchao2012. I am not sure I understand what you mean. The render function for v3 of mjml-react is unchanged from V2 and it uses renderToStaticMarkup. We just moved it here to limit the dependencies on the core package export.

We also only leave this render in as an example/suggestion as we recognize it may not work for everybody. It should be possible to implement a way of going from an email built with mjml-react to html that works best for your project.

[fuchao2012]

thx for the quick answer. @emmclaughlin .

i was working on a DSL writen in react, which intend to generate react -> email html, just like mjml do. after finish this, while people can just use react to write email. (you must know the s**k experience of writing table..tr...td)

in mjml

// notice.mjml
<mj-section>
    <mj-column>
        <mj-button>hello world</mj-button>
    </mj-column>
</mj-section>

in react

// notice.tsx
<MjSection>
     <MjColumn>
         <MjButton>Hello world</MjButton>
     </MjColumn>
</MjSection>

above this what mjml-react do

---

i am concern that, while we transfer react email into mjml then into html, Is there room for performance improvement here?

Why don't we just render react as email， Must we transfer into mjml?

this is my question.

take mjml-button as a example in mjml source code.

// mjml-button.js
class MjButton extend BodyComponent {
   styles: xxx,
   attributes: xxx, 
   render(){
       // button in html tables
  }
}

can we just change it into react code like

// react-dsl-button.tsx

const DslButton = (props) => {
   const {styles, attributes} = props;
   return (
       // button in html tables
   )
}

When used this dsl component, again, you can call the react API renderToStaticMarkup directly render the react component as email

Just as what i say, render function like here, still dependent on mjml2html API from mjml, which is not what i want.

Maybe a picture is worth a thousand words？ ；-p

---

Thanks again for your quick reply and look forward to discussing email rendering techniques with you

[fuchao2012]

what i wana do ,just done by the follow guys, they are realy great!

• React Email - A collection of high-quality, unstyled components for creating beautiful emails using React and TypeScript.
• Mailing - Build emails in React, send from anywhere.
• JSX-email - JSX Mail is an email framework that uses React to create email templates.

[emmclaughlin]

Thank you for clarifying, that makes sense.

Mjml does not render to html in isolation. That is, we can't just replace the content of an mjml-react component with equivalent html. This project chooses to rely on mjml2html as emails are difficult and mjml does a great job of reducing the work required by developers to build emails that safely render across the multitude of email clients.

There are definitely packages that build emails in a different way, and many are likely good and potentially render the react code html faster. However, for this application the focus is on enabling developers to get all the benefits of using mjml to develop emails while still working in a react environment.

In short, the reason to use mjml is to build emails that look great and work across many email clients.