Skip to content


Subversion checkout URL

You can clone with
Download ZIP
An online playground with an instantly ready coding environment. Combine language preprocessors, CSS, HTML and JavaScript to create and share coding examples.
JavaScript HTML CSS CoffeeScript Other
Tree: a5bb1d363a

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.

Fiddle Salad Live Web Development

The web developer's wonderland that makes everyday tasks enjoyable, a live editor for front-end languages

Current Features

  • 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
  • Import from existing site

Supported Languages

  • HTML

    • HAML
    • Zen Coding (input method)
    • Jade
    • CoffeeCup
  • CSS

    • SASS and SCSS with Compass
    • LESS
    • Stylus
  • JavaScript

    • CoffeeeScript
    • Python

Getting the Code and Running it

git clone git://
git clone git://
mv cloud-ide-templates templates
git clone git://
cd django-cloud-ide
python install
cd ../fiddlesalad
pip install -r requirements.txt (see if you don't have pip)
python syncdb
python runserver

Open in the browser.

Installation Notes

Compiling CoffeeScript

from the static/js/ folder run

coffee -cw -o ./compiled-coffee .\

Developer Documentation

The wiki has information on the overall design.

Contribution Guidelines

Features ready to be implemented:

  • Save lint options with fiddle, as a part of the JSON
  • HTML class and id auto-complete
  • Auto-semicolon insertion for CSS style languages
  • Hide window title bar option
  • Color picker
  • Scroll source to current cursor position in editor
  • Better CoffeeCup documentation page with syntax highlighting
    • Use CodeMirror's built-in run mode
  • More Languages
    • Markdown
    • Eco
    • Move

Syntax Highlighting

Get started by reading the CodeMirror manual. The modes are under static/js/codemirror/mode/.


Thanks to

Something went wrong with that request. Please try again.