Shugr | a web browser based Emmet HTML editor

Rapid HTML development with a web browser based Emmet HTML editor.


Contents

What is Shugr?

Shugr is a free, open source, web browser-based HTML editor that supports rapid development of HTML with the Emmet syntax.

The Emmet syntax is a magic wand for HTML (really!). Once you start using it, you won't turn back. Check out the example below for a taste.

See the Syntax in Action

Here is a quick demonstration that shows you how to generate over 700 characters of HTML with three lines of Emmet.

Type the following on the first line in the Shugr editor:

html:5

and then press the TAB key. The editor now displays your HTML5 formatted HTML document like this:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>

</body>
</html>

Let's add some h2 headers with automatically numbered output. Type the following inside the body tag:

h2[title=Example$].example${Example $}*5

press the TAB key and here is the output:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h2 title="Example1" class="example1">Example 1</h2>
  <h2 title="Example2" class="example2">Example 2</h2>
  <h2 title="Example3" class="example3">Example 3</h2>
  <h2 title="Example4" class="example4">Example 4</h2>
  <h2 title="Example5" class="example5">Example 5</h2>
</body>
</html>

It's beginning to look like a decent framework to get your page off of the ground.

Next, enter the following below the first h2 tag:

ul>li.coolclass*10

and then press the TAB key. Now you have a ten item unordered list with classes on each list item:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <h2 title="Example1" class="example1">Example 1</h2>
    <ul>
      <li class="coolclass"></li>
      <li class="coolclass"></li>
      <li class="coolclass"></li>
      <li class="coolclass"></li>
      <li class="coolclass"></li>
      <li class="coolclass"></li>
      <li class="coolclass"></li>
      <li class="coolclass"></li>
      <li class="coolclass"></li>
      <li class="coolclass"></li>
    </ul>
  <h2 title="Example2" class="example2">Example 2</h2>
  <h2 title="Example3" class="example3">Example 3</h2>
  <h2 title="Example4" class="example4">Example 4</h2>
  <h2 title="Example5" class="example5">Example 5</h2>
</body>
</html>

You just created over 700 characters with these three lines:

html:5
h2[title=Example$].example${Example $}*5
ul>li.coolclass*10

Now that's efficiency. If there is a faster way to generate HTML in real time, I have yet to find it.

Learn More about the Emmet Syntax

Emmet arms you with an extensive HTML development toolset. If you would like to dive in and learn more about the Emmet syntax, check out the Emmet Cheat Sheet and the Emmet documentation.

How to Download Your HTML File

Use the download button on the Shugr toolbar:

Download your HTML from the Shugr editor

The file is downloaded to your default download directory (specified in your browser settings) with the filename 'index.html'.

How to Copy Your HTML to the Clipboard

Use the copy button on the Shugr toolbar:

Copy your HTML to the clipboard from the Shugr editor

All of the text in the editor is copied to the clipboard. You do not need to highlight or right-click anything. I know, you're welcome.

Some browsers warn about the use of Adobe Flash with this feature. It's ok to provide it with access to the clipboard. The copy function is provided by the widely used open source ZeroClipboard project if you'd like to inspect the source.

How to Clear Your Editor

Start over with a fresh slate by clicking the clear button on the Shugr toolbar:

Clear the Shugr HTML editor

You won't be able to retrieve the deleted text after you do this so make sure to click the copy button before you clear the editor if you think that you will need the contents again.

How to Report Issues

Issue reports (bugs, feature requests, questions, high fives, etc) are encouraged. Please take the time to report any problems that you are having. You can submit your issue on the GitHub repository with this form.

Better yet, fix the issue and submit it as a pull request! (see below)

How to Contribute to Shugr

Shugr is an open source project and contributions to the source are always welcome. Fork the develop branch of the GitHub repository, make your edits, and submit a pull request back to the main repository with documentation of the changes that you made.

How to Contact Me

You can reach me with brief questions that can be addressed in less than 140 chars on Twitter @csimpkins.