Back to Novu

Readme

libs/maily-render/readme.md

3.15.02.3 KB
Original Source
<div align="center"></div> <div align="center"><strong>@novu/maily-render</strong></div> <div align="center">Transform <a href="https://maily.to">Maily</a> content into HTML email templates.</div> <p align="center"> <a href="https://github.com/arikchakma/maily/blob/main/license"> </a> <a href="https://maily.to">
</a>
</p>

Install

Install @novu/maily-render from your command line.

sh
pnpm add @novu/maily-render

Getting started

Convert React components into a HTML string.

ts
import { render } from '@novu/maily-render';

const html = await render({
  type: 'doc',
  content: [
    {
      type: 'paragraph',
      content: [
        {
          type: 'text',
          text: 'Hello World!',
        },
      ],
    },
  ],
});

Variables

You can replace variables in the content.

ts
import { Maily } from '@novu/maily-render';

const maily = new Maily({
  type: 'doc',
  content: [
    {
      type: 'paragraph',
      attrs: { textAlign: 'left' },
      content: [
        {
          type: 'variable',
          attrs: {
            id: 'currentDate',
            fallback: 'now',
            showIfKey: null,
          },
        },
      ],
    },
  ],
});

maily.setVariableValue('currentDate', new Date().toISOString());
const html = await maily.render();

Payloads

Payload values are used for the Repeat and Show If blocks.

ts
// (Omitted repeated imports)

const maily = new Maily({
  type: 'doc',
  content: [
    {
      type: 'repeat',
      attrs: { each: 'items', showIfKey: null },
      content: [
        {
          type: 'paragraph',
          attrs: { textAlign: 'left' },
          content: [{ type: 'text', text: 'Hello' }],
        },
      ],
    },
  ],
});

maily.setPayloadValue('items', ['Alice', 'Bob', 'Charlie']);
const html = await maily.render();

Contributions

Feel free to submit pull requests, create issues, or spread the word.

License

Non-Commercial Use Only. See LICENSE for more information.