Mjml Email

MJML Email

Skill pro tvorbu responzivních emailů v MJML a jejich export do HTML.

Kdy použít tento skill

Použij při:

• tvorbě nebo úpravě email šablon v MJML
• newsletterech, transakčních emailech, marketingových emailech
• dotazech na MJML komponenty, atributy nebo syntaxi
• exportu MJML do HTML (CLI nebo Node.js)
• kompilaci MJML, validaci nebo konfiguraci (.mjmlconfig)

Trigger výrazy: mjml, email šablona, responsive email, export do html, mjml compile, newsletter šablona.

Základní struktura

• Kořen: mjml obsahuje pouze mj-head a mj-body.
• mj-body: celý obsah emailu, výchozí šířka 600px (atribut width).
• Layout: mj-section (řádky) → mj-column (sloupce). Každá sekce musí obsahovat alespoň jeden sloupec.
• Veškerý obsah (text, obrázky, tlačítka) patří uvnitř mj-column.
• Sloupce: výchozí auto-sizing (např. 2 sloupce = 50 % / 50 %), nebo width="400px" / width="50%" na mj-column.

Workflow tvorby

1. Kostra: Vytvoř mjml → mj-head (volitelně mj-title, mj-preview, mj-breakpoint, mj-font, mj-attributes) → mj-body → sekce a sloupce.
2. Výplň: Doplň komponenty dle reference/components.md. Pro head a layout viz reference/head-and-layout.md.
3. Export: Zkompiluj do HTML přes CLI nebo Node (viz níže).
4. Validace: Použij validationLevel: 'strict' nebo --config.validationLevel=strict pro kontrolu před nasazením.

Export do HTML

CLI

• Základní kompilace: mjml vstup.mjml -o vystup.html
• Výstup na stdout: mjml vstup.mjml -s
• Watch (překompilace při změně): mjml -w vstup.mjml
• Minifikace: mjml vstup.mjml -o vystup.html --config.minify=true
• Validace: --config.validationLevel=strict (nevykreslí při chybě), soft (výchozí), skip
• Pouze validace bez renderu: mjml --validate vstup.mjml

MJML musí být nainstalován v projektu nebo globálně: npm install mjml.

Node.js

import mjml2html from "mjml";

const { html, errors } = mjml2html(mjmlString, {
  validationLevel: "soft", // 'strict' | 'soft' | 'skip'
  beautify: false,
  minify: false,
});

Při validationLevel: 'strict' při chybách engine vyhodí MJMLValidationError; chyby lze číst přes exception.getErrors() / exception.getMessages(). Detail v reference/export-and-config.md.

Reference a příklady

• Head a layout (mj-head, mj-body, mj-section, mj-column, mj-group, mj-wrapper, mj-include, mj-hero): reference/head-and-layout.md
• Body komponenty (mj-text, mj-button, mj-image, mj-social, mj-divider, mj-table, …): reference/components.md
• Export, konfigurace, validace (CLI, Node API, .mjmlconfig): reference/export-and-config.md
• Kompatibilita (Outlook, Gmail, ending tags, best practices): reference/compatibility.md
• Ukázkové šablony (minimální, newsletter, transakční): examples/templates.md

Kompilace ze skriptu

V projektu lze použít helper skript (pokud existuje): ./scripts/compile-mjml.sh soubor.mjml – vygeneruje soubor.html ve stejném adresáři. Jinak volej CLI přímo: npx mjml soubor.mjml -o soubor.html.