![]() This command will generate the HTML file based on your MJML file. MJML: Export HTML Export HTML file from MJML. MJML: Copy HTML Copy the result HTML to clipboard. Available commands The following commands are available: MJML: Beautify or Format Document Beautify MJML code. Once installed, open your package.json and modify it to add the MJML build command in the scripts. Start command palette and start typing MJML. Okay, let's now install MJML library as devDependencies using the the command below: yarn add -D mjml Then create an empty yarn.lock in the root folder because you might receive an error saying "The nearest package directory /folder/to/current/xxx doesn't seem to be part of the project declared in /folder/to/outside/xxx." Install MJML library Feel free to modify the file later if you need to. The command parameters -y will skip the interactive session and use the default options. Then, initialize Yarn using the command below: yarn init -y Now, open the terminal in Visual Studio Code. Inside it, create a file named index.mjml. Open the created folder in your Visual Studio Code. This will be the root folder of your code. Now, create your folder and give it a name that best describes your email template. And we'll use Yarn as our package manager, it's just like npm but faster. We'll be using Visual Studio Code as our IDE in this tutorial as we will utilize a few extensions from their marketplace. Make sure to install them if you haven't! If you don't want to go through the steps below and you just want to get the boilerplate to save time, you can clone it here or run the git command below: git clone my-email-templateĭon't forget to ⭐ and share the repo if you like it! Prerequisitesī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. This will give you a head start and help you build your email template even faster. If you're already on board and ready to get started, I'll now teach you how to set up local development for MJML framework. If you're still not convinced, you can learn more about this framework here. The semantic syntax is so simple! I didn't have to struggle as much with responsiveness as it works well on different email platforms, even on Outlook. I've shared my experience with this framework with my colleagues and they were also amazed and convinced. I'm glad I did because I'm now able to write less, save time and code more efficiently. Originally created by a team of developers at Mailjet, MJML's objective is to simplify the way people design responsive emails.įrom the first glimpse of this framework, I was already hooked because this is exactly what I needed to improve my experience in building email templates. It's called MJML - short for Mailjet Markup Language. There's already an email framework that makes it less painful to build responsive email templates. Are you still building your email templates with just plain HTML where you write code in an old and unconventional way with too much repetition resulting in large amounts of code that's very hard to maintain? Well, say no more. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |