If you've never had to create HTML emails, then, well, you're not missing out, except on a lot of tedious work and a lot of headaches, because that is exactly what it is to create HTML emails. I mean, you might think, what's so bad? It's HTML and CSS. Yeah, and no, because we have to consider all of the email clients. There is no standardization whatsoever. So that means we have to spend a lot of time developing our emails. And so anything that could alleviate the tediousness of it would be much appreciated. And there are environments available, and we're going to look at one called Mazel, which

And so anything that could alleviate the tediousness of it would be much appreciated. And there are environments available, and we're going to look at one called Mazel, which allows us to create HTML emails using Tailwind CSS. And it really simplifies, simplifies isn't the right word, it gives us a rapid development environment to create HTML emails. But I think it's important to talk about what Mazel isn't before we start getting into it. Because it's not a magic bullet. Yes, we are going to write HTML. Yes, we are going to use Tailwind CSS, but it's not going to take that and then magically make it work with all of the clients.

Yes, we are going to use Tailwind CSS, but it's not going to take that and then magically make it work with all of the clients. We still have to know what clients support what HTML and what CSS. All Mazel is going to do is provide us the tools to make it a little bit easier to work with what would essentially be progressive enhancement as far as email is concerned. So of course, if you want to spend a little bit of time at the Mazel website, it's mazel.com. There is a CLI that we could install and use, but we're just going to use NPM. So if we take a look at the documentation, there is an installation, and it tells us exactly what we need to run, npx create mazel. So let's do that.

exactly what we need to run, npx create mazel. So let's do that. And this is going to walk us through the creation of our project. So let's imagine that we work for a company that we're building a suite of applications for approving things. For example, we'll have an application for approving invoices. So our accounts payable will receive an invoice from a vendor. But before accounts payable can pay that invoice, they need to be sure that this is a valid invoice and they need to be sure that it is approved by whatever department actually purchased that service or product from that vendor.

invoice and they need to be sure that it is approved by whatever department actually purchased that service or product from that vendor. So our system will send that invoice to that department. They will approve it, which will send a notification to accounts payable so that they can pay that invoice. But then we will have something similar for like approving documents and things like that. So we should create a new project. We'll just call it approval-emails. And next it will ask us, what starter pack do we want? Do we want the custom or default?

And next it will ask us, what starter pack do we want? Do we want the custom or default? Let's just use the default. And do we want to install dependencies? Yes. Because if we don't install dependencies now, we will have to install the dependencies later. So we might as well just do that now. It does increase the amount of time that this project is created, but we got to do it. So we might as well do it now. And when that's done, we will cd into our project/approval_emails.

So we might as well do it now. And when that's done, we will cd into our project approval emails. Let's fire up the code editor. And we also want to go ahead and run our project. So we can do that with npm run dev. Now this is going to start up a development server so that as we make changes to our code, it will automatically update in the browser. And it will give us two sets of URLs. We are concerned with this local URL, localhost at port 3000. So let's open that up in the browser.

We are concerned with this local URL, localhost at port 3000. So let's open that up in the browser. And we will see two HTML files, promotional and transactional. These are emails that are part of the default starter pack. So if we look at the promotional email, well, it's a promotional email. And we can use this as a template if we wanted to. But then let's also look at the transactional. The idea behind this transactional is that it's prompting the user to do something. So in this case, it would be confirming their email address. Now there are some similarities between these two emails, the background color, and of course

So in this case, it would be confirming their email address. Now there are some similarities between these two emails, the background color, and of course the logo at the top. But of course there are differences here. And I'm pointing that out because even though these are two different emails, they use the same layout file. So inside of our project, let's go to the source folder. We're going to see components, which we will talk about later on. But there's a few HTML files inside of components. There's a CSS folder that has resets, tailwind, and utilities.

But there's a few HTML files inside of components. There's a CSS folder that has resets, tailwind, and utilities. There's an images folder, which has that logo that we saw in those emails. Then there's a layouts, which has a main.html. And this is, well, it's a layout. This is a template that the other emails can use. And then there's the templates folder, which we see promotional and transactional. So these are the HTML files that essentially generate these two emails. And if we look, it starts with this x-main. Well, actually, let's look at the front matter.

