MJML support

Knock supports MJML, a responsive email framework that compiles to HTML optimized for email clients. MJML abstracts away the complexity of table-based layouts and media queries, so you can build responsive emails that look great across devices with less code.

You can set an email layout to use MJML. When a layout is configured for MJML, it must contain a root <mjml> tag. The layout structure works the same as HTML layouts: the {{content}} variable receives the template content, and {{footer_links}} receives footer links when configured.

To include plain HTML within an MJML layout, wrap it in <mjml-raw> tags. MJML will pass through the contents of <mjml-raw> without compiling them, so you can use standard HTML where needed.

Learn more about email layouts.

Email templates can use MJML in two ways:

1. Full template. Write your entire template in MJML in the code editor. MJML templates can be used with "No layout" (standalone) or within an MJML layout.
2. Visual block editor. Use the visual editor to compose your template. When the template or its layout is MJML, the blocks render as MJML components.

When you use an MJML template with a layout, the layout must also be MJML. When you use "No layout," the template stands alone as a complete MJML document.

Knock automatically wraps plain HTML inside MJML templates and layouts in <mjml-raw> tags when the HTML appears at the <mj-body>, <mj-section>, or <mj-column> level. This means you can include HTML snippets in your MJML templates and they will render correctly.

Knock skips auto-wrapping of HTML when the parent element is an MJML ending tag. Ending tags are MJML components that expect plain HTML or text content as their direct children by spec.

The following MJML tags do not have their HTML children wrapped:

• <mj-accordion-text>
• <mj-accordion-title>
• <mj-button>
• <mj-navbar-link>
• <mj-preview>
• <mj-social-element>
• <mj-style>
• <mj-table>
• <mj-text>
• <mj-title>

• MJML layouts require the <mjml> root tag. Layouts set to MJML mode must be valid MJML documents.
• Partials cannot include MJML. HTML partials must contain HTML only. When used in an MJML template, their content is automatically wrapped in <mjml-raw> tags where appropriate.