# Mjml Email

> Generuje a upravuje responzivní email šablony v MJML a exportuje je do HTML. Použij při tvorbě nebo úpravě emailů v MJML, newsletterech, transakčních emailech, dotazech na MJML komponenty nebo export do HTML (CLI/Node).

- Skill: `ddanielrrakowski/mjml-email` (Agent Skill, multi-file: 7 files)
- Install (CLI): `npx skillmds@latest add ddanielrrakowski/mjml-email`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ddanielrrakowski/mjml-email/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ddanielrrakowski (https://skillmd.com/u/ddanielrrakowski)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/ddanielrrakowski/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](reference/components.md). Pro head a layout viz [reference/head-and-layout.md](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

```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/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](reference/head-and-layout.md)
- **Body komponenty** (mj-text, mj-button, mj-image, mj-social, mj-divider, mj-table, …): [reference/components.md](reference/components.md)
- **Export, konfigurace, validace** (CLI, Node API, .mjmlconfig): [reference/export-and-config.md](reference/export-and-config.md)
- **Kompatibilita** (Outlook, Gmail, ending tags, best practices): [reference/compatibility.md](reference/compatibility.md)
- **Ukázkové šablony** (minimální, newsletter, transakční): [examples/templates.md](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`.