The web developer's wonderland that makes everyday tasks enjoyable, a live editor for front-end languages
- Views
- Results (live)
- Compiled output (live)
- CSS tooltips
- jQuery API links
- Auto-complete
- CSS keyword
- HTML attributes
- JavaScript context
- Saving
- Local history
- Diff of different revisions
- Converters
- JS -> CoffeeScript
- HTML -> Jade
- HTML -> HAML
- CSS -> SASS
- CSS -> SCSS
- Import from existing site
-
HTML
- HAML
- Emmet (input method)
- Jade
- CoffeeCup
- Markdown
-
CSS
- SASS and SCSS with Compass
- LESS
- Stylus
-
JavaScript
- CoffeeeScript
- TypeScript
- Python
- Roy
- Opal
git clone git://github.com/yuguang/fiddlesalad.git
git clone git://github.com/yuguang/cloud-ide-templates.git
mv cloud-ide-templates templates
git clone git://github.com/yuguang/django-cloud-ide.git
cd django-cloud-ide
python setup.py install
cd ../fiddlesalad
mv settings.default.py settings.py
pip install -r requirements.txt (see http://guide.python-distribute.org/installation.html if you don't have pip)
python manage.py syncdb
python manage.py runserver
Open http://127.0.0.1:8000/ in the browser.
A virtualenv setup script is included for Linux
git clone git://github.com/yuguang/fiddlesalad.git
git clone git://github.com/yuguang/cloud-ide-templates.git
mv cloud-ide-templates templates
cd fiddlesalad
mv settings.default.py settings.py
# initialize virtualenv (details skipped)
git clone git://github.com/yuguang/django-cloud-ide.git
cd django-cloud-ide
python setup.py install
cd ..
git clone https://github.com/clintecker/django-chunks.git
cd django-chunks
python setup.py install
cd ..
git clone https://github.com/clintecker/django-chunks.git
dev-python/bin/python manage.py syncdb
dev-python/bin/python manage.py runserver
from the static/js/ folder run
coffee -cw -o ./compiled-coffee .
run less compiler from the command line or install SimpLESS
sudo apt-get install coffeescript
cd static/js/
coffee -cw -o ./compiled-coffee ./
python manage.py loaddata language_fixture.json
The wiki has information on the overall design as well as UML diagrams.
Features ready to be implemented:
- Auto-semicolon insertion for CSS style languages
- Hide window title bar option
- Color picker when hovering over CSS color values in editor
- Homepage with vertical orientation and categorized languages
- Scroll source to current cursor position in editor
- More Languages
- Eco (Browserify nodejs module)
- Traceur
Django's i18n middleware will be used, but only the translations for buttons and labels are needed.
- Spanish
- Russian
- German
- Japanese
- French
Get started by reading the CodeMirror manual. The modes are under static/js/codemirror/mode/.
To add a language:
- Modify the LANGUAGE and LANGUAGE_CATEGORY settings in fiddle-configuration.js.
- Write a class in fiddle-engine.coffee that inherits (Style/Program/Document)Editor
- Add the class to root.editor, which is globally scoped, for dynamic instantiation
- Create the compiler (aka worker) in static/js/compilers/ with the sendResult and sendError functions. The compiler reads input from e.data for style and program editors and e.data.code for document editors
The Homepage uses Twitter Bootstrap's fluid grid system to align buttons. The main files to modify are templates/home.html and static/css/home.less.
All UI elements are generated using Knockout and jQuery UI. Knockout templates are in templates/templates.html, with the View Model in static/js/model.coffee. Main stylesheet is static/css/fiddle.less.
Thanks to
- Tom Wilson for the CoffeeCup compiler
- Lorna Qin for redesign