# Open source HTML email editor and designer

The core of [SENDUNE](https://sendune.com/) is the email template designer. It lets you create and save templates that you can use to send emails manually or via the API.

* The source code is available on [Github](https://github.com/SendWithSES) under the MIT license.
* A demo is available here: <https://designer.sendune.com/>

HTML for email is probably the hardest code to write. Even a teeny-tiny deviation from the rules will break the email in untold combination of os/desktop/mobile clients. It's mid 2024. Almost 50 years since email was invented and 35 years since HTML was born. A 'basic-open-source-HTML-email-designer' must be a solved problem, right? We thought so too. Sadly, that's not the case. There are a few decent open source email designers but they carry dependencies that make them cumbersome to embed within your app. That's why we decided to open source our HTML Email Designer. The SENDUNE email designer focuses on simplicity and ease of use. It is light-weight. It does pure HTML - no intermediate code wranglers like mjml. There is no lock-in of any kind. Save HTML output as a template and use with ANY email service provider. Feel free to fork the repository, make improvements, and submit pull requests.

#### ⁉️ Why Choose SENDUNE Email Designer? <a href="#why-choose-sendune-email-designer" id="why-choose-sendune-email-designer"></a>

* **Truly Open Source:** Use it for personal use or commercial use or whatever.
* **Truly Free:** Because the ones that say 'free', are not.
* **Truly Works:** Because the ones that are free don't seem to work.
* **Truly HTML:** No intermediate code wranglers like mjml.
* **Truly Fast and Light Weight:** Because you have better things to do with your time.
* **Truly No-Code:** Design like a pro without coding headaches. Our minimal interface gets out of your way.
* **Truly Democratic:** Save HTML output as a template and use with ANY email service provider.

#### 3️⃣ Three Ways To Create Templates <a href="#id-3-three-ways-to-create-templates" id="id-3-three-ways-to-create-templates"></a>

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

* **Drag and Drop Designer** - Start designing beautiful emails immediately.
* **HTML Code Editor** - Reuse HTML templates that you already have or code them from scratch.
* **Plain Text Emails** - 'Minimalists'. This is for you.

#### 🚀 Built On Solid Fundamentals. <a href="#built-on-solid-fundamentals" id="built-on-solid-fundamentals"></a>

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.

* Ted Goas - <https://www.cerberusemail.com>
* Nicole Merlin - <https://www.emailwizardry.com.au>
* Mark Robbins - <https://www.goodemailcode.com>

#### 🎪 Live Demo. <a href="#live-demo" id="live-demo"></a>

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

#### 👩‍💻 Installation <a href="#installation" id="installation"></a>

Install via NPM:

Copy

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

Or via YARN:

Copy

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

#### 🖼️ Image Handling <a href="#image-handling" id="image-handling"></a>

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

Copy

```
<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](https://www.npmjs.com/package/@send-with-ses/ng-email-designer) for more documentation

#### 🎨 UI Theming and Styles <a href="#ui-theming-and-styles" id="ui-theming-and-styles"></a>

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):

Copy

```
@import '../node_modules/email-designer/src/lib/theme.scss';
@import '../node_modules/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.

Copy

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

#### 🤝 Contribute. <a href="#contribute" id="contribute"></a>

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

#### 🐛 Issues or Ideas. <a href="#issues-or-ideas" id="issues-or-ideas"></a>

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

\- - - - - - - - - - - - - -

SENDUNE open source HTML editor and template builder.

Available on Github. MIT license.

<https://github.com/SendWithSES>

[![](https://docs.sendune.com/~gitbook/image?url=https%3A%2F%2Fhackerbadge.now.sh%2Fapi%3Fid%3D41007403\&width=300\&dpr=4\&quality=100\&sign=9d01a94b\&sv=1)](https://news.ycombinator.com/item?id=41007403)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://blog.sendune.com/email-resources/opensource-html-email-editor-and-nocode-designer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
