Colorlib Email Templates is a free, open-source collection of 20 responsive HTML email templates built with MJML and compiled to bulletproof, table-based HTML, hosted on GitHub by Colorlib. Designed for Mailchimp and other email service providers, these templates give marketers and developers a starting point for campaigns that render consistently in Gmail, Outlook, Apple Mail, and other major clients.
What is Colorlib Email Templates?
Colorlib Email Templates is a GitHub repository containing 20 pre-built, responsive email templates created by Colorlib. It takes MJML source files (in src/N.mjml) and compiles them into individual pre-built HTML files (in N/index.html), which can be uploaded to an ESP like Mailchimp, Campaign Monitor, or SendGrid. The project also includes a gallery index.html that links to all templates for quick previewing.
Key Features
- Responsive layouts — Mobile-first designs that adapt to phones, tablets, and desktops, with clean HTML/CSS that is easy to customize.
- MJML-based build pipeline — Templates are authored in
src/N.mjmland compiled toN/index.htmlusingnpm run build; requires Node.js 20.19 or newer. - Bulletproof, table-based HTML — Compiled output uses table-based layouts for maximum compatibility with Outlook's Word rendering engine and other picky clients.
- Common email patterns — Includes heroes, content blocks, product grids, CTA buttons, and footers to speed up campaign construction.
- Live development server —
npm run devrebuilds templates and live-reloads athttp://localhost:3000/whenever you save a source file. - CSS inlining guidance — The README recommends tools like Premailer and Postmark's inliner for ESPs that strip style blocks.
- Free and MIT-licensed — No cost for personal or commercial use, with full source access for modification.
Who is it for?
- Mailchimp users — Upload any template's
index.htmldirectly into Mailchimp to create a responsive campaign without writing code. - Email developers — Edit the MJML sources in
src/and rebuild to produce custom, bulletproof HTML tailored to client quirks. - Startup marketers — Use a ready-made template for product announcements, newsletters, or promotional emails without paying for a premium design.
- Agencies — Reuse the included patterns (heroes, product grids, CTA blocks) to assemble branded campaigns faster for multiple clients.
What can you do with it?
- Send a newsletter — Pick a template, swap in your content, and upload the HTML to your ESP in a few minutes.
- Build a promotional email — Customize colors, CTAs, and product blocks to match a sale or event, then test in Gmail and Outlook.
- Create transactional notifications — Adapt the footer and CTA sections for order confirmations, password resets, or account alerts.
- Develop custom MJML — Clone the repo, modify
src/N.mjml, and runnpm run buildto regenerate all 20 templates with your own layouts.
How does it work?
Clone the repository, choose a template folder, and open its index.html in any editor. For deeper customization, edit the corresponding src/N.mjml source and rebuild with npm run build; the npm run dev command starts a live-reloading server at http://localhost:3000/ to preview changes instantly.
Pricing
All 20 templates are free to use under an MIT license — no cost for personal or commercial projects, and no attribution required.
Pros and cons
- Pros: Free and MIT-licensed; includes pre-built HTML and MJML sources; built with Outlook quirks in mind; ships with a build pipeline and live-reload dev server.
- Cons: Outlook (Windows) requires manual testing due to its Word rendering engine; CSS inlining may be needed if your ESP doesn't inline automatically; background images are unsupported in some Outlook versions.
FAQ
Can I add custom fonts?
Most email clients do not support web fonts. Use system fonts as fallbacks and test carefully; the templates avoid relying on custom font loading.
Why does Outlook look different?
Outlook (Windows) uses the Word rendering engine, which doesn't support many modern CSS features. These templates use table-based layouts and inline styles to minimize these differences, but you should test in Outlook before sending.
Can I use background images?
Use them sparingly and always provide a solid color fallback. Some Outlook versions do not render CSS background images, so critical content should not depend on them.
Images not showing?
Ensure you use absolute URLs, host images on a public CDN or your ESP's asset manager, and check that your ESP is not blocking external assets. Also add descriptive alt text for accessibility.
