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

Real-time Preview Enabled Semantic UI Composer

How?

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.

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.

Features

• 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?

JavaScript!

SemanticEdit uses the following

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

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

• Follow us @SemanticEdit