Use in Node.js

You can use Maizzle in your Node.js app, to compile a string to an HTML email.

Usage

First, require() the framework in your application:

const Maizzle = require('@maizzle/framework')

Then, call the render() method, passing it a string and an options object:

const html = Maizzle.render(`html string`, options)

options is an object with the following structure:

{
  tailwind: {
    config: {},
    css: '',
    compiled: '',
  },
  maizzle: {
    config: {},
  },
  afterConfig() {},
  beforeRender() {},
  afterRender() {},
  afterTransformers() {},
}
tailwind
Option Required Type Default Description
config Yes Object null A Tailwind CSS config object.
css No String @tailwind components; @tailwind utilities; A string with CSS in PostCSS syntax. Gets compiled with Tailwind CSS. To use Tailwind, you should at least use @tailwind utilities
compiled No String '' A CSS string to use as-is. If provided, will override css. This will not be compiled with Tailwind, resulting in faster render time.
maizzle
Option Required Type Default Description
config Yes Object null A complete Maizzle config object.

Besides tailwind and maizzle, as you can see you can also pass certain functions to the options object. These are lifecycle hooks, also called Events in Maizzle.

Example

const Maizzle = require('@maizzle/framework')

let str = `---
title: Using Maizzle on the server
layout: src/layouts/master.njk
---

{% block template %}
<table>
  <tr>
    <td class="button">
      <a href="https://maizzle.com">Confirm email address</a>
    </td>
  </tr>
</table>
{% endblock %}`

Maizzle.render(
  str,
  {
    tailwind: {
      config: require('./tailwind.config'),
      css: `
        @tailwind utilities;
        .button { @apply rounded text-center bg-blue-500 text-white; }
        .button:hover { @apply bg-blue-700; }
        .button a { @apply inline-block py-16 px-24 text-sm font-semibold no-underline text-white; }
      `,
    },
    maizzle: {
      config: require('./config'),
    }
  }
).then(html => console.log(html))

Nunjucks

You can use Nunjucks templating to extend a Layout or include Partials or Components when using Maizzle in Node.js.

Env Config

You should always provide the render() method with a full Maizzle config object.

This means that if you want to use the default config.production.js that Maizzle comes with (which only contains options that need to be different from the base config), you should first merge it with the base config.js and provide that in the options object of the render() method.

We can do this with the deepmerge package.

1. First, make sure to install the package in your project:

npm i deepmerge

2. Next, create a merged Maizzle config in your script, and pass it to render():

const deepmerge = require('deepmerge')
const Maizzle = require('@maizzle/framework')
// create a full config for production
const maizzleConfig = deepmerge(require('./config'), require('./config.production'))

let str = `---
title: Using Maizzle on the server
layout: src/layouts/master.njk
---

{% block template %}
<table>
  <tr>
    <td class="rounded text-center bg-blue-500 hover-bg-blue-700 text-white">
      <a href="https://maizzle.com" class="inline-block py-16 px-24 text-sm font-semibold no-underline text-white">Confirm email address</a>
    </td>
  </tr>
</table>
{% endblock %}`

Maizzle.render(
  str,
  {
    tailwind: {
      config: require('./tailwind.config'),
    },
    maizzle: {
      config: maizzleConfig,
    }
  }
).then(html => console.log(html))