QA Graphic

Emmet in BBEdit

Code HTML faster in BBEdit

Emmet is an easy way for Web Developers to generate code from a series of shortcuts. It's a good tool for raw HTML and CSS developers.

Emmit support was include in BBEdit v.14 which was released in the summer of 2021.

Sample Emmet Command


Using Emmit expands to:

<div> <ul> <li><# $1 #></li> <li><# $2 #></li> </ul> </div>

Setting up Emmet in BBEdit

To use Emmet in BBEdit you need to install it. You use Node Package Manager (NPM) to install the files. ( Emmet NPM page)

Got NPM?

If you haven't installed NPM before, or don't know if you have it installed - you can always download the node installer from

Download the NodeJS installer from website:

After doing the NPS install, you will need to run the NPM install command to install Emmet:

npm install emmet

Why not run the install command in BBEdit's Shell Worksheet?

npm Install

Using Emmet in BBEdit

The important thing about using Emmet in BBEdit is that you use the "Expand Emmet Abbreviation" on the same line that you have type the abbreviation.

You do not select the text and then use the "Expand Emmet Abbreviation" command.

Copy the following into any BBEdit window:


At the end of the line use the keyboard shortcut Shift F5 or select "Expand Emmet Abbreviation" from the Edit menu.

If your into Bootstrap, this is a good one to know:>.card-header>.card-body


<card class="mt-3">
	<div class="card-header">
		<div class="card-body"><# $1 #></div>

That created the basic card area in the Bootstrap universe.

Learn More Emmet Snippets

You can learn more about Emmet commands from there website:

  Filed under the Macintosh category. - Permalink


My Friday Blog tips and tricks will be based on my experiences using a Macintosh computer since 1989. I have seen the evolution of the Macintosh software and hardware, and have a good understanding of the capabilities of a Macintosh computer. I also have experience in troubleshooting and fixing problems that can occur with a Mac.