This plugin enables the usage of MJML components inside the GrapesJS environment. MJML components are rendered in real-time using the official compiler, therefore the result is, almost, the same as using the MJML Live Editor.

Demo

Supported components: mj-container mj-section mj-column mj-text mj-image mj-button mj-social mj-divider

• importPlaceholder Import placeholder MJML, default: '',
• modalTitleImport Title for the import modal, default: 'Import MJML',
• modalBtnImport Test for the import button, default: 'Import',
• modalLabelImport Description for the import modal, default: '',
• modalTitleExport Title for the export modal, default: 'Export MJML',
• modalLabelExport Description for the export modal, default: '',
• overwriteExport Overwrite default export command, default: 'true',
• preMjml String before the MJML in export code, default: '',
• postMjml String after the MJML in export code, default: '',
• resetBlocks Clean all previous blocks if true, default: 'true',
• resetBlocks Clean all previous devices and set a new one for mobile, default: 'true',
• resetStyleManager Reset the Style Manager and add new properties for MJML, default: 'true',

• npm i grapesjs-mjml

<link href="path/to/grapes.min.css" rel="stylesheet"/>
<script src="path/to/grapes.min.js"></script>
<script src="path/to/grapesjs-mjml.min.js"></script>

<div id="gjs">
  <!-- Your MJML body here -->
  <mj-container>
        <mj-section>
          <mj-column>
            <mj-text>My Company</mj-text>
          </mj-column>
        </mj-section>
  <mj-container>
</div>

<script type="text/javascript">
  var editor = grapesjs.init({
      fromElement: 1,
      container : '#gjs',
      plugins: ['gjs-mjml'],
      pluginsOpts: {
        'gjs-mjml': {/* ...options */}
      }
  });
</script>

Clone the repository

$ git clone https://github.com/artf/grapesjs-mjml.git
$ cd grapesjs-mjml

Install it

$ npm i

The plugin relies on GrapesJS via peerDependencies so you have to install it manually (without adding it to package.json)

$ npm i grapesjs --no-save

Start the dev server

$ npm start

BSD 3-Clause