This article will explain how efficient it is to use the premium version of codedmails to create responsive HTML emails quickly with semantic code which will work on all email clients.
With our templates you write less code and generate full blown semantic HTML emails. We use MJML as the email markup language, which helps us create responsive emails and email client specific code. You also end up writing 80% less code. You can read more about MJML later in this article.
After downloading the premium version, unzip the file and open the folder in any code editor of your choice. e.g i am using VSCode. You should have the following folder structure.
- MJML folder contains all the source files
- HTML folder contains the rendered HTML versions
The code screenshot below is of General Email Template Dineos with live split preview. We will explain later how you can use the split view in VSCode.
Now you can edit your files, change text, images etc as per you needs. Once your changes are complete you can now build the HTML version which can be now used anywhere. To build the HTML version please follow the simple steps below.
If you check the ready to use HTML code of the template above, you will see approximately 500-600 lines or codes. Now compare that with approximately 120 lines of code with clean mjml components like mj-section ( to create sections), mj-text (to add text), etc. That's around 80% less code. With the source files you can edit the templates and keep the structure clean and readable.
Codedmails requires Node.js v4+ to run. Open the folder using any terminal and then Install the dependencies and devDependencies by running the command below.
$ npm install -d
Build, watch and run a server locally
The command below will run the server and also watch for any MJML file changes.
$ npm run start
You can visit http://127.0.0.1:8080/ or http://localhost:8080 to view them in your browser.
Build all the HTML files
$ npm run build
The above command read all the mjml files inside
static/templates/mjml and build them inside
static/templates/html folder. Now you can copy the HTML and use it in your projects.
BONUS: MJML - The Email Framework
All the templates are designed using MJML syntax. If you don't know about MJML, it is a markup language designed to code responsive emails. It is easy to understand and code especially the layouts e.g containers, sections, columns etc . For more information please visit MJML website. We will cover more about MJML in a different article .
If you are using VS Code, we recommend using VSCode MJML Extension to use the split view for easy editing of mjml source files.
Thank you and happy emailing.
If you have questions or feedback please send us an email to firstname.lastname@example.org. We would love to hear from you ❤️.
This article is about the premium version of codedmails which contains all the source files and can be used for commercial/enterprise projects. If you like to use the template for open source or personal purposes, you can always use the free version. Click here to read more about the free version.