Home

Awesome

💌 Free, Open Source HTML Email Editor and Designer.

sendwithses-opensource-drag-and-drop-html-editor

👹 Who?

This email designer was originally built for use within SENDUNE (formerly Send With SES).

⁉️ Why Choose SENDUNE Email Designer?

3️⃣ Three Ways To Create Templates

Comes with three template types that let you design any kind of transactional or marketing emails. Altogther, you can create and save unlimited templates.

🚀 Built On Solid Fundamentals.

Follows a few fundamental rules to design emails that work in nearly all email clients (web and mobile). It is built upon some great work done by these people.

🎪 Live Demo.

Play around with the live demo at https://designer.sendune.com. You can design a template and send yourself a test email.

👩‍💻 Installation

Open in StackBlitz

(This StackBlitz demo is built with Angular 15. The same process should work with other Angular versions.)

Install via NPM:

npm install @send-with-ses/ng-email-designer

Or via YARN:

yarn add @send-with-ses/ng-email-designer

🖼️ Image Handling

You can use a cloud storage of your choice (ex: AWS S3, Cloudflare R2, GCP Cloud Storage etc) for storing your images. Please implement your image upload functionality and provide it to the library as below (imageUploadTriggered/imageSelectionTriggered).

<lib-email-designer #emailEditor class="px-0"
        [type]="selectedTemplateType" [template]="selectedTemplate"
        (imageSelectionTriggered)="onImageSelectionTrigger($event)"
        (imageUploadTriggered)="onImageUploadTrigger($event)"
        (emailContentChanged)="onEmailContentChange($event)"
        >
</lib-email-designer>

Click here for more documentation

🎨 UI Theming and Styles

You can make a few changes to make the Email Designer match your website colors.

Import the following styles into your global styles file (e.g., styles.scss):

@import '../node_modules/@send-with-ses/ng-email-designer/src/lib/theme.scss';
@import '../node_modules/@send-with-ses/ng-email-designer/src/lib/email-editor.css';

To make the Email Designer match your website's UI, include the following in your main.scss or styles.scss file and change the colors as you like.

 :root {
    --sws-icon-color: #ccc;
    --sws-icon-hover-color: #555;
    --sws-header-background: #eee;
    --sws-header-text-color: #555;
    --sws-border-color: #ccc;
 }

🤝 Contribute.

Feel free to fork the repository, make improvements, and submit pull requests.

🐛 Issues or Ideas:

Spotted a bug or got an idea? Just open an issue or write to designer at sendwithses dot org.

⭐ Minimal Rationalism (Optional Reading)

SENDUNE Designer focuses on simplicity and ease of use over a heavy feature set. Over years of sending emails, we've come across some email patterns that work and many that don't. Some are design related while some are organisation related. Let's break some bubbles here - in no particular order.