Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 12 days ago
JSON representation
📧 A drag and drop email editor using Next.js, Zustand and MUI
- Host: GitHub
- URL: https://github.com/knowankit/email-editor
- Owner: knowankit
- License: mit
- Created: 2023-10-23T04:50:51.000Z (about 1 year ago)
- Default Branch: develop
- Last Pushed: 2024-10-15T10:32:50.000Z (23 days ago)
- Last Synced: 2024-10-16T05:50:18.550Z (23 days ago)
- Topics: drag-and-drop, email-editor, material-ui, next-auth, nextjs, openai, react-dnd, react-dnd-html5-backend, responsive
- Language: TypeScript
- Homepage: https://emaileditor.knowankit.com
- Size: 13.2 MB
- Stars: 89
- Watchers: 2
- Forks: 9
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Email Editor
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.