And if we look, it starts with this x-main. Well, actually, let's look at the front matter. So there's this section that has the front matter of title, a preheader, an image, and a body class. Then there's this x-main element. And then inside of the x-main element is all of the content. So this is the promotional email. And we can see that there's this title, the Website Weekly Newsletter. Now, we don't see that listed here inside of the HTML, but we do see that for the title of the web page.

Now, we don't see that listed here inside of the HTML, but we do see that for the title of the web page. So if we change this to just changedTitle, then we will see that automatically updated in the browser. Or no, we won't. If we refresh this, okay, something went wrong. Our application errored out for whatever reason. So we've gotta run the dev command again. But once that's back up and running, now we can refresh and we can see that we have changedTitle.

But once that's back up and running, now we can refresh and we can see that we have changed title. So the idea here is that we should be able to make whatever changes that we need to inside of our code, and it would automatically be updated in the browser. And this time, it was. So I'm gonna do this. I'm gonna split the screen just so that as we make changes to the HTML, we will see those changes in the browser. But there's a lot here for the promotional. So let's do stuff with the transactional.

But there's a lot here for the promotional. So let's do stuff with the transactional. So we can see that the design of this email uses tables. And this is very common with HTML emails. Because as I mentioned, the support for HTML and CSS varies widely between different clients. And some clients will let you use divs and position them however you need to. But then there's ones like Outlook that doesn't. So just like how we used tables to create a consistent layout in our websites, we use tables to create a consistent layout in our emails.

So just like how we used tables to create a consistent layout in our websites, we use tables to create a consistent layout in our emails. Did I mention that this is a tedious process? So let's focus on this x-main element, because this is a departure from just typical HTML. So Mazel uses something called post-HTML. It's a templating engine. And you can create components, you can have layouts, you can have templates, all of which we have access to inside of our project here. So this x-main element is actually a reference to

all of which we have access to inside of our project here. So this x-main element is actually a reference to the layout file called main.html. So inside of our transactional template, this is essentially saying use the main.html layout. And so if we look at main.html, we see all of the stuff that we would expect to see. There's a doc type, HTML tag, the head tag, we will also see the body tag here. But if we scroll on down, we're gonna see this content. This is where the content of our template is being rendered.

But if we scroll on down, we're gonna see this content. This is where the content of our template is being rendered. So really, it's very straightforward. But also if you notice, there are different elements here like this if element, so that we can make decisions. There's an each element so that we can loop over a collection. So there's a lot of important stuff here that we're just gonna delete. So let's delete our main.html. Let's delete the promotional and transactional HTML because we're gonna start completely from scratch.

Let's delete the promotional and transactional HTML because we're gonna start completely from scratch. Well, not completely, we're gonna keep the components here. Maybe we'll talk about components later on. But for right now, let's create a new file inside of the layouts folder. And let's just call it layout.html. And since we don't have anything to display in the browser, we could just make this full screen for now. So let's add just our typical HTML boilerplate. The title, let's have approval.

So let's add just our typical HTML boilerplate. The title, let's have approval. And then for our body, let's just have our content. Let's go to our templates folder. Let's create a new file. Let's call this invoice_approval.html. Now since this is strictly content, we don't need to start with a DOCTYPE or anything like that. What we need to do is reference our layout page. And we do so with x-layout.

What we need to do is reference our layout page. And we do so with x-layout. And the reason why is because layout is the name of the file. We have layout.html. So therefore, in order to use that layout file, we start with an x- and then the name of our layout file. So if we changed the name of our layout to foo, then we would say x-foo to use that layout. But let's not do that. So let's add some content.

But let's not do that. So let's add some content. Let's have an h1 element. And let's start with our hello world incantation. So we can go back to the browser. And the two emails that we had are deleted. So let's close those. But if we go back to that listing directory, we now see this invoice_approval.html. That is the file that we just created.

we now see this invoice approval.html. That is the file that we just created. So if we navigate to that file, we see our email. We have our content, hello world. We can view the source. And other than the stuff for the browser sync, it is almost exactly what we would expect to see. It is a combination of our layout and our content. And so in the next episode, we are going to add some front matter to our template.

And so in the next episode, we are going to add some front matter to our template so that we can dynamically display content.