Kristy
Kristy is an art director living in New York.
Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/raathigesh/semantic-edit
:pencil2: Real-time Preview Enabled Semantic UI Composer
https://github.com/raathigesh/semantic-edit
composer dev-tool online-editor semantic-ui
Last synced: 4 days ago
JSON representation
:pencil2: Real-time Preview Enabled Semantic UI Composer
- Host: GitHub
- URL: https://github.com/raathigesh/semantic-edit
- Owner: Raathigesh
- Created: 2015-11-14T08:02:28.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-06-30T10:47:34.000Z (over 6 years ago)
- Last Synced: 2024-10-23T07:52:58.290Z (13 days ago)
- Topics: composer, dev-tool, online-editor, semantic-ui
- Language: JavaScript
- Homepage: http://raathigesh.com/semantic/
- Size: 2.31 MB
- Stars: 110
- Watchers: 9
- Forks: 12
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SemanticEdit - http://raathigesh.com/semantic/
Real-time Preview Enabled [Semantic UI](http://raathigesh.com/semantic/) Composer
## How?
Copy the following Semantic-UI markup to [Semantic Edit](http://raathigesh.com/semantic/) editor.
```html
```
You could copy and paste any [Semantic UI components](http://semantic-ui.com/elements/button.html).
## But Why?
[Semantic UI](http://semantic-ui.com) 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](http://semantic-ui.com)
- [React JS](https://facebook.github.io/react/)
- [WebPack Build System](https://webpack.github.io/)
- [Ace Editor](https://ace.c9.io/#nav=about) & [react-ace](https://www.npmjs.com/package/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](https://twitter.com/SemanticEdit)