grapesjs-mjml

To use MJML components within GrapesJS, install the plugin using npm. Note that this plugin requires GrapesJS v0.15.9 or higher.

npm i grapesjs-mjml

You can integrate the plugin using either standard script tags or ESM imports. The plugin enables real-time rendering of MJML components using the official v4 compiler.

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

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

The grapesjs-mjml plugin accepts several configuration options to customize the MJML experience. Key options include:

• blocks: Which blocks to add (default: all).
• block: Function to add custom block options based on block ID: (blockId) => ({}).
• mjmlParser: Custom mjml-browser instance to extend MJML functionality or add custom components.
• customComponents: List of components to be added to the default set.
• useXmlParser: Experimental option to use an XML parser instead of HTML, allowing void MJML elements like <mj-image/>.
• columnsPadding: Sets column padding to make selection easier (default: '10px 0').
• overwriteExport: Whether to overwrite the default export command (default: true).
• resetBlocks, resetDevices, resetStyleManager: Boolean flags to clean/reset specific parts of the editor (default: true).

The grapesjs-mjml plugin integrates MJML support into the GrapesJS editor. It provides MJML-specific blocks, components, commands, and panels. You can use it by passing the plugin function to the GrapesJS editor initialization.

import grapesjs from 'grapesjs';
import mjmlPlugin from 'grapesjs-mjml';

const editor = grapesjs.init({
  container: '#gjs',
  plugins: [mjmlPlugin],
  pluginsOpts: {
    [mjmlPlugin]: {
      // Your plugin options here
    }
  }
});

To localize the MJML plugin, pass an i18n object within the pluginsOpts for grapesjs-mjml.

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: true,
   container: '#gjs',
   i18n: {
      messages: { nl: nl },
   },
   plugins: [grapesJSMJML],
   pluginsOpts: {
      [grapesJSMJML]: {
        i18n: { nl: mjmlNL }
      }
   },
});

If you have a custom version of MJML with extended components, you can override the default mjmlParser and provide a list of customComponents via the plugin options.

import 'grapesjs/dist/css/grapes.min.css'
import grapesJS from 'grapesjs'
import grapesJSMJML from 'grapesjs-mjml'
import customMjmlParser from 'custom-mjml-parser';

import customImage from 'custom/components/path'

grapesJS.init({
   fromElement: true,
   container: '#gjs',
   plugins: [grapesJSMJML],
   pluginsOpts: {
      [grapesJSMJML]: {
        mjmlParser: customMjmlParser,
        customComponents: [
          customImage,
        ]
      }
   },
});

The mj-navbar-link component is designed to be used within an mj-navbar context. It renders as an <a> tag with the following default inline styles:

• float: none;
• display: inline-table;

It can contain children such as <a> or <p> elements.

The mj-navbar-link component is an MJML component used for navigation links within an mj-navbar.

Styling

You can apply the following styles to this component:

• Typography: font-style, font-size, font-weight, font-family, color, text-decoration, text-transform.
• Spacing: padding, padding-top, padding-left, padding-right, padding-bottom.

Default Styles:

• font-size: 13px
• padding-top: 25px
• padding-bottom: 25px
• padding-left: 10px
• padding-right: 10px
• text-transform: uppercase

Traits

• href: Used to define the link destination.

When calling the command to convert MJML to HTML, you can pass CommandOptionsMjmlToHtml to specify the MJML source and other parsing options inherited from MJMLParsingOptions.

// Example usage of command options
// Note: This is a type definition for the options object passed to the command
const options: CommandOptionsMjmlToHtml = {
  mjml: '<mjml>...</mjml>',
  // ... other MJMLParsingOptions
};