Issue #952Opened March 15, 2018by anand-gopinath0 reactions

Responsive email template builder using Grapes js

Question

@ateshuseyin @artf - Thanks for the great plugin. We started to use Grapes js in our project as an editor for building responsive email templates. In order to achieve responsive emails , we have two choices.

  1. MJML - https://mjml.io/ - working in Major email clients
  2. Custom HTML/CSS - https://webdesign.tutsplus.com/tutorials/creating-a-future-proof-responsive-email-without-media-queries--cms-23919 - Working some clients only. But not sure

Our aim is to develop something like this http://react-email-editor-demo.netlify.com/ using Grapes js. I hope we can do. But before that, I came know about MJML language and Grapejs has support for that too. But it has some major problems like,

   1. The repo has no recent activities
   2. You mentioned some comments in the code like 
         "// Currently the UX sucks too much with the heavy rendering  approach" 
         - as you said it takes more time to rerender DOM even for a single style change
   3.  Minified version "grapesjs-mjml.min.js" is high in size ( 1.3 mb )
   4.  MJML parser is a heavy engine and this is also not supporting for browser-level 
     extent in its new version    -   https://github.com/mjmlio/mjml/issues/928 
           (I upgrade to recent MJML4) . But it sucks.
<img width="591" alt="screen shot 2018-03-15 at 1 59 32 pm" src="https://user-images.githubusercontent.com/25955939/37451983-4c4f2cf4-2859-11e8-96f0-e335cde8946d.png">

So, need some suggestions from you that,

  1. Is it possible to reduce the size?

  2. Shall I proceed with this MJML or custruct my own components using Custom HTML/CSS as mentioned in second point? If constructing own means - Need to achieve all the things...as you did in "Grapejs MJML"

  3. Can we remove MJML parser - (import 'mjml2html' from 'mjml') and map that generated html code as a custom component. for Example

  MJML format        -   <mjml><mjbody></mjbody></mjml>
Generated HTML   -   <!--[if mso | IE]>.....bla bla bla.......<!--[if mso | IE]><![endif]-->

Here, Can we create a custom component, where the "ComponetView" returns the generated HTML as hard coded. (But it's fairly not possible)

So I'm stuck with this approach and please help on this @artf

Answers (2)

artfMarch 17, 20180 reactions
  1. Is it possible to reduce the size?

Can't do much about it, the size is big because I had to bundle the MJML core inside it, as there is no client-side bundle for it.

  1. Shall I proceed with this MJML or custruct my own components using Custom HTML/CSS as mentioned in second point? If constructing own means - Need to achieve all the things...as you did in "Grapejs MJML"

Well the choice is up to you, you know that with MJML you might face limits, with a custom approach you will get more control but replicate the same functionalities of MJML it's not an easy (and quick) task

  1. Can we remove MJML parser - (import 'mjml2html' from 'mjml') and map that generated html code as a custom component

Same as above: YES, you can, but it involves a lot of effort.

lock[bot]September 17, 20190 reactions

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.