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: '',
  },
  maizzle: {
    config: {},
  }
}
tailwind Type Default Description
config Object null A Tailwind CSS config object.
css String @tailwind utilities; A CSS string. To use Tailwind CSS, you should at least use @tailwind utilities (default)
maizzle Type Default Description
config Object null A Maizzle config object.

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

Maizzle.render(
  str,
  {
    tailwind: {
      config: require('./tailwind.config'),
      css: '@tailwind utilities; .myborder { @apply border border-solid border-gray-300; }',
    },
    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="bg-blue hover-bg-blue-dark text-white text-center rounded">
      <a href="https://maizzle.com" class="text-white inline-block text-sm font-semibold py-16 px-24 no-underline">Confirm email address</a>
    </td>
  </tr>
</table>
{% endblock %}`

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