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.
- MJML - https://mjml.io/ - working in Major email clients
- 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,
-
Is it possible to reduce the size?
-
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"
-
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)
- 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.
- 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
- 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.
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.
Issue #637
Add new block without any hard coding
Hi @artf , We are gonna to embed this grapes editor into our portal as an Email editor. As the Email will be sent by the batch process to c...
Issue #1735
Vuejs components builder
Hi, it would be nice to have vue components builder like mjml.. This user started project: https://github.com/Patrick-Spiegel/vue-grapesjs...
Issue #1748
How to prevent drag items inside the editor
Hello @artf You are doing great job with grapesjs and it's extremely helpful to make our functionality more user friendly. Thanks for creat...
Issue #878
[ Question ] Template Language Support
Hi Team, We started exploring the Grapejs for one of our requirements fitment, is there possibility to introduce template language (like mu...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.