There are many online playgrounds for frontend. Now all of them are very primitive, some of them are even working only as a text editor. But their potential is huge.
So I decided to start working on own project in this area. Right now it is only a carcass for the future project. But the main idea is creating a really interactive playground which will simplify frontend development.
The project will be similar to codepen/jsfiddle/jsbin but the main difference is interactivity. Coditor will allow changing your JS code, HTML, and CSS right in your rendered results, also it will allow creating the most popular elements with one click.
Some examples:
- Choosing a color of a background using a color palette just clicking on the color code in the
background-color: #eee;string - Getting suggestions about using a color palette based on added colors
- Searching icons with their preview right on the page with your code
- A special editor for gradients
It was developed with Vue and CodeMirror.
If you want to run the project locally:
git clone https://github.com/sihaelov/coditor.git
cd coditor
npm install
npm run dev
For more understanding of the concept, you can watch the presentation of Bret Victor «Inventing on Principle». He has designed experimental UI concepts at Apple and this presentation is the main reason why I started work on this project.
Posted on Utopian.io - Rewarding Open Source Contributors