Skip to main content

7 of the Best Code Playgrounds

By Craig Buckler



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. In this article, we take a quick look at seven of the best.

Typical features of these online playgrounds include:

  • color-coded HTML, CSS and JavaScript editors
  • a preview window — many update on the fly without a refresh
  • HTML pre-processors such as HAML
  • LESS, SASS and Stylus CSS pre-processing
  • inclusion of popular JavaScript libraries
  • 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.


JSFiddleJSFiddle was one of the earliest code playgrounds and a major influence for all which followed. Despite the name, it can be used for any combination of HTML, CSS and JavaScript testing. It’s looking a little basic today, but still offers advanced functionality such as Ajax simulation.


CodePenThe prize for the best-looking feature-packed playground goes to CodePen. The service, co-founded by Chris Coyier, highlights popular demonstrations (“Pens”) and Projects, which is an online Integrated Development Environment you can use to build and deploy web projects, a feature 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.

CSS Deck

CSS DeckThis may be named CSS Deck, but it’s a fully-fledged HTML, CSS and JavaScript playground with social and collaboration features. It’s similar to CodePen (I don’t know who influenced who!) but you might prefer it.

JS Bin

JS BinJS Bin was started by JS guru Remy Sharp. It concentrates on the basics and handles them exceedingly well. It also offers a handy JavaScript console. Recommended.


DabbletAnother early playground, Dabblet started life as an HTML5/CSS3 demonstration system by Lea Verou with JavaScript facilities. It looks gorgeous and autoprefixes all your CSS if needed.


Fron-end Code Playgrounds: PlunkerPlunker 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.


Liveweave Code PlaygroundLiveweave is one more online HTML5, CSS3 & JavaScript editor with live preview capabilities. It offers code-hinting for HTML5, CSS3, JavaScript and jQuery and lets you download your project as a zip file.

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.

Other Options

There are, of course other options out there. Did we miss your favorite? Tell us about it!

We haven’t talked here about online code playgrounds that will let you share back-end code too, such as CodeSandbox. For more on those, head over to James Hibbard’s round-up of online back-end code playgrounds for more information.

If you’d rather host your own online development environment, check out ICEcoder (we have an article on it here).

And if you’d rather not be online when messing with code, but want something similar, check out something like Web Maker (we have an article on it here).

Happy coding!

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

Integromat Tower Ad