This is the updated version of an article published on 15th February, 2013. Updates include: featured image, information related to some of the services, replacement of Tinkerbin because the service is no longer active.
A variety of front-end code playgrounds have appeared over the years. The majority offer a quick and dirty way to experiment with client-side code and share with others. Typical features include:
- a preview window — many update on the fly without a refresh
- HTML pre-processors such as HAML
- LESS, SASS and Stylus CSS pre-processing
- developer consoles and code validation tools
- sharing via a short URL
- embedding demonstrations in other pages
- code forking
- zero cost (or payment for premium services only)
- showing off your coding skills to the world!
The best feature: they allow you to test and keep experimental front-end code snippets without the rigmarole of creating files, firing up your IDE or setting up a local server. Here are seven of the best …
If, on the other hand, you’re curious about online code playgrounds that will let you share back-end code too, head over to James Hibbard’s A Round up of Online Code Playgrounds for more information.
The prize for the best-looking feature-packed playground goes to CodePen. The service highlights popular demonstrations (“Pens”) and Projects, which is an online Integrated Development Environment you can use to build and deploy web projects, a feature only added in March 2017. It offers advanced functionality such as sharing and embedding of Pens, adding external JS and CSS libraries, popular preprocessors, and tons more. The PRO service provides cross-browser testing, pair-programming and teaching options starting from just $9 per month.
Plunker lets you add multiple files, including community generated templates, to kick-start your project. Just like CodePen, with Plunker you can create working demos, also in collaboration with other devs, and share your work. Plunker’s source code is free and lives on its GitHub repository.
More from this author
You can also add external libraries such as jQuery, AndgularJS, Bootstrap etc. quite easily in your workspace. Furthermore, Liveweave offers a ruler to help you code responsive designs and a “Team Up” feature which has the same features as JSFiddle’s collaborative editing.
I guess I missed your favorite?…