@templatical/renderer

JSON → MJML renderer for Templatical email templates. Runs in the browser or on Node.

Converts Templatical's JSON template format into MJML, which you then compile to HTML using any MJML library. Pure functions, zero runtime dependencies aside from @templatical/types.

Use this on your backend to render templates server-side before sending email — or in the browser to preview before save.

Install

npm install @templatical/renderer mjml

Usage

Browser or Node — JSON → MJML

import { renderToMjml } from '@templatical/renderer';
import type { TemplateContent } from '@templatical/types';

const content: TemplateContent = JSON.parse(stored);
const mjml = renderToMjml(content);

Node — MJML → HTML for sending

import { renderToMjml } from '@templatical/renderer';
import mjml2html from 'mjml';

const mjml = renderToMjml(content);
const { html } = mjml2html(mjml);

// Send via Postmark, Resend, SES, Mailgun, anything
await mailer.send({ to, subject, html });

With custom fonts and merge tag values

const mjml = renderToMjml(content, {
  customFonts: [
    { name: 'Geist', url: 'https://fonts.googleapis.com/...' },
  ],
  defaultFallbackFont: 'Arial, sans-serif',
  allowHtmlBlocks: true,
});

API

• renderToMjml(content, options?) — render TemplateContent to an MJML string. Pair with the mjml package to compile to final HTML.

Options:

• customFonts — CustomFont[] declarations rendered into <mj-attributes>
• defaultFallbackFont — fallback when a block doesn't specify a font
• allowHtmlBlocks — pass false to strip HTML blocks before render (e.g. for untrusted content)

Documentation

• How rendering works
• Renderer API

Full reference at docs.templatical.com.

License

MIT