raathigesh/semantic-edit

:pencil2: Real-time Preview Enabled Semantic UI Composer

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

semantic-edit's Issues

Ability to switch themes

Should be able to switch betweek supported themes probably through a dropdown list.

Ability to use emmet to expand html elements

Hey this is an awesome tool! I'm definitely going to be using it.

One thing I'm missing though is https://github.com/emmetio/emmet capabilities so that the markup can be written up quickly. Would be great to see this as an addition.

Adding support for accounts

Create new account.
Login to existing account.

Ability to share a composition by URL

Ability to share a composition by URL would be very usefull to quickly share ideas around

Improve UI

Improve UI by adding more details to indicate how to use the tool effectively.

• Add label for saying the editor accepts html.

Snippets

Could be interesting to get some code examples to insert (either replace or add) into the edited code, something like planttext.com does, but I would suggest adding selected code snippets instead of replace the existing code. :-)

The snippets could be from the same SemanticUI documentation, or some cool implementations from other users.

Alert before exiting

Should make sure people cannot lose progress by alerting them before leaving the tab/window.

Add users, save snippets/components

It would be a really nice feature to be able to log in, save components and view them, etc.

How can I help?

Hey Raathigesh,
I am really new to programming and just started to mess around with a little bit of code. But as far as I can judge, what you are creating with SemanticEdit is huge thing, which I was searching for already for a long time, so I would like to support. Is there anything easy or simple I can do some improvements? If you are guiding me through, I gladly help!
Best
Sam

Ability to add custom styles

Enable users to define their own css styles.

Have an option to resolve images from semantic-ui.com

Semantic UI documentation has relative image URL as below.

<img src="/images/avatar2/large/kristy.png">

So when we copy paste the markup directyly we have to change the URL to absolute as below manually

<img src="http://semantic-ui.com/images/avatar2/large/kristy.png">

It would be nice to have an option (Checkbox or a Toggle), when checked, will automatically change the image URL's to absolute URL.