@luma-team/mjml-react

(This is forked from Wix's mjml-react — more info why I forked this can be found in this comment.)

MJML is a markup language created by Mailjet. But since we are using React in the rest of our app, we want to use React to create the MJML markup for emails.

Note: this does not bundle mjml so you can use whatever version of mjml you'd like to convert the outputted mjml-string to HTML.

How it works

Install the required dependencies first:

npm install react react-dom mjml @luma-team/mjml-react

Then you can write:

import {
  renderToMjml,
  Mjml,
  MjmlHead,
  MjmlTitle,
  MjmlPreview,
  MjmlBody,
  MjmlSection,
  MjmlColumn,
  MjmlButton,
  MjmlImage,
} from "@luma-team/mjml-react";
import mjml2html from "mjml";

const mjmlString = renderToMjml(
  <Mjml>
    <MjmlHead>
      <MjmlTitle>Last Minute Offer</MjmlTitle>
      <MjmlPreview>Last Minute Offer...</MjmlPreview>
    </MjmlHead>
    <MjmlBody width={500}>
      <MjmlSection fullWidth backgroundColor="#efefef">
        <MjmlColumn>
          <MjmlImage src="https://static.wixstatic.com/media/5cb24728abef45dabebe7edc1d97ddd2.jpg" />
        </MjmlColumn>
      </MjmlSection>
      <MjmlSection>
        <MjmlColumn>
          <MjmlButton padding="20px" backgroundColor="#346DB7">
            I like it!
          </MjmlButton>
        </MjmlColumn>
      </MjmlSection>
    </MjmlBody>
  </Mjml>
);

const htmlString = mjml2html(mjmlString);

And as the result you will get a nice looking email HTML (works in mobile too!)