Announcing MJML Manager: A Powerful WYSIWYG Editor for MJML
Announcing MJML Manager: A Powerful WYSIWYG Editor for MJML
If you work with email, you know how painful it can be to code responsive HTML that works across all clients. MJML is a markup language that simplifies the process of creating responsive emails. It's a fantastic tool, but it still requires you to write code.
What if you could have the power of MJML with the ease of a drag-and-drop editor? That's where MJML Manager comes in.
MJML Manager is a new tool that provides a powerful visual editor for creating stunning MJML email templates in minutes. It's perfect for developers who want to speed up their workflow, and for marketers who want to create beautiful emails without writing code.
Key Features:
- Visual MJML Editor: An intuitive drag-and-drop interface for building responsive email templates.
- AI-Powered Templates: Generate professional MJML templates instantly using advanced AI.
- Template Library: Get started quickly with hundreds of pre-built, professional email templates.
- Team Collaboration: Work with your team in real-time on email campaigns.
- HubSpot Integration: Seamlessly export your MJML templates directly to HubSpot Design Manager.
- Reusable Blocks: Create and save content blocks to reuse in future email campaigns.
- Import/Export: Import existing MJML files or export your templates as MJML for a seamless workflow.
- Enterprise Security: Bank-level security with a 99.9% uptime guarantee.
How It Works:
- Choose a Template: Browse the library of professional email templates or start from scratch.
- Customize & Edit: Use the visual editor to customize colors, text, and layout.
- Export & Send: Export as HTML and integrate with your email marketing platform.
Get Started for Free
MJML Manager offers a free trial so you can test out all the features. If you're looking for a better way to build emails, you should definitely give it a try.
Check it out here: https://email.diybuilder.in/MJMLManager
MJML Templates
https://email.diybuilder.in/MJMLManager
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.
Please check this video to know about the tool
https://www.loom.com/share/8732ea94326344edaf4c1bbecfce70f3
https://www.loom.com/share/d46d386084414364ac129c93caad6bb6
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.
About me (contact at - info at kpomservices.com)
I am a Senior Product Developer involved in developing frontend application tools to provide solution for the client usecases.
