Introducing the new email and landing page builder

Community Blog
1

Mautic 4.0 introduces a new email and landing page builder by default, replacing the existing (herein referred to as ‘legacy’) builder.

This has been the culmination of over a year’s work by several individuals in the Mautic Community, and has been available since the Mautic 3.2 release for beta testing.

What is the new builder?

The new builder has been created using the open source GrapesJS framework which supports email and landing pages in Mautic. This enables a fully responsive drag-and-drop interface which is highly customizable and easy to use.

The new builder also allows you to use both the traditional HTML markup in themes while also supporting the modern way to create great responsive email themes using MJML.

A single-line change is required in the configuration file for your themes when you upgrade to Mautic 4 - please read the documentation for more information.

How can I use the new builder?

From Mautic 3.2 the builder was available in the Plugins section to enable and test while we were in the beta phase.

From Mautic 4.0, the new builder will now be enabled by default. There is an option to disable the new builder and revert to the legacy builder until Mautic 5, when we will completely remove the legacy builder. Please refer to the documentation for instructions on how to do this. Please note you should as a matter of course clear your Mautic cache, browser cache and refresh the page after updating, to ensure you are getting the latest builder files after updating.

Are there any limitations or known issues?

Currently there are some MJML elements which are not rendered by the builder:

  1. mj-head components are not rendered:

    mj-attributes, mj-breakpoint, mj-font, mj-html-attributes, mj-preview, mj-style, mj-title
     
  2. Body components not rendered include:

    mj-table

Blocks for implementing the following features are not yet ready for release but will follow in subsequent releases:

  1. Preference centre configuration on landing pages (tokens still function as a workaround, and work is almost complete to bring full configurability)
  2. Gated video on landing pages
  3. Dynamic content on landing pages
  4. Dynamic content on MJML-based email templates (Dynamic Content is still available in HTML-based emails)

How can I contribute to improving the new builder?

We would love to have new contributors both in the code and with improving the documentation, resources and tutorials that we now need to update using the new builder!

Please join us in Slack (get an invite at https://mautic.org/slack) at #i-builders where the team can advise you on getting started or tasks that are outstanding. You can find issues in the core Mautic issue queue with the label builder-grapesjs.

For developers, anything related to Mautic and the integration with GrapesJS can be found in the plugin directory, and anything related to GrapesJS itself (such as the blocks, components etc) can be found in the Mautic preset.

Where can I learn more about the builder? 

We have information available in the Documentation which explains more about the new builder.

This is a companion discussion topic for the original entry at https://www.mautic.org/blog/community/introducing-new-email-and-landing-page-builder
1 Like