Разработка и вёрстка шаблонов транзакционных 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 транзакционных шаблонов (order, reset password, welcome) — 3–5 дней.