# GrapesJS editor destroying greater-than sign (\>) selector in MJML email template

**URL:** <https://forum.mautic.org/t/grapesjs-editor-destroying-greater-than-sign-selector-in-mjml-email-template/21172>\
**Category:** Product Support\
**Created:** [October 6, 2021, 7:09pm UTC](https://forum.mautic.org/t/grapesjs-editor-destroying-greater-than-sign-selector-in-mjml-email-template/21172 "2021-10-06T19:09:00Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![ekke](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/ekke/32/296_2.png) [@ekke](https://forum.mautic.org/u/ekke)\
**Post date:** [October 6, 2021, 7:09pm UTC](https://forum.mautic.org/t/grapesjs-editor-destroying-greater-than-sign-selector-in-mjml-email-template/21172/1 "2021-10-06T19:09:00Z")

</div>

**Your software**  
My Mautic version is: 4.01  
My PHP version is: 7.4.3  
My Database type and version is: 8.0.26-0ubuntu0.20.04.3

**Your problem**  
My problem is: If have and need statements like this in the MJML:  
@media only screen and (max-width:743px) {  
.plr-9p \> table \> tbody \> tr td{  
padding-left:3%!important;  
padding-right:3%!important;  
}  
but the editor is butchering it into  
@media only screen and (max-width:743px) {  
.plr-9p &# 62; table &# 62; tbody &# 62; tr td{  
padding-left:3%!important;  
padding-right:3%!important;  
}

i.e. HTML-escaping the “greater than” (I manually inserted the blank in &# 62; to prevent the forum from “unbutchering” the string 🙂 )

These errors are showing in the log: n/a

Steps I have tried to fix the problem:

---

<div class="post-metadata">

**Author:** ![adiux](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/adiux/32/5793_2.png) [@adiux](https://forum.mautic.org/u/adiux)\
**Post date:** [October 9, 2021, 11:38am UTC](https://forum.mautic.org/t/grapesjs-editor-destroying-greater-than-sign-selector-in-mjml-email-template/21172/2 "2021-10-09T11:38:36Z")

</div>

I think this is not related to our implementation of Grapesjs. I just tested with one of our default templates on the official demo of mjml and grapesjs. The part in the footer does not get bold and big in Grapesjs - but it does with mjml:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/mautic/original/2X/a/a6da1de3fb58127d2f5a537ad78e68225d394585.jpeg)

See for yourself:  
[https://mjml.io/try-it-live/](https://mjml.io/try-it-live/)  
[https://grapesjs.com/demo-mjml.html](https://grapesjs.com/demo-mjml.html)

I used this template:

```auto
<mjml>
  <mj-head>
    <mj-style>
      table tr > td p{
      font-weight: bold;
      font-size: 30px;
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-raw>
      <!-- Company Header -->
    </mj-raw>
    <mj-section background-color="#f0f0f0">
      <mj-column>
        <mj-text font-style="bold" font-size="24px" color="#6f6f6f">My Company
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-raw>
      <!-- Confirm text -->
    </mj-raw>
    <mj-section background-color="#fafafa">
      <mj-column width="400px">
        <mj-text font-style="bold" font-size="22px" font-family="Helvetica Neue" color="#626262">Please confirm your subscription!
        </mj-text>
        <mj-button background-color="#F45E43" font-style="bold" href="https://aivie.ch">Yes, subscribe me to the list
        </mj-button>
        <mj-text color="#525252" font-size="16px" line-height="1.5">If you received this email by mistake, simply delete it. You won't be subscribed if you don't click the confirmation link above.

          For questions about this list, please contact:
          email@email.com
        </mj-text>
      </mj-column>
    </mj-section>
    <mj-raw>
      <!-- Confirm text -->
    </mj-raw>
    <mj-section background-color="#fafafa">
      <mj-column width="400px">
        <mj-text color="#525252" line-height="1.2">
          <p>Company Name

            Beautiful City
          </p>
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

```

Maybe raise an issue with Grapesjs mjml?  
Maybe it is possible to use different CSS rules? IMO that would be the easiest solution.

---

<div class="post-metadata">

**Author:** ![ekke](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/ekke/32/296_2.png) [@ekke](https://forum.mautic.org/u/ekke)\
**Post date:** [October 27, 2021, 10:00am UTC](https://forum.mautic.org/t/grapesjs-editor-destroying-greater-than-sign-selector-in-mjml-email-template/21172/3 "2021-10-27T10:00:59Z")

</div>

> [@adiux](#):
>
> Maybe it is possible to use different CSS rules

That’s what we did as a workaround, indeed!

However, thinks like this can drive you nuts if you are not aware of them.  
I think if this is Mautic’s email templating engine going forward, it should ideally work flawlessly,  
or if nothing else we should provide a comprehensive and clear **list of known issues** (“_currently unsupported things - avoid these in your MJML template!_”), maybe with hints for workarounds, and ideally with a link to a Github issue either on the Mautic end or on the GrapesJS end.  
Don’t you think? 🙂

---

<div class="post-metadata">

**Author:** ![adiux](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/adiux/32/5793_2.png) [@adiux](https://forum.mautic.org/u/adiux)\
**Post date:** [October 27, 2021, 10:17am UTC](https://forum.mautic.org/t/grapesjs-editor-destroying-greater-than-sign-selector-in-mjml-email-template/21172/4 "2021-10-27T10:17:21Z")

</div>

Yes, I absolutely agree. I think this is another one of these

> [@My custom HTML code doesn't render correctly on Gmail](https://forum.mautic.org/t/my-custom-html-code-doesnt-render-correctly-on-gmail/21391):
>
> Your software My Mautic version is: 4.0.1 My PHP version is: 7.4.18 My Database type and version is: MariaDB 10.5.9 Your problem My problem is: After creating a new email with “Code Mode”, editing the HTML, and saving the email, Mautic (or probably GrapesJS) refactor my HTML code and remove my inline CSS to the \<style\> tag. The email is rendered well on Apple Mail and some other known email clients, but it’s not rendered properly on Gmail. A chunk from my HTML code: \<td align="center" …

(Still working on the workaround)

But where should we do this? I guess a section in the documentation would be a good place? Similar to this [Troubleshooting emails | Mautic](https://docs.mautic.org/en/channels/emails/troubleshooting-emails)

---

<div class="post-metadata">

**Author:** ![ekke](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/ekke/32/296_2.png) [@ekke](https://forum.mautic.org/u/ekke)\
**Post date:** [October 27, 2021, 10:35am UTC](https://forum.mautic.org/t/grapesjs-editor-destroying-greater-than-sign-selector-in-mjml-email-template/21172/5 "2021-10-27T10:35:51Z")

</div>

imho yes exactly, should be part of the docs!  
@silavapi ?

---

<div class="post-metadata">

**Author:** ![silavapi](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/silavapi/32/7424_2.png) [@silavapi](https://forum.mautic.org/u/silavapi)\
**Post date:** [October 27, 2021, 10:42am UTC](https://forum.mautic.org/t/grapesjs-editor-destroying-greater-than-sign-selector-in-mjml-email-template/21172/6 "2021-10-27T10:42:27Z")

</div>

We have a section on the builders page for known issues:

> **[Email & Landing Page Builder](https://docs.mautic.org/en/builders#known-bugs-issues)**
>
> Introduction. Since Mautic 3.3, Mautic has shipped with an updated, modern builder for creating emails and landing pages. In Mautic 4.0 it's the default builder.. . . To use your existing templates with the new builder, you need to add one line to...

Please feel free to make a PR to add any missing information 🙂

---

<div class="post-metadata">

**Author:** ![ekke](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/ekke/32/296_2.png) [@ekke](https://forum.mautic.org/u/ekke)\
**Post date:** [October 27, 2021, 10:46am UTC](https://forum.mautic.org/t/grapesjs-editor-destroying-greater-than-sign-selector-in-mjml-email-template/21172/7 "2021-10-27T10:46:51Z")

</div>

Are you referring to this section?

> #### Known bugs / issues
> 
> Please use the issue queue on the [GitHub repository](https://github.com/mautic/mautic/issues?q=is%3Aopen%2Bis%3Aissue%2Blabel%3Abuilder-grapesjs) to find the latest updates and report bugs with the plugin. Be sure to search first in case someone has already reported the bug.

So far this is purely meta, if I am not mistaken - but yes, this should be the right place to explicitly list all the things that people should avoid (or be aware of).

---

<div class="post-metadata">

**Author:** ![silavapi](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/silavapi/32/7424_2.png) [@silavapi](https://forum.mautic.org/u/silavapi)\
**Post date:** [October 27, 2021, 11:41am UTC](https://forum.mautic.org/t/grapesjs-editor-destroying-greater-than-sign-selector-in-mjml-email-template/21172/8 "2021-10-27T11:41:46Z")

</div>

Yes, we do have some information here:

> **[Creating a theme](https://docs.mautic.org/en/builders/%20creating%20a%20theme#head-components)**
>
> MJML enables marketers to easily create and maintain beautiful and responsive themes for Mautic.Why use email themes?. Purpose of a theme. The GrapesJs builder makes it possible to insert HTML code and edit it in a 'What You See Is What You Get'...

where we state that there are certain things you can’t use in your themes, but this is more aimed at the theme builders.

We did used to call out specific bugs we knew of when the builder was in beta, but we decided it was more sensible to make those a label on GitHub because otherwise the docs was getting outdated quite quickly.

So tl;dr if we need to add some information like this to the docs about things which you can’t do, we should add it to this page. Maybe having a section on how to use custom CSS and what you need to know if you are going to do that.