GrapesJS MJML

Requires GrapesJS v0.15.9 or higher

This plugin enables the usage of MJML components inside the GrapesJS environment. MJML components are rendered in real-time using the official v4 compiler (+ some mocks to make it run in the browser), therefore the result is, almost, the same as using the MJML Live Editor.

Demo

Supported components: mj-wrapper mj-group mj-section mj-column mj-text mj-image mj-button mj-social mj-divider mj-spacer mj-style mj-font mj-hero

Options

Option	Description	Default
`importPlaceholder`	Import placeholder MJML	`''`
`i18n`	I18n object containing language more info	`{}`
`overwriteExport`	Overwrite default export command	`true`
`preMjml`	String before the MJML in export code	`''`
`postMjml`	String after the MJML in export code	`''`
`resetBlocks`	Clean all previous blocks if true	`true`
`resetDevices`	Clean all previous devices and set a new one for mobile	`true`
`resetStyleManager`	Reset the Style Manager and add new properties for MJML	`true`

Download

npm i grapesjs-mjml

Usage

<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">
  <mjml>
    <mj-body>
      <!-- Your MJML body here -->
      <mj-section>
        <mj-column>
          <mj-text>My Company</mj-text>
        </mj-column>
      </mj-section>
    </mj-body>
  </mjml>
</div>

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

Or using ESM imports:

import 'grapesjs/dist/css/grapes.min.css'
import grapesJS from 'grapesjs'
import grapesJSMJML from 'grapesjs-mjml'

grapesJS.init({
   fromElement: 1,
   container : '#gjs',
   avoidInlineStyle : false,
   plugins: [grapesJSMJML],
   pluginsOpts: {
      [grapesJSMJML]: {/* ...options */}
   },
});

i18n usage:

import 'grapesjs/dist/css/grapes.min.css'
import grapesJS from 'grapesjs'
import nl from 'grapesjs/locale/nl'
import grapesJSMJML from 'grapesjs-mjml'
import mjmlNL from 'grapesjs-mjml/locale/nl'

grapesJS.init({
   fromElement: 1,
   container : '#gjs',
   avoidInlineStyle : false,
   i18n: {
      // locale: 'en', // default locale
      // detectLocale: true, // by default, the editor will detect the language
      // localeFallback: 'en', // default fallback
      messages: { nl: nl },
   },
   plugins: [grapesJSMJML],
   pluginsOpts: {
      [grapesJSMJML]: {
        // Optional options
        i18n: { nl: mjmlNL }
      }
   },
});

Development

Clone the repository

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

Install it

$ npm i

Start the dev server

$ npm start

Releasing

Run npm run v:patch to bump the version in package.json and create a git tag
Push the commit + new tag
Go to github and draft a new release
Select the new tag and add some release notes
Hit publish, the release will automatically publish to npm

License

BSD 3-Clause

olivmonnier / grapesjs-mjml