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:
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
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:
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
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:
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
Add CSS File Links
Now add a few CSS file links to the head section with this script:
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
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
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.