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

Options

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

Usage

<link href="path/to/grapes.min.css" rel="stylesheet"/>
<script src="path/to/grapes.min.js"></script>
<script src="path/to/demo-email-builder.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: ['demo-email-builder']
  });
</script>