check if it's possible to use mjml-browser package and use it on a browser

[Mantas Miliukas]

check if it's possible to use mjml-browser package and use it on a browser

[Lubos]

Thanks!

[Nicola Peluchetti]

Is there any chance of this happening?

[Victor Pontis]

First of all thank you @mastertheblaster for writing this package!

I spent a little time looking into this. It's kinda hard to dynamically substitute mjml-browser for mjml while using this package.

So I decided to fork this package and strip away the mjml dependency so that you can choose which version of mjml you use to convert the MJML string into an HTML string.

You can see my Github repo here and I published an npm package @luma-team/mjml-react

---

Here is how the current repo handles serializing to HTML:

import { render, Mjml } from 'mjml-react';

const { html, errors } = render((<Mjml>...</Mjml>), mjmlOptions);
// html is now something you can throw into an email

Here is how my package serializes to HTML:

import { renderToMjml, Mjml } from '@luma-team/mjml-react';

import mjml2html from 'mjml';
// Or you can use 'mjml-browser' here

const mjmlString = renderToMjml(<Mjml>...</Mjml>));

const html = mjml2html(mjmlString);

// html is now something you can throw into an email

I like the latter method more because it allows you to choose your own MJML renderer.

---

I'd be happy to continue cleaning up my package if it would be useful for other people.

Here are some other things that I think would be nice to change:

• types inside the package
• remove utils that are probably not used outside Wix
• move to a build script that isn't proprietary to Wix (this package uses yoshi)
• use esbuild for building + publishing

[Lubos]

Thanks for this @vpontis!

[Victor Pontis]

Also @mastertheblaster I'd be happy to merge this in if you would like. Or I can maintain it as a separate package...

[Artūras]

While not documented, all pieces needed to render it on browser are present:

https://codesandbox.io/s/agitated-hypatia-9mcjo?file=/src/App.js

[Thomas Ramé]

For info, in my case I wanted to have it directly in Storybook without an additional nested iframe, so I did:

<div dangerouslySetInnerHTML={{ __html: mjml2html(renderToMjml(<SignUpConfirmationEmail />)).html }} />

(I think it's fine on the security perspective since Storybook does not manage real data)