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
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