Розробка і верстка шаблонів транзакційних email (MJML)

Розробка та верстка шаблонів трансакційних email (MJML)

MJML — фреймворк для створення email-шаблонів з адаптивною версткою. Ви пишете компоненти на MJML, на виході отримуєте валідний HTML з таблицями, сумісний з Outlook, Gmail, Apple Mail.

Структура MJML-шаблону

<mjml>
  <mj-head>
    <mj-preview>Ваше замовлення #{{ orderId }} підтверджено</mj-preview>
    <mj-attributes>
      <mj-all font-family="Inter, Arial, sans-serif" />
      <mj-text font-size="16px" line-height="1.6" color="#374151" />
      <mj-button background-color="#3b82f6" border-radius="8px"
        font-size="16px" font-weight="600" />
    </mj-attributes>
    <mj-style>
      .button-td { padding: 24px 0 !important; }
    </mj-style>
  </mj-head>

  <mj-body background-color="#f9fafb">
    <!-- Шапка -->
    <mj-section background-color="#ffffff" padding="24px 32px 0">
      <mj-column>
        <mj-image src="{{ logoUrl }}" width="120px" align="left" />
      </mj-column>
    </mj-section>

    <!-- Основний контент -->
    <mj-section background-color="#ffffff" padding="24px 32px">
      <mj-column>
        <mj-text font-size="24px" font-weight="700" color="#111827">
          Замовлення #{{ orderId }} підтверджено ✓
        </mj-text>
        <mj-text>
          Привіт, {{ customerName }}! Ваше замовлення прийнято та передано в обробку.
        </mj-text>

        <!-- Товари -->
        <mj-table>
          {% for item in items %}
          <tr>
            <td style="padding: 8px 0; border-bottom: 1px solid #e5e7eb;">
              {{ item.name }}
            </td>
            <td style="padding: 8px 0; border-bottom: 1px solid #e5e7eb; text-align: right; color: #6b7280;">
              {{ item.quantity }} × {{ item.price }}
            </td>
          </tr>
          {% endfor %}
          <tr>
            <td style="padding-top: 12px; font-weight: 700;">Разом</td>
            <td style="padding-top: 12px; font-weight: 700; text-align: right;">{{ total }}</td>
          </tr>
        </mj-table>
      </mj-column>
    </mj-section>

    <!-- CTA -->
    <mj-section background-color="#ffffff" padding="0 32px 32px">
      <mj-column>
        <mj-button href="{{ orderUrl }}">Відстежувати замовлення</mj-button>
      </mj-column>
    </mj-section>

    <!-- Футер -->
    <mj-section padding="16px 32px">
      <mj-column>
        <mj-text font-size="13px" color="#9ca3af" align="center">
          © 2026 Example Inc. · <a href="{{ unsubscribeUrl }}">Відписатися</a>
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Компіляція MJML в HTML

npm install mjml

import mjml2html from 'mjml';
import { readFileSync } from 'fs';
import Handlebars from 'handlebars';

function renderEmailTemplate(
  templateName: string,
  data: Record<string, unknown>
): string {
  const mjmlTemplate = readFileSync(`templates/${templateName}.mjml`, 'utf-8');

  // Компілюємо Handlebars-змінні в MJML
  const mjmlWithData = Handlebars.compile(mjmlTemplate)(data);

  // Конвертуємо MJML → HTML
  const { html, errors } = mjml2html(mjmlWithData, {
    validationLevel: 'strict',
    minify: true
  });

  if (errors.length > 0) {
    throw new Error(`MJML errors: ${errors.map(e => e.formattedMessage).join('\n')}`);
  }

  return html;
}

// Використання
const html = renderEmailTemplate('order-confirmation', {
  orderId: '12345',
  customerName: 'Іван',
  items: order.items,
  total: '5 430 ₴',
  orderUrl: `https://example.com/orders/12345`
});

await sendEmail({ to: customer.email, subject: `Замовлення #12345 підтверджено`, html });

Тестування у поштових клієнтах

• Email on Acid / Litmus — платні сервіси для скриншотів у 90+ клієнтах
• MJML Preview (плагін VS Code) — живий попередній перегляд
• Mailtrap — відправлення в тестовий inbox

Строки реалізації

Набір з 3–5 трансакційних шаблонів (замовлення, скидання пароля, привіт) — 3–5 днів.