MJML EMAIL Drag and Drop Editor - No Code Platform
About me
I am a Senior Product Developer involved in developing frontend application tools to provide solution for the client usecases.
The problem I wanted to solve
No Code Platform for MJML based Responsive HTML Email Creation.
Decided to create a MJML EMAIL WYSIWYG Drag and Drop Editor which will enable users to drag and drop MJML Components / Sections / Custom Layouts / Custom Components.
What is MJML EMAIL WYSIWYG Drag and Drop Editor - No Code Platform?
Drag-and-Drop HTML based Email Creation Editor Tool based on MJML. Transform structured MJML into major email clients compatible HTML.
Advantage of this editor is
- Able to apply all styles mentioned in the mjml doc.
- Allow to create custom components / custom layouts / custom sections etc
- Allows user to easily edit the mjml templates.
- Users can import the mjml template into the editor and customize it.
Please check this video to know about the tool
https://www.loom.com/share/8732ea94326344edaf4c1bbecfce70f3
Tech stack
This MJML Drag Drop Editor is currently based on MJML (https://mjml.io/) + Vanilla JS + jQuery + PHP. can be integrated into other frameworks also.
The process of building MJML EMAIL WYSIWYG Drag and Drop Editor - No Code Platform
Creation of the frontend editor to edit / customize the mjml blocks / sections.
Creation of admin editor tool to create pre-populated mjml sections.
Challenges I faced
Creation of drag and drop editor for mjml to append / prepend / delete / clone the child nodes.
Key learnings
MJML has multiple components to be added in the editor to create more usage for the users to create interactive mjml components also ex: accordion / carousels / group / chart / custom components ...
Tips and advice
Advantages of MJML - including a simplified syntax, responsive design, and pre-built components. These features make it easier to create professional-looking emails that work across different email clients.
and this tool can be integrated to other frameworks / platforms also to generate emails.
Final thoughts and next steps
In this editor tool added only custom components with basic mjml components only will be adding all the mjml components in the next phases.
