Build responsive email templates using MJML markup language. Compiles to cross-client HTML that works in Outlook, Gmail, and Apple Mail. Includes template renderer, layout patterns, and variable substitution.

MJML Email Templates When to Use This Skill Use this skill when: Building transactional emails (signup, password reset, invoices, notifications) Creating responsive email templates that work across clients Setting up MJML template rendering in .NET Related skills: aspire/mailpit integration Test emails locally with Mailpit testing/verify email snapshots Snapshot test rendered HTML Why MJML? Problem : Email HTML is notoriously difficult. Each email client (Outlook, Gmail, Apple Mail) renders differently, requiring complex table based layouts and inline styles. Solution : [MJML](https://mjml.io/) is a markup language that compiles to responsive, cross client HTML: Compiles to ~200 lines of table based HTML with inline styles that works everywhere. Installation Add Mjml.Net Embed Templates as Resources In your .csproj : Project Structure Layout Template ( Layout.mjml) Content Template Template Renderer Email Composer Pattern Separate template rendering from email composition with strongly typed value objects: Email Preview Endpoint Add an admin endpoint to preview emails during development: Best Practices Template Design Variable Handling MJML Components Reference Component Purpose <mj section Horizontal container (like a row) <mj column Vertical container within section <mj text Text content with styling <mj button Call to action button <mj image Responsive image <mj divider Horizontal line <mj spacer Vertical spacing <mj table Data tables <mj social Social media icons Resources MJML Documentation : https://documentation.mjml.io/ MJML Playground : https://mjml.io/try it live Mjml.Net : https://github.com/ArtZab/Mjml.Net

mjml-email-templates