Skip to content
Get packs

Guide · Open source

How to use responsive-html-email-template: setup, inlining and images

Updated · written with AI from the project's own documentation and checked against our catalogue data

responsive-html-email-template is a free, MIT-licensed HTML email layout that adapts to phone and desktop screens and includes a clear call-to-action button. This guide is for developers and marketers who want a simple starting point instead of writing email HTML from scratch. By the end you will know how to get the file, fill in your own content, and prepare it for either a developer API service or a marketing tool.

Responsive HTML Email Templateleemunroe/responsive-html-email-template · ★ 13.7k · MIT

Quick start

  1. 1Clone the repository. Run the git clone command to download the template files to your machine.
  2. 2Open email.html. Review the layout in the live preview or your browser, then open email.html in a text editor.
  3. 3Replace the text, images and links. Fill in your own content, using absolute image URLs with the required attributes.
  4. 4Decide on inlining. If you send through an API service, inline the CSS first. If you use Mailchimp or a similar tool, use the file as is.
  5. 5Send a test email. Send the finished email to yourself and check it on the clients your readers use.

Get the template files

The template is published as a GitHub repository. You can clone it with git, or open the live preview in your browser to see the layout before you download anything.

The main file is email.html. The repository also includes email-inlined.html, which the README gives as an example of inlined CSS for API services.

  • Live preview: the homepage linked in the project metadata shows email.html in action.
  • Main file to edit: email.html
  • Example of inlined output: email-inlined.html
git clone https://github.com/leemunroe/responsive-html-email-template

Choose how you will send the email

How you prepare the file depends on where it will be sent. The README separates two cases: sending through a developer API service, or pasting into a marketing platform.

If you send from your own code through an API service such as Mailgun, SendGrid or Postmark, you must inline the CSS before sending. If you use a marketing service such as Mailchimp, you can use email.html as is, because the service inlines the CSS when you build the campaign.

  • Developer API service: inline the CSS first, then send.
  • Marketing service like Mailchimp: use email.html unchanged and let the platform inline the CSS.

Inline your CSS before sending through an API

The README says email clients support CSS inconsistently, so you should always inline your CSS and send a test email to yourself before sending. It names the Email CSS Inliner at htmlemail.io/inline as one option.

Copy all of email.html, paste it as the source into the inliner, then copy the HTML output and use it as the template you send. Finally, send a test to yourself to confirm it looks right.

  • Copy all of email.html.
  • Paste it into the Email CSS Inliner as the source.
  • Copy the HTML output and use it as your email template.
  • Send a test email to yourself and check it.

Add your own images correctly

The README warns that images can break in some clients unless you include specific attributes. Each image should have src, alt, width, height and border.

The README gives an example image tag that also sets inline styles to remove borders and outlines and to display the image as a block. Replace the placeholder URL with an absolute path to your own image.

  • src: absolute URL to the image
  • alt: useful alt text
  • width and height
  • border
<img src="https://absolute-path-to-image.jpg" alt="Useful alt text" width="500" height="300" border="0" style="border:0; outline:none; text-decoration:none; display:block;">

Test the email before you send it

The README reports that the template was tested on mobile, desktop and web clients. It still recommends sending a test to yourself before every real send, since email support varies.

For accessibility checks, the README links to the Accessible Email Evaluation Tool at accessible-email.org. It is an external resource, not part of the template.

  • Send a test to yourself on the devices and apps your readers use.
  • Check the call-to-action button and images on both phone and desktop.

What people use it for

  • A developer sending a transactional or product email through Mailgun, SendGrid or Postmark.
  • A marketer pasting a simple promotional email into Mailchimp.
  • A team that needs one clean call-to-action email, such as an announcement with a single button.
  • A starting point for a custom email that the team later extends by hand.

Frequently asked questions

Is responsive-html-email-template free to use?

The project is listed under the MIT licence, and the README describes it as a free template. Check the LICENSE file in the repository for the full terms before using it in a commercial product.

Do I need to install anything to use it?

The project metadata lists no prerequisites. The only command in the README is git clone, which downloads the files. You then edit email.html in any text editor.

Do I need to inline the CSS?

It depends on how you send. The README says API services like Mailgun, SendGrid and Postmark require inlined CSS, while Mailchimp inlines it for you, so you can use email.html as is there.

Why does my email look broken in some email apps?

The README says email clients support CSS inconsistently. Inline your CSS for API sends, make sure images include src, alt, width, height and border, and send a test to yourself before a real send.

Can I use this for a complex newsletter?

The README describes this as a simple template with one clear call-to-action. For multi-section newsletter designs you may need a different starting point.

What are the alternatives to this template?

Comparable projects listed for this item are mjml, foundation-emails and maizzle. They are different tools with their own setup and are worth comparing against your needs.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use responsive-html-email-template if you want a simple, free, responsive email with one clear button and you are comfortable editing HTML by hand. Pick another option if you need a visual editor or a complex multi-section newsletter design.

Install options & downloads