Project Structure

When you open the maizzle folder in the editor you see a bunch of files and folders. You might know some files and its use like package.json, tailwind.config.js etc. We'll explore other files and look at why they're here.

config.js

This file holds the configuration of the local build like which files to use, where to create the build, etc.

config.production.js

As the file name suggests, this file holds the configuration for the production build.

More about Maizzle

The src folder you see will have different subfolders one for holding assets. one holding components, layouts and finally email templates.

What are Components?

Components are files that you can pull into a Template. You can pass data and content to them, and they help you organize blocks of markup that you use often.

More about components 👉🏻 Components

What are Layouts?

Layouts are the foundation of any email template in Maizzle. Besides the standard parent-child templating relation, you can use Layouts to define markup that doesn't need to change often, like doctype, and or tags, with all the necessary child tags.

More about layouts 👉🏻 Layouts

What are Templates?

Templates in Maizzle contain the body of your email templates.

They're made up of two distinct sections:

• Front Matter

• Your HTML

More about templates 👉🏻 Templates

I hope now you have a reasonable understanding of components, layouts and templates.