📝 Semantic UI / HTML Previewer

Semantic-live introduces a Real-time HTML previewer into Visual Studio Code supports Semantic UI templates.

Introduction

• Semantic-live is an extension that provides you with many useful functionalities including a live previewer for html, js & css including semmantic-UI library
• Why Semantic UI ? It is an awesome library with excellent components that you can use to quickly build web interfaces. But I felt like it would be nicer if we can compose bunch of elements and see in realtime how they fit together. That's why Semantic-live.
• Feel free to ask questions, post issues, submit pull request, and request new features.
• For more information about this project and how to use this extension, please check out below sections ⬇︎

How?

Copy the following Semantic-UI markup to the vscode html extension file.

<div class="ui card">
  <div class="image">
    <img src="http://semantic-ui.com/images/avatar2/large/kristy.png" />
  </div>
  <div class="content">
    <a class="header">Kristy</a>
    <div class="meta">
      <span class="date">Joined in 2013</span>
    </div>
    <div class="description">
      Kristy is an art director living in New York.
    </div>
  </div>
  <div class="extra content">
    <a>
      <i class="user icon"></i>
      22 Friends
    </a>
  </div>
</div>

You could copy and paste any Semantic UI components.

Features

Semantic-live supports the followings

• 💅 Renders instantly any html document with its content. It does not support rendering of html which includes frontend frameworks or libraries (simple html rendering)
• 🎨 Supports css and js that gets added within link & script tags, whether external files or inline code it will render them
• 🌈 Supports semantic-ui library component rendering
• 🌏 Re-renders any changes that was made for current html file or any javascript/css files that are linked to a html file
• 🌟 Beautifier

Getting started

• Install the Semantic-live extension in VS Code
• After opening a html file, click on the icon to toggle the side-bar
• Place your cursor in the html content
• You should see the sidebar tries to render the html content

Demo

What's Under the Hood?

TypeScript!

Semantic-live uses the following

• Semantic UI

Changelog

Please check the Releases | Github page of this project.

Contributing

Have a look at our contribution guide.

Contributors

Keshan Nageswaran 💻

License

MIT License