MJML Render Devel

MJML Render Devel provides a browser-based preview UI for MJML email templates. Discover, render with mock data, and preview emails across client viewports — without sending a single email.

Features

Template Discovery

Automatically scans all enabled themes and modules for .html.twig.mjml files and presents them in a grouped listing page — organized by themes and modules — so you can quickly find and select any MJML template in your project.

Three View Modes

• Source — raw template file contents with syntax highlighting
• Parsed — split view showing the Twig→MJML intermediate output and the MJML→HTML final output side-by-side, with copy buttons for each panel
• Preview — rendered HTML in a sandboxed iframe with email client viewport emulation

Email Client Emulation

Switch between preset viewport widths that match popular email clients — Gmail (640px), Outlook (600px), iOS (375px), Android (360px), and Tablet (768px). Toggle dark mode to test dark background rendering.

Variable Introspection & Mock Data

Statically analyzes the template (and its {% include %} dependencies) via Twig AST to discover all expected variables. The sidebar auto-generates a form where you can provide mock values. Supports structured form inputs, raw JSON editing, and named presets stored in localStorage.

Live Reload

Toggle Live Reload to automatically re-render the preview whenever a template file (or any of its included dependencies) changes on disk. Uses lightweight polling — no WebSockets or additional server configuration required.

Navigation Module Integration

When Drupal Core's Navigation module is enabled, the MJML Preview link automatically appears as a top-level item in the Navigation sidebar for quick access during development.

Use Cases

A Technical Deep Dive into Drupal's MJML Render Engine
by Golems GABB

Post-Installation

After enabling the module, navigate to Administration → Configuration → Development → MJML Preview. The landing page will list all discovered .html.twig.mjml templates grouped by theme and module.

Click any template to open the preview page. Fill in mock variable values in the sidebar panel and click Render to see the output. Use the tab bar to switch between Source, Parsed, and Preview views. In Preview mode, use the email client toolbar to test different viewport widths.

To prevent the module from leaking into production configuration exports, add the following to your settings.php:

$settings['config_exclude_modules'][] = 'mjml_render_devel';

Additional Requirements

• Drupal 11.3.0 or later
• MJML Render Engine — the Twig MJML theme engine (installed automatically as a dependency)
• MJML Render Binary — the standalone MJML binary (installed as a transitive dependency of MJML Render Engine; no Node.js required at runtime)

Recommended modules/libraries

• Navigation (Drupal Core) — when enabled, MJML Preview appears as a top-level item in the admin sidebar for quick access
• Symfony Mailer — for a complete email sending solution alongside MJML template rendering

Similar projects

There is currently no known Drupal module that provides a dedicated preview UI specifically for MJML email templates. Generic template preview tools exist, but they do not handle the two-stage Twig→MJML→HTML rendering pipeline or provide email client viewport emulation.

• Canvas (Experience Builder) — a visual page builder for Drupal content; operates in a different domain (pages/components vs. email templates) but served as design inspiration for the preview UI layout

Supporting this Module

If you find this module useful, consider contributing back by submitting bug reports, feature requests, or patches in the issue queue.

Community Documentation

See the MJML Render Engine project page for documentation on creating MJML email themes and templates in Drupal.