Readit News logoReadit News
Posted by u/samdung 2 years ago
Show HN: Sendune – open-source HTML email designer
Demo: https://designer.sendune.com/ Code: https://github.com/SendWithSES/Drag-and-Drop-Email-Designer

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.

AMA: hello at sendune dot com

shortformblog · 2 years ago
No MJML feels like a mistake. I design emails and that is literally the most important feature to me.
shortformblog · 2 years ago
Because someone keeps commenting and immediately deleting their comments in reply to this: MJML is a tool to essentially “fix” email, which essentially has to work around out-of-date clients and incomplete HTML specs.

If it feels out of date, it’s because HTML email itself is out of date.

Deleted Comment

Deleted Comment

samdung · 2 years ago
Oh! I wasn’t expecting this. I’ll be here a couple of hours to answer any questions.
mnutt · 2 years ago
Looks very nice. I'm curious about "no mjml" -- I've worked with authoring tools in related domains and found that separating the serialization format from the output format has some benefits. It manifested in needing to store editing concerns like "this element is locked" in the HTML when it had no business being in the HTML output.
brianjking · 2 years ago
Oh wow, nice, thanks for the MIT License!
layer8 · 2 years ago
How did you reliably determine what works and what doesn’t in “untold combination of os/desktop/mobile clients“? Is there a description of that somewhere?
daliusd · 2 years ago
There is site for that https://www.caniemail.com/ . I don’t use it, even if I work on email marketing software, but I guess it might be useful sometimes.
cheapgeek · 2 years ago
No malicious intent here but the post says it was submitted by you.

What exactly were you "not expecting"?

samdung · 2 years ago
wasn't expecting to hit the front page so soon given all the attention towards crowdstrike.
_kush · 2 years ago
not expecting to be on the front page maybe
bogzz · 2 years ago
the upvotes?
AlexDragusin · 2 years ago
Very nice work and very well deserved the front page #2 spot! Thank you!
RamiAwar · 2 years ago
Anyone who has touched HTML emails knows the devilry involved. Kudos for developing and open sourcing this! Excited to try it out for my newsletter.
deskr · 2 years ago
> knows the devilry involved

You're being too kind if anything. Whilst trying to bash HTML emails into something acceptable I questioned if my life wouldn't better have been spent as a monk in Tibet.

adeptima · 2 years ago
This work looks very promising. "HTML for email" is indeed hard to design and hard to implement. Especially editing on mobile, tablet devices, or asian (two+ bytes japanese, chinese) languages input nightmare.

I do lot of email templating for B2B CRM use cases and decided to opt out for a bit different approach based on slatejs/platejs editor

https://docs.slatejs.org/

https://github.com/ianstormtaylor/slate

https://github.com/udecode/plate

The internal representation of email template with variables in slatejs/platejs json format can look like:

{ "type": "h1", "children": [ { "text": " Blocks {{template_value}} {{$timenow}}}" } ], "id": "1" }

Can be easily stored in Postgres jsonb. Very easy to add Reacjs base widgets like mentioning, media, diagrams, etc inside of slatejs/platejs editor.

The drawback is that you can't design the exactly the same pixel perfect template.

The better abstraction is probably MJML - https://mjml.io/ ... and yet with slatejs/platejs json format you can copy&paste your editings across various assets in CRM, knowledge base, etc

Storing data in MJML is not a great choise for me

<mj-text align="left" color="#55575d" font-family="Arial, sans-serif" font-size="13px" line-height="22px" padding-bottom="0px" padding-top="0px" padding="10px 25px"> ...

Was thinking about using something similar to /SendWithSES/Drag-and-Drop-Email-Designer as the last final step ... but couldn't settle it my brain and most end-users dont care anyway.

Any thoughts on data representations and "Postgres <> Editor > Email HTML > Send button" dataflow is greatly appreciated. Very few people have serious thoughts on the subject.

shortformblog · 2 years ago
You can set an <mj-class> at the top of the file for a given design format to simplify your code. So in your example, if you did:

<mj-class name="typebox" padding-bottom="0px" padding-top="0px" padding="10px 25px">

<mj-class name="paragraph" color="#55575d" align="left" font-family="Arial, sans-serif" font-size="13px" line-height="22px">

That would allow you to simplify your callbacks to

<mj-text mj-class="paragraph typebox">

You can also set CSS classes as well if you need something outside the MJML spec for some reason (which would potentially cover some of your cross-platform concerns).

MJML also integrates well with other languages. For example, I use a Craft CMS integration to pull data in via Twig to build complete templates directly from my CMS; there’s also an integration with Eleventy.

nik736 · 2 years ago
The drag and drop part is not working for me, Firefox, macOS. I can click on the elements on the left and they will pop up, but I am not able to drag them onto the email.
samdung · 2 years ago
although the name says 'drag and drop', it's not truly that. you click on any column in the designer and then select the component (heading, text, image, etc) in the left panel. you can then move components up and down using the arrows.

we found this approach simpler than drag and drop, especially when designing long emails.

let me know if drag and drop is something thats an absolute for you. we can bring it back.

spongeb00b · 2 years ago
UI-wise then I wonder if it would work better to have a "+" button inside each column, clicking that then gives a popover of available components right where you’re adding them.
orra · 2 years ago
Cool that you open sourced this. As you say there's nothing open quite like this.

Not using MJML as a design decision. Foes that simplify deployment a lot, or just keep things lighter? In turn, do you have to strangle a lot of compatibility issues yourself? etc. Thanks.

carlosjobim · 2 years ago
I think it's distinctly uncool that this was published as open source. OP should charge money from all the swines that will use the software, including people like me.
samdung · 2 years ago
go ahead and feel free to use it. that is what we intended it for.
tejtm · 2 years ago
View -> Message Body As -> Plain Text

Not your fault, but please always provide fall back text.

samdung · 2 years ago
got it. plain text fall back is on our todo list.
mska · 2 years ago
Really great thanks! Is it possible to add responsive styles? Such as converting columns into rows on smaller device screens?
sexy_seedbox · 2 years ago
OP should have used the patterns from Cerberus: https://github.com/emailmonday/Cerberus
samdung · 2 years ago
we did indeed use some design patterns from Cerebrus along with a few others. our documentation in fact credits Ted Goas, Nicole Merlin, and Mark Robbins

https://github.com/SendWithSES/Drag-and-Drop-Email-Designer

samdung · 2 years ago
Yes, this designer does that. please test it out.