Awesome Open Source
Awesome Open Source


SemanticEdit -

Real-time Preview Enabled Semantic UI Composer


Copy the following Semantic-UI markup to Semantic Edit editor.

<div class="ui card">
  <div class="image">
    <img src="">
  <div class="content">
    <a class="header">Kristy</a>
    <div class="meta">
      <span class="date">Joined in 2013</span>
    <div class="description">
      Kristy is an art director living in New York.
  <div class="extra content">
      <i class="user icon"></i>
      22 Friends

You could copy and paste any Semantic UI components.

But Why?

Semantic UI 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 Edit.


  • Beautifier

Run & Build from sourcecode

Clone the sourcecode:

git clone

Install the dependencies:

npm install

Install webpack and the development server:

npm i webpack-dev-server webpack -g

You can simply run webpack build using this command:

npm run build

If you want to run with webpack-dev-server simply run this command:

npm run dev

Open the web browser to http://localhost:8080/

What's Under the Hood?


SemanticEdit uses the following

That's It?

I'm hoping to add features as I move along. Got a feature suggestion? Would love to hear about it. Please create a new issues.

Stay Updated

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,538,296
Composer (2,216
Semantic Ui (633
Related Projects