GrapesJS MJML

GrapesJS MJML is an official plugin that brings MJML’s responsive email markup into the GrapesJS drag-and-drop editor. It registers MJML block types such as sections, columns, buttons, images, and heroes as editable components, and compiles them to production-ready HTML in real time using the official MJML v4 browser compiler.

With it, product teams and agencies can build newsletters and transactional email templates visually, preview the responsive output instantly, and export clean MJML or compiled HTML for delivery through any email service.

What You Get

• A block palette covering the core MJML component set (sections, columns, text, buttons, images, dividers, spacers, social, navbar, hero, wrapper, raw)
• Real-time compilation to responsive HTML via the official mjml-browser v4 parser
• Import and export commands for MJML and compiled HTML with customizable pre/post markup
• Configurable blocks, custom components, i18n locales, and a tailored Style Manager for email constraints

Common Use Cases

• Building a visual newsletter editor inside a SaaS or marketing product
• Letting non-developers design responsive transactional email templates
• Exporting MJML or HTML for delivery through providers like Mailgun, SendGrid, or SES

Under The Hood

Architecture - The plugin entrypoint src/index.ts exports a GrapesJS Plugin function that, given an editor and options, wires up loaders in sequence: loadComponents, loadBlocks, loadCommands, loadPanels, and loadStyle. Each MJML element lives as its own module under src/components/ (Body, Section, Column, Text, Button, Image, Hero, NavBar, Social, and more), registering a GrapesJS component type with model/view definitions. A shared src/components/parser.ts bridges to the mjml-browser compiler so canvas content round-trips to responsive HTML.

Tech Stack - Written in TypeScript and built with grapesjs-cli. Runtime dependencies are minimal: mjml-browser for in-browser MJML v4 compilation and @types/mjml for typings. GrapesJS itself is a peer/dev dependency. Tests run on Jest with a Babel preset for TypeScript.

Code Quality - The codebase is cleanly modularized one-file-per-component, uses typed plugin options via src/types.ts, and includes a Jest test suite under tests/specs/ (mjml.test.ts plus regression specs like issue-367). Naming maps directly to MJML tags, keeping the source approachable.

API Design - Integration follows GrapesJS’s standard plugin convention: add grapesjs-mjml to the plugins array and configure via pluginsOpts. A rich options object (blocks, custom components, mjmlParser, i18n, export hooks) gives fine-grained control with sensible defaults, so a basic setup is a few lines while advanced use remains fully customizable.