Using Sublime Text & Snippets for HTML Email

Ever wanted to feel like an email coding whiz kid & create HTML email templates in minutes? In this post i’ll teach you how to be an email coding whiz kid with snippets for Sublime Text.

What are Sublime Text Snippets?

With Sublime Text we have the power of using snippets, snippets can be little chunks of code we use regularly and instead of typing this code out on a daily basis we can create a snippet for it. Creating snippets in Sublime Text is a very easy process and this blog post will show you just how easy it is.

Why should i use snippets for HTML email?

Snippets work wonders for HTML email because we are using the same code over and over agai we can split this all up into snippets and we no longer need to copy & paste or hand-code our HTML email templates ever again. By simply using Sublime Text snippets we can make email coding an enjoyable & speedy process.

Create a snippet in Sublime Text

To create a snippet in Sublime Text simply navigate to Tools > New Snippet. This will open up a new file with some code inside it. (See Below)

Using Sublime Text & Snippets for HTML Email

The code above is the default code we need to create a valid snippet in Sublime Text. We replace the following line Hello, ${1:this} is a ${2:snippet}. with our HTML code. You can use $1, $2, $3 etc, these are used to tell the cursor where to start once the snippet has been pasted in, $1 first, $2 second, $3 third and so on. Once you have filled out $1 you can simply hit TAB on your keyboard to navigate to $2 and so on.

HTML Email Snippet Example

We then replace the text inside the HTML tags with the short code we wish to produce our HTML email snippet code. Your snippet may now look like the example snippet displayed below which has some HTML email code and makes full use of the $1 , $2 cursors.

Test your Sublime Text Snippet

If you now go ahead and save your HTML email snippet and create a new file on your Sublime Text editor and type out the short code (“table” if following example from above) and hit TAB on your keyboard, it should produce your HTML email snippet. All snippets are saved to Preferences > Browse Packages > User.

Did your snippet work?

If your snippet did not work, simply restart Sublime Text and open it again. Now try typing the short code again and hitting TAB on your keyboard. If successful you can now follow the same process to create a library of HTML email snippets.

HTML Email Snippets

Do you already have your own personal library of snippets for HTML email coding? Would you like to share them with other email coders & designers in the community?

Share your HTML email snippets here!


Glenn Smith





© 2017, All Rights Reserved - Glenn Smith