Cover image for Do you spend a lot of time creating HTML emails?

Do you spend a lot of time creating HTML emails?

hunzaboy profile image Aslam Shah ใƒป1 min read

As a developer, I always came across creating bulletproof emails that should look awesome in every email client. But it takes up more time than needed. Email clients make it hard to write the perfect code for emails.

So I decided to create a few templates that I can use every time I start a new project or change an existing email. However, I ended up creating 50+ email templates using MJML ( the best ;) ) email markup language and I thought to share it with the community. I present to you (drum roll ) CodedMails.

Alt Text

I hope these templates will help you rapidly create emails, which are tested and up to date with the latest email client changes.

Drop me a comment if you have any feedback.

Looking for your support and love :)

Posted on by:

hunzaboy profile

Aslam Shah


I am a frontend developer working in Hamburg, Germany. When i am not working, I love to play with css and create some awesome and cool open source projects.


markdown guide

Nice work dude, I was surprised to see that viewing the HTML was free <3 I don't write much email templates these days but whenever I did I just looked at example code from emails on reallygoodemails.com/.


Thanks, and Yes you can use the HTML versions for free.


Thank you, very useful.

Been looking for a template for my newsletter and I ended up doing this.

I am going to look at your project because I am starting to like to code emails.
Bright Mode

Dark Mode


Wow, these are awesome. Currently, we just generate plain text mails for our users, but this looks waaaaaay better.


Wow! Amazing stuff!

Writing emails has always been a hassle for me, now, it just got better and easier. I'm going all in.

Thanks, @hunzaboy !


I am glad you found it useful. ๐Ÿ˜Š


For what are there so many :root ... { display: none !important; } items in head? I have never seen someting like that?


Hey Nikola, what template are you refering to? I can give you better explanation based on the template. ๐Ÿ˜Š


Every one I have open, e.q. Welcome Email
code goes like

<style type="text/css">:root topadblock, :root script[src^="http://free-shoutbox.net/app/webroot/shoutbox/sb.php?shoutbox="] + #freeshoutbox_content, :root input[onclick^="window.open('http://www.FriendlyDuck.com/"], :root img[alt^="Fuckbook"], :root iframe[src^="http://static.mozo.com.au/strips/"],
 :root iframe[id^="google_ads_iframe"], :root div[jscontroller="U835zd"] + c-wiz[jsrenderer="YnuqN"], :root div[id^="zergnet-widget"], :root div[id^="traffective-ad-"], :root div[id^="sticky_ad_"], :root div[id^="q1-adset-"], :root div[id^="proadszone-"], :root div[id^="mainads"], :root 
div[id^="lazyad-"], :root div[id^="gtm-ad-"],.......

Ahh, it's something added by an extension you are using. ๐Ÿ˜Š You can check the github repo for the actual html versions.

FYI: I don't have any ad in the website so I am not sure why it is even added there.


Looks neat!

There's a typo on one of the cards btw, out instead of our- "All out templates...".