Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/knowankit/email-editor

📧 A drag and drop email editor using Next.js, Zustand and MUI
https://github.com/knowankit/email-editor

drag-and-drop email-editor material-ui next-auth nextjs openai react-dnd react-dnd-html5-backend responsive

Last synced: about 9 hours ago
JSON representation

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

Awesome Lists containing this project

README

        

# Email Editor

![Trello clone](https://github.com/knowankit/email-editor/blob/develop/editor.gif)



Twitter: Ankit Kumar

Email Editor ([Demo](https://trello-clone-one.vercel.app/)) 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.

```bash
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.

```bash
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](LICENSE).

## Contributors

- [Ankit Kumar](https://github.com/knowankit)

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