Email Editor (Demo) is a web-based email template editor that allows you to create and customize responsive email templates with drag-and-drop functionality, undo and redo history, template saving, image selection from Unsplash, and a preview feature, it provides a user-friendly interface for designing email templates.
-
Drag and Drop: Easily arrange and customize email elements using the MJML package with a simple drag-and-drop interface.
-
Undo and Redo History: Keep track of your changes with the ability to undo and redo previous actions, ensuring a seamless editing experience.
-
Local Template Saving: Save your email templates locally for future use or modification.
-
Image Selection from Unsplash: Access a vast collection of images from Unsplash directly within the email editor for adding visuals to your emails.
-
Code Editing: Edit the email template code directly for fine-tuning the structure and design to your preference.
-
Preview Mode: Preview your email templates in both mobile and desktop views to see how they will appear to recipients.
- More UI controls ⏳
- New Layout and sections ⏳
- Save templates online
- Schedule email send
- Open AI integration
To get started with the Email Editor, follow these steps:
-
Installation: Clone the repository to your local machine and install the required dependencies.
git clone https://github.com/knowankit/email-editor cd email-editor yarn
-
Run the Application: Start the development server to launch the email editor in your web browser.
yarn dev
-
Create and Edit Templates: Begin creating and editing email templates with the easy-to-use editor.
-
Save and Export Templates: Save your templates locally and export the generated code for use in your email campaigns.
- Drag email elements from the sidebar and drop them into your email template canvas.
- Customize element attributes and content using the built-in options.
- Use the undo and redo buttons to navigate through your editing history.
- Save your email templates locally by clicking the "Save" button.
- Access your saved templates later for further editing.
- Click the "Unsplash" button to access a library of high-quality images.
- Choose and insert images directly into your email template.
- Switch to the "Code" view to directly edit the MJML code of your email template.
- Make advanced customizations to the template structure.
- Click the "Preview" button to see how your email template will appear on both mobile and desktop devices.
This project is licensed under the MIT License.
Feel free to contribute to this project by submitting bug reports, feature requests, or pull requests.