7 ms·
Show HN: Sendune – open-source HTML email designer
Demo: https://designer.sendune.com/ https://designer.sendune.com/
Code: https://github.com/SendWithSES/Drag-and-Drop-Email-Designer 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
- samdung 2y agoOh! I wasn’t expecting this. I’ll be here a couple of hours to answer any questions.
- AlexDragusin 2y agoVery nice work and very well deserved the front page #2 spot! Thank you!
- brianjking 2y agoOh wow, nice, thanks for the MIT License!
- cheapgeek 2y agoNo malicious intent here but the post says it was submitted by you. What exactly were you "not expecting"?
- mnutt 2y agoLooks 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.
- layer8 2y agoHow 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 2y agoThere is site for that https://www.caniemail.com/ 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.
- rmbyrro 2y agoI have the personal impression that it would be a net positive if all emails were written as text. Ok, in some cases I see why html would make some sense. In those cases, my opinion is: send text and invite the person to view markup content in their browser. The e-mail context is not suitable for markup, styling, and all this stuff.
- trallnag 2y agoSo plain text, not even links with <a>?
- graemep 2y agoYes. Links can be automatically marked up in the client. The problem is there is no practical way of getting back to plain text, or even to a different type of markup.
- rspoerri 2y agoI intentionally disable html on my email programms and block all internet access for my mail program to the internet (except for the smtp, imap hosts of course)
- NoboruWataya 2y agoI would love first class support for some limited subset of markdown (same for browsers actually).
- FredPret 2y agoTalking to non-tech people means you're going to be copy-pasting screenshots and replying in blue text next to their bullet points that was written in black text. To say nothing of legitimate marketing emails (which many people rely on to get coupons and deals) that has to feature pictures and the like.
- prmoustache 2y ago> legitimate marketing emails I don't think there is such a thing.
- gamegod 2y agoLooks awesome. Is there a way to load saved templates?
- samdung 2y agothere's an export HTML functionality. you can use this to save templates once you embed this in your project.
- gamegod 2y agoI appreciate the response, but that's not what I was asking. I'll rephrase as a workflow question: After I make a design in your editor, I'll want to reuse that for future emails. Is there a way to load a saved design back in (that I previously made in your editor) so I don't have to redesign every email from scratch?
- samdung 2y agogot it. that is an implementation you will have to do when you embed it in app. it's basically exporting the HTML, giving it a name and storing it a database. this functionality is beyond the scope of the demo. but we have it at https://sendune.com/ https://sendune.com/
- philmo1 2y agoAbsolutely amazing. Really makes so much sense to have a solid mail editor as OSS!
- ibdf 2y agoI was writing them email templates 15 years ago... oh... look we are still using tables. How has email markup not evolved?
- samdung 2y agoit has not evolved much. and i believe that's a good thing. this is the reason why emails from 20 years ago look the same even if you open them today. given the short life of everything on the internet, email is a wonderful thing.
- NoboruWataya 2y agoYes, I have no idea why UI practices need to constantly "evolve". As far as I am concerned a lot of UI is getting worse over time so the less evolution the better.
- johannes1234321 2y agoThere is some need to evolve as contexts change. Screen sizes and capabilities, computing speed, available bandwitdth etc. Also humans seem to need fashion as a mechanism to show belonging and distinction. (Differentiate form parents generation, show affiliation to some sub culture, ...) And then there is the hope to make the production more efficient. (Which may not work out)
- userbinator 2y agoThere are periodic items on here from people having trouble with self-hosted email, but nonetheless I think it's also not suffered the same closed-systems/walled-garden effect as much as other protocols like IM.
- conradolandia 2y agoEmail clients and servers have not evolved
- skull723 2y ago
- rd 2y agoHow does this compare to something like resend?
- gls2ro 2y agoIs this a genuine question? I dont want to be rude but I dont understand how are you asking this? Just in case it is a genuine question: - This is a tool for designing/creating emails - they say in the title of this post "Open source HTML email designer" - Resend is a tool for sending emails: "Deliver transactional and marketing emails at scale" this is from the hero of resend homepage I dont know any of them, just opened the Resend website and read the hero and read the description of the post you are commenting.
- rd 2y agoDo your research before responding to me next time. They're both email design tools - Resend is based around building your emails in React.
- Turboblack 2y agoThis is a very useful thing, I will definitely test it
- nik736 2y agoThe 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 2y agoalthough 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 2y agoUI-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.
- PodgieTar 2y agoGosh, my first job was writing HTML emails. Those heady days of lamenting the fact that some companies STILL use Lotus Notes not dead, I see.
- deleted 2y ago[deleted]
- ramathornn 2y agoWow love it, great work on this! I think you've tapped into a nice market, trying to reproduce marketing dept. designs into HTML templates are always a pain. I'm looking forward to seeing the product grow!
- jessyco 2y agoLove it see it, I think most "designers" like this tools are behind paywalls and subscription email platforms. This looks great thank you for sharing.
- orra 2y agoCool 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 2y agoI 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 2y agogo ahead and feel free to use it. that is what we intended it for.
- carlosjobim 2y agoI'm super down voted by open source enthusiasts who want free stuff, but I really think you should charge for this software. It's only going to be used by businesses, so they should pay for it. You wouldn't go to your local McDonald's and offer to work for free for them all day, would you?
- samdung 2y agoTotally understand your point of view. HN community is largely well intentioned and net-net the software world is the better for it. The designer we have open sourced is part of our much larger communication platform (https://sendune.com https://sendune.com).
- ashok_m 2y agoLooking for a simple email designer which will give us compatibility in all email clients. Surely will test this in this weekend.
- _ache_ 2y agoDid there is any history about the name ? Keep reading "Send nude". Sorry.
- deleted 2y ago[deleted]
- dethos 2y ago[flagged]
- scosman 2y agoYou can use HTML with plain text fallback. That's still the vast majority of marketing/form emails. HTML works fine, and adds important features like formatting text and links. HTML without images is ideal, as images are often blocked (as you mention). I prefer plaintext too, but for a marketing email (ie, "confirm your account") consumers will think it feels "off" or unpolished given what they are used to. It will likely lead to churn. Clients can opt to view plaintext if they prefer. Edit: also it's a bit funny the page you link, useplaintext.email, uses lots of HTML formatting.
- deleted 2y ago[deleted]
- fitsumbelay 2y agoMy sentiments are totally with this comment, however as others have pointed out you can deliver both via plaintext fallback And in defense of html emails: for marketing missions there's nothing like a nice piece of visual design -- layout, color, possibly some type design, but not necessarily images since folks like me turn them off because of tracking -- to get attention and drive interest. Also, html can allow for column layout that could keep email content shorter than plain text version
- kevinsync 2y agoI would wager that the vast majority of people consume email via Gmail, Outlook, or Mail (Apple). You might have the holdovers like my parents who still use Thunderbird (because in early 2000's that was ideal of POP3 accounts, and they're used to it, and that's just how it will remain). All of those clients display HTML by default, and all marketing / account-related / branded emails are HTML emails. Every single reason cited in your link for choosing plaintext are irrelevant for the overwhelming majority of internet users worldwide. We could definitely productively debate the ethics surrounding marketing initiatives and data privacy, but at the end of the day, to me, plaintext destroys most of the functionality that makes email so useful.
- 2Gkashmiri 2y agowow. this should help to design invoices, what do you think? html to pdf is not a problem anyway so....
- samdung 2y agoyou can design absolutely anything with the HTML editor - invoices included.
- shortformblog 2y agoNo MJML feels like a mistake. I design emails and that is literally the most important feature to me.
- deleted 2y ago[deleted]
- deleted 2y ago[deleted]
- shortformblog 2y agoBecause 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.
- tejtm 2y agoView -> Message Body As -> Plain Text Not your fault, but please always provide fall back text.
- samdung 2y agogot it. plain text fall back is on our todo list.
- steviedotboston 2y agoI really like this idea!
- RamiAwar 2y agoAnyone 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 2y 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 2y agoThis 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://docs.slatejs.org/ https://github.com/ianstormtaylor/slate https://github.com/ianstormtaylor/slate https://github.com/udecode/plate 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/ 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 2y agoYou 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.
- Cyphase 2y agoI was just briefly searching for something like this the other day; will check it out. Thanks!
- micadep 2y agoSame, I was even surprised because I didn’t find anything.
- SoftTalker 2y agoThe entire premise is absurd. I will grant that many people want rich text, formatted emails with images and logos. I don't want that but understand the wants and needs are different for others. For gods sake why HTML? A fairly simple markup language (Markdown, orgmode, etc) would have sufficed, would have eliminated the need for separate plain and html versions of every email, been far more accessible to screen-readers and other assistive devices, been far less privacy-invading, and been far less vulerable to security problems. But no, the answer was "let's put a full-blown web browser in every email client" I know the horses have left the gate.
- grepfru_it 2y agoBecause at the time web browsers were taking off and web based mail services (Hotmail yahoo etc) were taking off. Back in that time the alternative to html was Tex. Why do we still boot to 16-bit protected mode to launch any OS on x64? shrug but you are welcome to move that mountain :)
- shortformblog 2y agoI just want one thread about HTML email to not be a re-litigation of this point. It’s been around for a quarter-century at this point. It’s well-established. It has plenty of warts, but it’s not going away. There are better ways to push the ball forward than this recurrent frustration over something that is so broadly used. A key one would be to improve support for making divs display properly in HTML emails, so the format could be more accessible, for example, as well as to look into ways to push corporations away from outdated email clients. Finally, a way to sandbox emails to help minimize concerns around risky designs would be ideal. AMP is a dirty word around these parts, but Google’s AMP for Email did some of these things. I don’t know what that would look like, but there has to be a better way to expel our energy than just being frustrated about something that’s unlikely to change.
- userbinator 2y agoThere was an attempt to standardise what looks like an HTML-subset for formatted emails: https://en.wikipedia.org/wiki/Enriched_text https://en.wikipedia.org/wiki/Enriched_text But unfortunately it wasn't very popular.
- mska 2y agoReally great thanks! Is it possible to add responsive styles? Such as converting columns into rows on smaller device screens?
- sexy_seedbox 2y agoOP should have used the patterns from Cerberus: https://github.com/emailmonday/Cerberus https://github.com/emailmonday/Cerberus
- samdung 2y agowe 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 https://github.com/SendWithSES/Drag-and-Drop-Email-Designer
- samdung 2y agoYes, this designer does that. please test it out.
- tamimio 2y agoIt looks great, I will have to try it!
- fallinditch 2y agoThis looks great, nice job! Does anyone here use Foundation for Emails? - I found it to be pretty good (circa 2020) but the code it produced still needed some tweaks to display images correctly in Outlook for Windows.
- mncsz 2y ago[flagged]
- ibotty 2y agoIs there some documentation on how to integrate it into a different web app? I would really like to open a template that is stored in the database and handle sending the mail, "exporting" (rename it to "save"), etc. Is that possible?
- samdung 2y agoYou can visit the following page for documentation on how to integrate it into your angular web app. https://www.npmjs.com/package/@send-with-ses/ng-email-designer https://www.npmjs.com/package/@send-with-ses/ng-email-design... You can integrate your api call in the exportHtml() method to save it to your database. And you can load the same template into the component by providing it to [template]. ex: <lib-email-designer [type]="selectedTemplateType" [template]="selectedTemplate" #emailEditor></lib-email-designer>