✏️ Real-time Preview Enabled Semantic UI Composer
Switch branches/tags
Nothing to show
Clone or download
KeshShan Merge pull request #13 from KeshShan/master
Implementing an alert before user tries to exit the tab/browser to avoid losing changes made in the editor
Latest commit 965d8bb Jun 30, 2018



SemanticEdit - http://raathigesh.com/semantic/

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="http://semantic-ui.com/images/avatar2/large/kristy.png">
  <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 https://github.com/Raathigesh/semantic-edit.git

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