MJML
Preview MJML templates with Emailens — submit MJML directly and get framework-aware fix snippets.
Emailens can compile MJML templates server-side and preview the resulting HTML across all email clients.
API usage
Set format: "mjml" in your API request:
curl -X POST https://emailens.dev/api/preview \
-H "Content-Type: application/json" \
-d '{
"format": "mjml",
"html": "<mjml><mj-body><mj-section><mj-column><mj-text>Hello from MJML!</mj-text></mj-column></mj-section></mj-body></mjml>"
}'The response includes a compiledHtml field with the generated HTML.
Framework-aware fix snippets
When you set format: "mjml", warnings include MJML-specific fix snippets that use MJML elements instead of generic HTML:
| Problem | Generic HTML fix | MJML fix |
|---|---|---|
| Flexbox | <table> layout | <mj-section> + <mj-column> |
@font-face | Web-safe font stack | <mj-font> in <mj-head> |
<style> in Gmail | Inline CSS | <mj-style inline="inline"> |
border-radius in Outlook | VML <v:roundrect> | MJML limitation guidance |
| Background images in Outlook | VML <v:rect> | background-url on <mj-section> |
@media queries | Mobile-first layout | <mj-breakpoint> + column widths |
How it works
- Your MJML string is received by the API
- Emailens compiles it using the
mjmlpackage server-side - The resulting HTML is passed through the full preview pipeline
- Warnings include MJML-specific before/after fix snippets
- You get back transforms, warnings, scores, dark mode variants, and screenshots
Engine usage
When using @emailens/engine directly, pass "mjml" as the framework parameter:
import { analyzeEmail, getCodeFix } from "@emailens/engine";
// Get MJML fix snippets in all warnings
const warnings = analyzeEmail(compiledHtml, "mjml");
// Or look up a specific fix
const fix = getCodeFix("@font-face", "gmail-web", "mjml");
console.log(fix.after);
// <mj-head>
// <mj-font name="CustomFont" href="..." />
// </mj-head>Error handling
If compilation fails, you get a 422 response:
{
"error": "Failed to compile MJML template.",
"phase": "compile"
}MJML + Emailens workflow
MJML already produces email-compatible HTML, so you'll typically see higher compatibility scores compared to hand-written HTML. However, Emailens still catches issues that MJML doesn't handle — like Outlook-specific edge cases and dark mode problems. The MJML-specific fix snippets guide you toward MJML-native solutions instead of post-compilation HTML hacks.