A variety of front-end code playgrounds have appeared over the years. Most offer a quick and dirty way to experiment with client-side (and sometimes server-side) code then share it with others. Here’s our look at seven of the best.
Online coding playgrounds typically include:
code command auto-complete
a preview window which (normally) live reloads without a manual refresh
HTML preprocessors such as HAML
Less, Sass, Stylus, and similar CSS preprocessors
developer consoles and code validation tools
coding collaboration facilities
sharing via a short URL
embedding demonstrations in other pages
code cloning and forking
copying to code repositories such as GitHub
zero cost for a basic service
further premium services for a small monthly charge
a way to show off your coding skills to the world!
They allow you to test and keep experimental code snippets without the rigmarole of creating files, firing up your editor, or running a local server.
Let’s look at some of the better options.
CodePen PRO provides private Pens, asset hosting, a collaboration mode, and themes for embedded iframes starting from $8 per month.
JSFiddle concentrates on code so you won’t find a range of social features such as highlighted demonstrations and sharing facilities. The interface is simpler than others and, unusually, you must hit Run to reload the results pane. However, it always feels snappy and its simplicity may be preferable to some.
3. JS Bin