Newsletter Builder with MJML components in GrapesJS
Switch branches/tags
Nothing to show
Clone or download
Latest commit e887e58 Dec 23, 2017
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Bump v0.0.27 Dec 22, 2017
src Make the container fill the height Dec 22, 2017
.gitignore Update dev environment Nov 9, 2017
LICENSE Add `categoryLabel` option. Closes #34 Dec 21, 2017 Update README Dec 22, 2017
index.html Remove some old workaround Nov 9, 2017
package-lock.json Bump v0.0.27 Dec 22, 2017
package.json Bump v0.0.27 Dec 22, 2017
webpack.config.js Add `categoryLabel` option. Closes #34 Dec 21, 2017


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.



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


Option Description Default
categoryLabel Category for blocks ''
importPlaceholder Import placeholder MJML ''
modalTitleImport Title for the import modal Import MJML
modalBtnImport Test for the import button Import
modalLabelImport Description for the import modal ''
modalTitleExport Title for the export modal Export MJML
modalLabelExport Description for the export modal ''
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


  • 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-text>My Company</mj-text>

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


Clone the repository

$ git clone
$ cd grapesjs-mjml

Install it

$ npm i

The plugin relies on GrapesJS via peerDependencies so you have to install it manually

$ npm i grapesjs --no-save

Start the dev server

$ npm start

Alternatively, you can clone the grapesjs repository in a different directory, npm link it and use that as the grapesjs dependency. This lets you simultaneously run grapesjs-mjml and grapesjs from source.

Install grapesjs and run the webpack watcher in it:

$ git clone
$ cd grapesjs
$ npm install
$ npm link
$ webpack --watch

Install grapesjs-mjml, link the grapesjs repo from above and start the dev server:

$ git clone
$ npm install
$ npm link grapesjs
$ npm run


BSD 3-Clause