Mjml: Is there any way to validate the MJML content before converting to HTML?

[nick13jaremek]

Hi there!

We are using the mjml library in a NodeJS project to convert MJML emails to HTML. For this purpose, we are using the mjml2html function you provide.

However, we noticed that this function is synchronous, and therefore error handling needs to be done using a try-catch clause.

Is there is any other function or sister-library of yours that may be used to validate an MJML structure before attempting the actual convertion? Or perhaps an asynchronous equivalent to handle the errors due to invalid MJML structures?

Thanks in advance!

[pixelize]

Hi @nick13jaremek, I don't think it exists yet but I agree a kind of "mjml lint" would be awesome !

[nick13jaremek]

Hi @pixelize!

Indeed, an mjml lint function would be awesome. In the meantime, we wrapped the synchronous mjml2html function in a Promise, which suits our needs for the moment.

[iRyusa]

Hello,

Quick update here, we will support an xsd like layer of validation that provide meaningful errors such as "mj-column should be in a mj-section/mj-group" or "attribute X doesn't exist on mj-column"

[iRyusa]

Hi there,

Long awaited feature is now available ! Use mjml --validate file.mjml to validate a file or just compile it and it will output to stdout the errors. In javascript, mjml2html or MJMLRenderer now output an Object with html and errors properties !

[gabiudrescu]

@iRyusa the mjml --validate file.mjml detects errors like the one below:

<mj-image width="x" src="image.jpg" align="center" padding="0" />

but stuff like the one below are reported as OK - while they should raise an error:

<mj-image blablabla="totallyinvalidoption" src="images/actionable-notification.jpg" align="center" padding="0" />

</mj-section

any clues on how can I set the validator to raise an error when finding something like this?

[kmcb777]

@gabiudrescu which mjml version are you using ? With 4.1.2 i get the validation warning saying 'blablabla' is not a valid attribute

[gabiudrescu]

I'm also using 4.1.2:

root@61a1830ad2b7:/data# npm list mjml
npm info it worked if it ends with ok
npm info using [email protected]
npm info using [email protected]
[email protected] /data
`-- [email protected]
  `-- [email protected] 

npm info ok 

the thing is that if I run the command below, there's no output to terminal:

root@61a1830ad2b7:/data# node_modules/.bin/mjml --validate mjml/includes/header.mjml 
root@61a1830ad2b7:/data# 

but if I run the command below, I get the strange errors you can see below:

root@61a1830ad2b7:/data# node_modules/.bin/mjml-cli --validate mjml/includes/header.mjml 
Line 15 of /data (mj-section) — Element mj-section doesn't exist or is not registered
Line 16 of /data (mj-column) — Element mj-column doesn't exist or is not registered
Line 17 of /data (mj-navbar) — Element mj-navbar doesn't exist or is not registered
Line 18 of /data (mj-navbar-link) — Element mj-navbar-link doesn't exist or is not registered
Line 19 of /data (mj-navbar-link) — Element mj-navbar-link doesn't exist or is not registered
Line 20 of /data (mj-navbar-link) — Element mj-navbar-link doesn't exist or is not registered
Line 21 of /data (mj-navbar-link) — Element mj-navbar-link doesn't exist or is not registered
Line 22 of /data (mj-navbar-link) — Element mj-navbar-link doesn't exist or is not registered

Command line error:
Validation failed
root@61a1830ad2b7:/data# 

others appear to have had the same issues, but on older versions (which is not the case):

• https://github.com/mjmlio/mjml/issues/651
• https://github.com/mjmlio/mjml/issues/567

[iRyusa]

Well, the reason is really simple : when you use mjml-cli on it's own, no component are registered by default.
That's why you should use the mjml package (that does register components & dependencies) instead of the mjml-cli if you don't really know what you're doing with it.

[gabiudrescu]

well, @iRyusa I would highly appreciate any help on setting up mjml as the binary used as a linter. as you can see in my examples above, the output is not what I'm expecting.

[iRyusa]

when you use mjml-cli on it's own, no component are registered by default.

Just use the regular binary of the mjml package, it will just work fine.

➜  mjml-4-1 yarn mjml --validate no-bug.mjml
yarn run v1.7.0
$ /Users/maximebrazeilles/mjml-4-1/node_modules/.bin/mjml --validate bug.mjml
Line 5 of /Users/maximebrazeilles/mjml-4-1 (mj-image) — Attribute blablabla is illegal
Line 5 of /Users/maximebrazeilles/mjml-4-1 (mj-image) — Attribute width has invalid value: xx for type Unit, only accepts (px) units and 1 value(s)

Command line error:
Validation failed
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
➜  mjml-4-1 cat no-bug.mjml
<mjml>
<mj-body>
<mj-section>
<mj-column>
<mj-image width="xx" blablabla="totallyinvalidoption" src="images/actionable-notification.jpg" align="center" padding="0" />
</mj-column>
</mj-section>
</mj-body>
</mjml>

[gabiudrescu]

I think I have managed to find a bug. I'm opening another issue.

[gabiudrescu]

@iRyusa let's move our discussion over #1356 as I have posted there the exact steps I am doing in order to reproduce the error. Now I'm able to reproduce it consistently.