Open the main file src/index.mjml and type the following below: Let's set up the initial structure of our MJML code. Delete or clear the contents of the following below:
This is the index.html served by our local server. If you end up seeing the directory of /src/, just refresh the page and you should see your email template. You should be able to see the boilerplate with the text Hello World displayed on your browser. This command will open your default browser and go to If it doesn't, you can do it yourself too. Once installed, you can run the local development by typing the script in your terminal: yarn run dev
#Mjml template install#
Next, type the following below in your terminal to install the dependencies of the boilerplate: yarn install Then, open the terminal in Visual Studio Code. Make sure to install them if you haven't!Īlright, let's start by opening our project in Visual Studio Code. This is the link to the email template we'll accomplish by the end of this post, you can use it as your reference throughout this tutorial.īy the way, upon writing this post, I assume that you have some web development background and basic knowledge regarding npm, yarn, HTML and CSS. To start, you would need to setup your local development for MJML framework, I've written a separate post just for that, but you can also just clone the boilerplate to save time: git clone mjml-sample-edm
If you're new to it, then you're in the right place because I'm going to build an email template using MJML framework in a step by step way so you can follow me along. Originally created by a team of developers at Mailjet, MJML's objective is to simplify the way people design responsive emails. It's called MJML - short for Mailjet Markup Language. If you haven't heard about it yet, there's already an email framework that makes it less painful to build responsive email templates.
0 kommentar(er)
