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> <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.

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

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/

JavaScript!

SemanticEdit uses the following

• Semantic UI
• React JS
• WebPack Build System
• Ace Editor & react-ace

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.

• Follow us @SemanticEdit