canyetgin / email-editor

📧 A drag and drop email editor using Next.js, Zustand and MUI

Email Editor

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.

Features

• 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.

Upcoming features

• More UI controls ⏳
• New Layout and sections ⏳
• Save templates online
• Schedule email send
• Open AI integration

Getting Started

To get started with the Email Editor, follow these steps:

1. 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

2. Run the Application: Start the development server to launch the email editor in your web browser.

   yarn dev

3. Create and Edit Templates: Begin creating and editing email templates with the easy-to-use editor.

4. Save and Export Templates: Save your templates locally and export the generated code for use in your email campaigns.

Usage

Drag and Drop

• Drag email elements from the sidebar and drop them into your email template canvas.
• Customize element attributes and content using the built-in options.

Undo and Redo History

• Use the undo and redo buttons to navigate through your editing history.

Local Template Saving

• Save your email templates locally by clicking the "Save" button.
• Access your saved templates later for further editing.

Image Selection from Unsplash

• Click the "Unsplash" button to access a library of high-quality images.
• Choose and insert images directly into your email template.

Code Editing

• Switch to the "Code" view to directly edit the MJML code of your email template.
• Make advanced customizations to the template structure.

Preview Mode

• Click the "Preview" button to see how your email template will appear on both mobile and desktop devices.

License

This project is licensed under the MIT License.

Contributors

• Ankit Kumar

Feel free to contribute to this project by submitting bug reports, feature requests, or pull requests.