The MJML “Errors inside your template. Template will not be saved.” is an error displayed inside Mautic when you try to close your email builder in the new Mautic 4 release. It occurs primarily because of the incompatibility between the new and older versions of MJML framework which Mautic uses for for its out email design.
This error may also happen because of GrapeJS builder, which Mautic uses to provide drag and drop email and website building experience, generating incompatible/old MJML codes.
The proper solution for this error will be to:
- Update existing Mautic email templates to be compatible with with the latest MJML framework syntax.
- Make GrapesJS generate proper MJML code to comply with its latest syntax.
- Updating Mautic to reflect those changes.
However, as you can see, none of those are at your hand. So, you can’t just magically fix that error.
But I am going to show you a way which is actually perfect for the current scenario. This will help updating your old MJML codes to the latest MJML code syntax. This way, you won’t need to worry about fixing your emails again while the proper solution to this error comes after a while.
However, because of the lack of any proper method, this will be a hacky way and you will need to spend a little time. But at the end you will have your old and broken codes formatted properly as per the latest MJML code syntax. In fact, I will also show you how you can still use the same GrapesJS builder to build your emails.
Let’s get done with the resources needed for this solution:
- MJML online editor from https://mjml.io/try-it-live.
- GrapesJS MJML editor from https://grapesjs.com/demo-mjml.html.
As you can see both these editors are provided by the creators of them.
Here is what you can do to fix your broken codes:
1. Migrate your old MJML code to new syntax
When you are in the editing mode of the broken email inside Mautic, click on the Edit code icon from the top right side. Then copy all the code that appears in the pop-up window. Alternatively, you could also do the same thing by clicking on the View code icon from beside the Edit code icon and then copying the code from inside the MJML box.
Now open the MJML editor on their website from this link https://mjml.io/try-it-live.
Now on the code editing box in the left side, paste the MJML code that you copied earlier. Then you will see red dot beside the lines which contain error.
To fix these errors, click on the button labeled as Migrate from MJM 3 located on the top right corner of the same editing box where you pasted the code. This will fix most, if not all of the errors in the code.
If you see no more red dots, your code has been successfully upgraded to the latest MJML version.
But if you still see red dots beside some lines, you code contains some errors that the editor couldn’t fix automatically. So, you will need to do some manual work.
First of all, hovering over any of those red dots will show you the details of the error on the line. You can read the error details and fix them yourself. In case you need to read through their documentation to fix those errors, here is the link for that https://documentation.mjml.io/. If you still need some more help you can view their resources page from here https://mjml.io/resources.
When you don’t see any more red dots, your MJML codes are corrected and ready to be used.
So, now you can copy all the corrected MJML codes from that editor. Then go back to the same email builder inside Mautic which contained the broken code and click on the Edit code icon if it isn’t open already.
Now, remove all the old code that are already present in there and then paste your corrected MJML codes inside the code box. Then click on the Edit button below that window to apply the corrected code.
That’s it for fixing your broken MJML code. Now if you try closing the editing the window, it shouldn’t show you the error any more and therefore save your code properly.
2. Edit Emails in the GrapesJS MJML editor
You now know how to correct broken codes. But what about editing existing emails or building new ones.
That’s where the GrapesJS MJML editor from this page https://grapesjs.com/demo-mjml.html becomes helpful. Though you could still edit emails inside Mautic and correct the code using the method descripted above, this is another approach for achieving a similar result.
On GrapesJS MJML editor, you can create your new emails from scratch.
You can also edit existing emails from there. On the top bar icon list in the GrapesJS MJML editor, you will find an Import MJML button. Clicking on it will open the import box. Paste your existing MJML codes in there and then click on the Import button to start editing your existing emails.
Once you are done with building your email, click on the View code button from beside the Import MJML button. This will open a pop-up containing both the MJML and HTML code versions of your email.
While this pop-up opens, it will show you errors in the code if there are any. One error I found constantly is that GrapesJS was adding ID attribute to the MJML code for which the code was throwing errors. So, by removing the id="idname" part from the affected line would fix the code. Be sure to replace idname with whatever you have.
Now, as we are interested in the MJML code, copy the code from the MJML section.
Then check and correct any errors in the MJML code using the same method described earlier. Then you can use the corrected code inside Mautic.
PS: You can visit the below pages for some amazing MJML templates:
My fix for all templates, which have been successful so far is to :
– remove all “id” elements in tags (and reset the style associated to the id using a classname)
– Search & Replace : “” ==> “”