Juicy lil' bytes

Shugr | a HTML Editor That Supports Rapid HTML Development With the Emmet Syntax

I released a web browser based HTML editor that allows you to rapidly develop with the Emmet toolkit. Here are a few examples that demonstrate how it simplifies the HTML development process.

The Shugr Editor

Shugr is an open source HTML editor that provides a cross-platform interface to the Emmet HTML toolkit. Shugr allows you to develop HTML in real time without the need for a separate preprocessor run on a markup document.

Detailed documentation is available here.

The Emmet HTML Toolkit

If you do any signficant amount of work with HTML and haven’t used the Emmet toolkit, you are in for a treat. Spend some time learning the syntax for the HTML entities that you commonly use and this will dramatically improve your productivity. It is possible to create hundreds of characters of HTML in a few short lines of Emmet script. A press of your TAB key and the HTML is immediately populated in the location where you placed the script in the Shugr editor (including within other tags of preexisting HTML).

Here are several common tasks that demonstrate the Emmet syntax in action:

HTML 5 Document Creation

To begin a new HTML 5 document, type the following in Shugr:

1
html:5

Leave your cursor positioned immediately after the ‘5’ and press your TAB key. The editor will remove the Emmet script and replace it with the following:

1
2
3
4
5
6
7
8
9
10
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

Create a Body div

Now let’s place a div with the id, “main-content”, inside our body tags. Place the cursor in between the body tags and enter:

1
#main-content

press the TAB key with the cursor positioned at the end of the above script and the text in the editor becomes:

1
2
3
4
5
6
7
8
9
10
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="main-content"></div>
</body>
</html>

Create Multiple HTML Headers with Classes

Let’s create several h2 headers in the div with the “main-content” id and assign the class, “headclass”, to these headers. This example demonstrates how you can use multiplication to specify the number of HTML entities that you want to generate.

Place your cursor inside the “main-content” div tags and then type:

1
h2.headclass*7

Then click your TAB key and now you have:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="main-content">
      <h2 class="headclass"></h2>
      <h2 class="headclass"></h2>
      <h2 class="headclass"></h2>
      <h2 class="headclass"></h2>
      <h2 class="headclass"></h2>
      <h2 class="headclass"></h2>
      <h2 class="headclass"></h2>
  </div>
</body>
</html>

Add CSS File Links

Now add a few CSS file links to the head section with this script:

1
link:css*3

Click the TAB key and you have CSS tags. Enter the path to the appropriate files and they are complete.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css" media="all" />
  <link rel="stylesheet" href="style.css" media="all" />
  <link rel="stylesheet" href="style.css" media="all" />
</head>
<body>
  <div id="main-content">
      <h2 class="headclass"></h2>
      <h2 class="headclass"></h2>
      <h2 class="headclass"></h2>
      <h2 class="headclass"></h2>
      <h2 class="headclass"></h2>
      <h2 class="headclass"></h2>
      <h2 class="headclass"></h2>
  </div>
</body>
</html>

Add JavaScript File Links

And finally let’s add a couple of JavaScript file links to the document. We’ll place the following script just before the final body tag:

1
script:src*2

And with the last click on the TAB key, you now have a framework for your web page:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="style.css" media="all" />
  <link rel="stylesheet" href="style.css" media="all" />
  <link rel="stylesheet" href="style.css" media="all" />
</head>
<body>
  <div id="main-content">
      <h2 class="headclass"></h2>
      <h2 class="headclass"></h2>
      <h2 class="headclass"></h2>
      <h2 class="headclass"></h2>
      <h2 class="headclass"></h2>
      <h2 class="headclass"></h2>
      <h2 class="headclass"></h2>
  </div>
<script src=""></script>
<script src=""></script>
</body>
</html>

And Much More…

These simple examples only scratch the surface of the Emmet toolkit capabilities. Have a look through the Emmet documentation for more details on how to use it. The Emmet developer has also released a comprehensive cheat sheet that is very helpful.

Feedback and Contributions

If you have any issues with Shugr, please submit an issue report on the GitHub repository. If you’d like to contribute to the Shugr source, fork the develop branch of the repository, edit it, and submit a pull request back to the main repository with a description of your changes.