MailMason by Postmark | A complete toolset for building email templates

<!doctype html> <html lang="en" class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title> MailMason by Postmark | A complete toolset for building email templates </title> <meta name="description" content="MailMason is a complete toolset to streamline building and updating a set of consistent transactional emails."> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="globalsign-domain-verification" content="F0n5fUwYguswb99EGyC5qD87O15uv5VBUiX9yRrxX6"> <meta name="theme-color" content="#FFDE00"> <script>dataLayer = [{'siteType': 'labs', 'visitorIP': '8.222.208.146', 'doNotTrack': 0 }];</script> <link rel="dns-prefetch" href="https://ssl.google-analytics.com"> <link rel="dns-prefetch" href="https://www.google-analytics.com"> <link rel="shortcut icon" href="/images/favicon.ico"> <link rel="apple-touch-icon" href="/images/apple-touch-icon.png"> <link rel="canonical" href="https://postmarkapp.com/mailmason"> <meta property="og:url" content="https://postmarkapp.com/mailmason"> <meta property="og:type" content="website"> <meta property="fb:app_id" content="244883355940334"> <meta property="og:title" content="MailMason by Postmark | A complete toolset for building email templates"> <meta property="og:description" content="MailMason is a complete toolset to streamline building and updating a set of consistent transactional emails."> <meta property="og:image" content="https://craft-assets.postmarkapp.com/blog/_facebook/sharing-labs-mailmason.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta name="twitter:title" content="MailMason by Postmark | A complete toolset for building email templates"> <meta name="twitter:description" content="MailMason is a complete toolset to streamline building and updating a set of consistent transactional emails."> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:image" content="https://craft-assets.postmarkapp.com/blog/_twitter/5531/sharing-labs-mailmason.jpg"> <meta name="twitter:site" content="@postmarkapp"> <meta name="slack-app-id" content="A8LSJN934"> <link href="https://postmarkapp.com/dist/css/labs.f84634b8468a71fc81f5.css" rel="stylesheet"> </head> <body class="mailmason"> <header class="hero hero--mailmason"> <div class="u-container"> <img src="/images/labs/mailmason/mailmason-logo.png" srcset="/images/labs/mailmason/mailmason-logo@2x.png 2x" alt="Email Templates" width="100" height="95" class="hero_icon"> <h1 class="hero_title">MailMason</h1> <p class="hero_desc">A complete toolset to streamline building and updating a set of consistent transactional emails.</p> <div class="hero_actions"> <a href="https://github.com/activecampaign/mailmason" class="cta-btn cta-btn--default" target="_blank" rel="nofollow">Get Started on GitHub</a> <a href="https://github.com/activecampaign/mailmason/wiki" class="cta-btn cta-btn--ghost" target="_blank" rel="nofollow">Read the docs</a> </div> <p class="hero_meta"> Free for commercial use under the <a href="https://github.com/activecampaign/mailmason/blob/master/LICENSE" rel="nofollow">MIT License</a>. </p> <div class="hero_illustration"> <img src="/images/labs/mailmason/mailmason-conveyor.svg" width="640" alt="Conveyor belt illustration"> </div> </div> </header> <section class="section section--l section--text-cols"> <div class="u-container"> <div class="u-grid u-grid--full u-grid--1of3-at-medium u-grid--gutters-large"> <div class="u-grid-cell"> <h2 class="section_title section_title--bricks">What is MailMason?</h2> <div class="pm-advert pm-advert--sidebar"> <p class="pm-advert_tagline">Created by</p> <a href="/?utm_source=labs-mailmason&utm_medium=web" class="pm-advert_logo"><img src="/images/logo.svg" alt="Postmark" width="200" height="44"></a> </div> </div> <div class="u-grid-cell u-grid-cell--2of3"> <div class="u-grid u-grid--full u-grid--1of2-at-medium u-grid--gutters-medium"> <div class="u-grid-cell u-grid-cell--2of2"> <p class="u-enlarge u-medium">MailMason uses <a href="https://gruntjs.com" target="_blank" rel="nofollow">Grunt</a>, <a href="http://handlebarsjs.com" target="_blank" rel="nofollow">Handlebars</a>, and <a href="https://sass-lang.com" target="_blank" rel="nofollow">Sass</a> in conjunction with layouts and partials to reduce redundancy and create both the HTML and plain text versions of your transactional emails in one fell swoop.</p> </div> <div class="u-grid-cell u-grid-cell--sub-col"> <p>MailMason was born out of our desire to have a tool kit for generating a consistent set of transactional email templates for use within <a href="/email-templates?utm_source=labs-mailmason&utm_medium=web">Postmark’s templating feature</a>. However, it’s something that anyone can take and fork to help them maintain their own set of email templates.</p> </div> <div class="u-grid-cell u-grid-cell--sub-col"> <p>By default, the generated templates use <a href="https://github.com/activecampaign/mustachio" target="_blank" rel="nofollow">Mustachio</a> for the variable placeholders so that you can easily use them as <a href="/email-templates?utm_source=labs-mailmason&utm_medium=web">Postmark templates</a>. However, the Mustachio pieces are only placeholders, and the generated templates could easily be adapted to work with any email provider.</p> </div> </div> </div> </div> </div> </section> <section class="section section--l section--text-cols section--blue-grad section--bricks"> <div class="u-container"> <div class="u-grid u-grid--full u-grid--1of3-at-medium u-grid--gutters-large"> <div class="u-grid-cell"> <h2 class="section_title section_title--bricks">Why use MailMason?</h2> <p> <a href="https://github.com/activecampaign/mailmason" class="cta-btn cta-btn--ghost" target="_blank" rel="nofollow">Try MailMason →</a> </p> </div> <div class="u-grid-cell u-grid-cell--2of3"> <ol class="reasons-list reasons-list--bricks"> <li class="reasons-list_item">Get a thoroughly tested and reliable starting point for building consistent email templates.</li> <li class="reasons-list_item">Use <a href="https://sass-lang.com" target="_blank" rel="nofollow">Sass</a> for generating styles.</li> <li class="reasons-list_item">Automatically generate plain text emails with the same content as the HTML versions.</li> <li class="reasons-list_item">Batch test your emails against the <a href="https://spamcheck.postmarkapp.com" target="_blank">Postmark Spamcheck API</a>.</li> <li class="reasons-list_item">Easily upload image assets to your CDN so you can include images in your templates.</li> <li class="reasons-list_item">Use <a href="http://handlebarsjs.com" target="_blank" rel="nofollow">Handlebars</a> to enable layouts and partials in templates and avoid redundancy.</li> <li class="reasons-list_item">Automatically inline the resulting CSS to maximize email client compatibility.</li> <li class="reasons-list_item">Easily send test emails through your Postmark account.</li> <li class="reasons-list_item">Batch test emails through <a href="https://litmus.com" target="_blank" rel="nofollow">Litmus</a>.</li> </ol> </div> </div> </section> <section class="section section--l section--text-cols"> <div class="u-container"> <div class="u-grid u-grid--full u-grid--1of3-at-medium u-grid--gutters-large"> <div class="u-grid-cell"> <h2 class="section_title">Rock-solid email templates</h2> <p class="section_intro section_intro--mailmason"> MailMason comes with a collection of thoroughly tested email templates to get you started. </p> <p> <a href="/transactional-email-templates" class="cta-btn cta-btn--ghost" target="_blank">View the templates →</a> </p> </div> <div class="u-grid-cell u-grid-cell--2of3"> <div class="u-grid u-grid--full u-grid--1of2-at-medium u-grid--gutters-medium"> <div class="email-template u-grid-cell email-template--small email-template--mailmason"> <a href="https://newsletter.postmarkapp.com/assets/templates/dist/basic-full/welcome/content.html" class="email-template_preview" target="_blank"> <img src="/images/labs/email-templates/welcome.png" srcset="/images/labs/email-templates/welcome@2x.png 2x" alt="Welcome" class="email-template_icon"> </a> <div class="email-template_body"> <h2 class="email-template_title"> Welcome </h2> <p class="email-template_desc">Send users a welcome email when they sign up.</p> <p class="email-template_download"> Download <a href="https://github.com/activecampaign/postmark-templates/blob/master/templates/basic-full/welcome/content.html" target="_blank">HTML</a> or <a href="https://github.com/activecampaign/postmark-templates/blob/master/templates/basic-full/welcome/content.txt" target="_blank">TXT</a> </p> <p class="email-template_guide"> <a href="https://postmarkapp.com/guides/welcome-email-best-practices" target="_blank"><span>Welcome email best practices guide</span> →</a> </p> </div> </div> <div class="email-template u-grid-cell email-template--small email-template--mailmason"> <a href="https://newsletter.postmarkapp.com/assets/templates/dist/basic-full/password-reset/content.html" class="email-template_preview" target="_blank"> <img src="/images/labs/email-templates/reset-password.png" srcset="/images/labs/email-templates/reset-password@2x.png 2x" alt="Reset password" class="email-template_icon"> </a> <div class="email-template_body"> <h2 class="email-template_title"> Reset password </h2> <p class="email-template_desc">Send users a link to reset their password.</p> <p class="email-template_download"> Download <a href="https://github.com/activecampaign/postmark-templates/blob/master/templates/basic-full/password-reset/content.html" target="_blank">HTML</a> or <a href="https://github.com/activecampaign/postmark-templates/blob/master/templates/basic-full/password-reset/content.txt" target="_blank">TXT</a> </p> <p class="email-template_guide"> <a href="https://postmarkapp.com/guides/password-reset-email-best-practices" target="_blank"><span>Password reset email best practices guide</span> →</a> </p> </div> </div> <div class="email-template u-grid-cell email-template--small email-template--mailmason"> <a href="https://newsletter.postmarkapp.com/assets/templates/dist/basic-full/password-reset-help/content.html" class="email-template_preview" target="_blank"> <img src="/images/labs/email-templates/reset-password-alt.png" srcset="/images/labs/email-templates/reset-password-alt@2x.png 2x" alt="Reset password help" class="email-template_icon"> </a> <div class="email-template_body"> <h2 class="email-template_title"> Reset password help </h2> <p class="email-template_desc">Help users reset their password if they can’t remember their email.</p> <p class="email-template_download"> Download <a href="https://github.com/activecampaign/postmark-templates/blob/master/templates/basic-full/password-reset-help/content.html" target="_blank">HTML</a> or <a href="https://github.com/activecampaign/postmark-templates/blob/master/templates/basic-full/password-reset-help/content.txt" target="_blank">TXT</a> </p> <p class="email-template_guide"> <a href="https://postmarkapp.com/guides/password-reset-email-best-practices" target="_blank"><span>Password reset email best practices guide</span> →</a> </p> </div> </div> <div class="email-template u-grid-cell email-template--small email-template--mailmason"> <a href="https://newsletter.postmarkapp.com/assets/templates/dist/basic-full/user-invitation/content.html" class="email-template_preview" target="_blank"> <img src="/images/labs/email-templates/user-invite.png" srcset="/images/labs/email-templates/user-invite@2x.png 2x" alt="User invitation" class="email-template_icon"> </a> <div class="email-template_body"> <h2 class="email-template_title"> User invitation </h2> <p class="email-template_desc">Help users invite others to use your software.</p> <p class="email-template_download"> Download <a href="https://github.com/activecampaign/postmark-templates/blob/master/templates/basic-full/user-invitation/content.html" target="_blank">HTML</a> or <a href="https://github.com/activecampaign/postmark-templates/blob/master/templates/basic-full/user-invitation/content.txt" target="_blank">TXT</a> </p> <p class="email-template_guide"> <a href="https://postmarkapp.com/guides/user-invitation-email-best-practices" target="_blank"><span>User invitation email best practices guide</span> →</a> </p> </div> </div> <div class="email-template u-grid-cell email-template--small email-template--mailmason"> <a href="https://newsletter.postmarkapp.com/assets/templates/dist/basic-full/comment-notification/content.html" class="email-template_preview" target="_blank"> <img src="/images/labs/email-templates/comment-notification.png" srcset="/images/labs/email-templates/comment-notification@2x.png 2x" alt="Comment notification" class="email-template_icon"> </a> <div class="email-template_body"> <h2 class="email-template_title"> Comment notification </h2> <p class="email-template_desc">Notify users of new comments by other users.</p> <p class="email-template_download"> Download <a href="https://github.com/activecampaign/postmark-templates/blob/master/templates/basic-full/comment-notification/content.html" target="_blank">HTML</a> or <a href="https://github.com/activecampaign/postmark-templates/blob/master/templates/basic-full/comment-notification/content.txt" target="_blank">TXT</a> </p> <p class="email-template_guide"> <a href="https://postmarkapp.com/guides/comment-notification-email-best-practices" target="_blank"><span>Comment notification best practices guide</span> →</a> </p> </div> </div> <div class="email-template u-grid-cell email-template--small email-template--mailmason"> <a href="https://newsletter.postmarkapp.com/assets/templates/dist/basic-full/receipt/content.html" class="email-template_preview" target="_blank"> <img src="/images/labs/email-templates/billing.png" srcset="/images/labs/email-templates/billing@2x.png 2x" alt="Receipt" class="email-template_icon"> </a> <div class="email-template_body"> <h2 class="email-template_title"> Receipt </h2> <p class="email-template_desc">Send a receipt to users after they made a purchase.</p> <p class="email-template_download"> Download <a href="https://github.com/activecampaign/postmark-templates/blob/master/templates/basic-full/receipt/content.html" target="_blank">HTML</a> or <a href="https://github.com/activecampaign/postmark-templates/blob/master/templates/basic-full/receipt/content.txt" target="_blank">TXT</a> </p> <p class="email-template_guide"> <a href="https://postmarkapp.com/guides/receipt-and-invoice-email-best-practices" target="_blank"><span>Receipt email best practices guide</span> →</a> </p> </div> </div> <div class="email-template u-grid-cell email-template--small email-template--mailmason"> <a href="https://newsletter.postmarkapp.com/assets/templates/dist/basic-full/invoice/content.html" class="email-template_preview" target="_blank"> <img src="/images/labs/email-templates/billing.png" srcset="/images/labs/email-templates/billing@2x.png 2x" alt="Invoice" class="email-template_icon"> </a> <div class="email-template_body"> <h2 class="email-template_title"> Invoice </h2> <p class="email-template_desc">Request payment from a user.</p> <p class="email-template_download"> Download <a href="https://github.com/activecampaign/postmark-templates/blob/master/templates/basic-full/invoice/content.html" target="_blank">HTML</a> or <a href="https://github.com/activecampaign/postmark-templates/blob/master/templates/basic-full/invoice/content.txt" target="_blank">TXT</a> </p> <p class="email-template_guide"> <a href="https://postmarkapp.com/guides/receipt-and-invoice-email-best-practices" target="_blank"><span>Invoice email best practices guide</span> →</a> </p> </div> </div> <div class="email-template u-grid-cell email-template--small email-template--mailmason"> <a href="https://newsletter.postmarkapp.com/assets/templates/dist/basic-full/trial-expiring/content.html" class="email-template_preview" target="_blank"> <img src="/images/labs/email-templates/trial.png" srcset="/images/labs/email-templates/trial@2x.png 2x" alt="Trial expiring" class="email-template_icon"> </a> <div class="email-template_body"> <h2 class="email-template_title"> Trial expiring </h2> <p class="email-template_desc">Let users know when their trial is about to expire.</p> <p class="email-template_download"> Download <a href="https://github.com/activecampaign/postmark-templates/blob/master/templates/basic-full/trial-expiring/content.html" target="_blank">HTML</a> or <a href="https://github.com/activecampaign/postmark-templates/blob/master/templates/basic-full/trial-expiring/content.txt" target="_blank">TXT</a> </p> <p class="email-template_guide"> <a href="https://postmarkapp.com/guides/trial-expiration-email-best-practices" target="_blank"><span>Trial expiration email best practices guide</span> →</a> </p> </div> </div> <div class="email-template u-grid-cell email-template--small email-template--mailmason"> <a href="https://newsletter.postmarkapp.com/assets/templates/dist/basic-full/trial-expired/content.html" class="email-template_preview" target="_blank"> <img src="/images/labs/email-templates/trial.png" srcset="/images/labs/email-templates/trial@2x.png 2x" alt="Trial expired" class="email-template_icon"> </a> <div class="email-template_body"> <h2 class="email-template_title"> Trial expired </h2> <p class="email-template_desc">Let users know when their trial expired.</p> <p class="email-template_download"> Download <a href="https://github.com/activecampaign/postmark-templates/blob/master/templates/basic-full/trial-expired/content.html" target="_blank">HTML</a> or <a href="https://github.com/activecampaign/postmark-templates/blob/master/templates/basic-full/trial-expired/content.txt" target="_blank">TXT</a> </p> <p class="email-template_guide"> <a href="https://postmarkapp.com/guides/trial-expiration-email-best-practices" target="_blank"><span>Trial expired email best practices guide</span> →</a> </p> </div> </div> <div class="email-template u-grid-cell email-template--small email-template--mailmason"> <a href="https://newsletter.postmarkapp.com/assets/templates/dist/basic-full/dunning/content.html" class="email-template_preview" target="_blank"> <img src="/images/labs/email-templates/trial.png" srcset="/images/labs/email-templates/trial@2x.png 2x" alt="Dunning" class="email-template_icon"> </a> <div class="email-template_body"> <h2 class="email-template_title"> Dunning <span class="email-template_new">NEW!</span> </h2> <p class="email-template_desc">Let users know about a failed payment.</p> <p class="email-template_download"> Download <a href="https://github.com/activecampaign/postmark-templates/blob/master/templates/basic-full/dunning/content.html" target="_blank">HTML</a> or <a href="https://github.com/activecampaign/postmark-templates/blob/master/templates/basic-full/dunning/content.txt" target="_blank">TXT</a> </p> <p class="email-template_guide"> <a href="https://postmarkapp.com/guides/dunning/email-examples" target="_blank"><span>Dunning email examples</span> →</a> </p> </div> </div> </div> </div> </div> </div> </section> <section class="pm-advert pm-advert--footer"> <div class="u-container"> <div class="u-grid u-grid--full u-grid--1of2-at-large u-grid--center"> <div class="u-grid-cell"> <h2 class="pm-advert_tagline">The email delivery service that people actually like</h2> <p class="pm-advert_body">Stop worrying if your emails made it to the inbox, and get back to focusing on what matters—building great products.</p> <div class="pm-advert_actions"> <a href="https://account.postmarkapp.com/sign_up?utm_source=labs-mailmason&utm_medium=web" class="cta-btn cta-btn--default cta-btn--medium">Try Postmark free</a> <a href="/?utm_source=labs-mailmason&utm_medium=web" class="cta-btn cta-btn--medium">Learn more</a> </div> </div> <div class="u-grid-cell"> <div class=" pm-advert_illustration"> <img data-lazy-src="/images/illustrations/great-support-yellow.svg" class="section_illustration" src="/images/illustrations/great-support-yellow.svg"> <div class="satisfaction satisfaction--labs"> <div class="satisfaction_bar"> <div class="satisfaction_item satisfaction_item--great" style="flex-basis: 86%;"> <div class="satisfaction_percentage">86%</div> <div class="satisfaction_label">Customer Happiness Rating</div> </div> <div class="satisfaction_item satisfaction_item--okay" style="flex-basis: 4%;"></div> <div class="satisfaction_item satisfaction_item--not-good" style="flex-basis: 10%;"></div> </div> <ul class="satisfaction_key"> <li class="satisfaction_legend satisfaction_legend--great">😃 Great (86%)</li> <li class="satisfaction_legend satisfaction_legend--okay">🙂 Okay (4%)</li> <li class="satisfaction_legend satisfaction_legend--not-good">😔 Not Good (10%)</li> </ul> <p class="satisfaction_note">Customer feedback gathered through Help Scout over the past 60 days.</p> </div> </div> </div> </div> </section> <footer class="footer"> <div class="u-container"> <ul class="footer_items"> <li class="footer_item">© ActiveCampaign, LLC, 2025. All rights reserved.</li> <li class="footer_item"><a href="https://postmarkapp.com/privacy-policy" class="footer_link">Privacy Policy</a></li> <li class="footer_item"><a href="https://postmarkapp.com/terms-of-service" class="footer_link">Terms of Service</a></li> </ul> </div> </footer> <button class="fake-hs-beacon hidden js-load-beacon"> <span class="fake-hs-beacon_icon"></span> <span class="fake-hs-beacon_text">Help</span> </button> <script type="text/javascript"> window['GoogleAnalyticsObject'] = 'ga'; window['ga'] = window['ga'] || function() { (window['ga'].q = window['ga'].q || []).push(arguments) }; </script>  <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-PWV3TKM" width="0" height="0" style="display:none; visibility:hidden"></iframe></noscript> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-PWV3TKM');</script> <script src="https://postmarkapp.com/dist/js/labs.7b7c9ce5ad59e0209821.js"></script> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Organization", "url": "https://postmarkapp.com", "logo": "https://postmarkapp.com/images/logo-stamp-social.png", "name": "Postmark", "founder": [ { "@type": "Person", "name": "Jason VandeBoom", "jobTitle": "CEO" } ], "foundingLocation": { "@type": "Place", "address": { "@type": "PostalAddress", "streetAddress": "1 North Dearborn St, 5th Floor", "addressLocality": "Chicago", "addressRegion": "IL", "postalCode": "60602", "addressCountry": "US" } }, "location": { "@type": "Place", "address": { "@type": "PostalAddress", "streetAddress": "1 North Dearborn St, 5th Floor", "addressLocality": "Chicago", "addressRegion": "IL", "postalCode": "60602", "addressCountry": "US" } }, "sameAs": [ "https://twitter.com/postmarkapp" ] } </script> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "WebSite", "name": "Postmark", "url": "https://postmarkapp.com" } </script> </body> </html>

CINXE.COM

MailMason by Postmark | A complete toolset for building email templates