We’re seeing a rise in front-end code playgrounds over the years, with most of them offering a channel on which to experiment with client-side code and share with anyone. Typical features are:

  • A preview option – many update quickly without a refresh
  • HAML and other HTML pre-processors
  • Popular JavaScript libraries are included
  • Short URL – easy sharing
  • Code forking
  • Free! (or you can choose to pay for premium services)
  • Color-coded JavaScript, CSS, and HTML editors
  • Showing the world your coding abilities!

 

But the best feature of all is that they let you test and keep experimental front-end code snippets without the nonsense of generating files, initiating your IDE, or putting together a local server. Here we give you 6 of the best:

 

JSFiddle

You betcha. JSFiddle was one of the first code playgrounds and a pioneer, acting as a model for all the ones who followed. Disregarding its name, it can be employed for JavaScript, HTML, and CSS experiments. Despite its basic look for modern times, it provides advanced functionality – like Ajax simulation, for example.

 

CSS Deck

Once again, don’t be fooled by its name, this one is a fully-developed CSS, HTML, and JavaScript playground with social and collaboration elements. CodePen is also similar, but maybe you will prefer CSS Deck.

 

CodePen

This playground wins first place for the most aesthetically pleasing and feature-packed, hands down. The service emphasizes popular demonstrations (a.k.a. Pens) and Projects, which happens to be an online Integrated Development Environment you can utilize to build and execute web projects. It also features advanced functionality like sharing and embedding of Pens, adding external CSS and JS libraries, and more. If you’re in the mood, by upgrading to PRO, starting at $9 a month, you get cross-browser testing, pair-programming and even teaching options.

 

JS Bin

This service was invented by one of the masters of JS, Remy Sharp. It focuses on the basics and deals with them excellently. It also provides a useful JavaScript console.

 

Dabblet

Another one of the pioneers, Dabblet started as a HTML5/CSS3 demonstration system developed by Lea Verou with JavaScript abilities. It’s pretty beautiful and if needed, it will autoprefix all your CSS. Dayum.

 

Plunker

Similarly to CodePen, with Plunker you can generate working demos, also collaborating with other devs if you choose, and share your creations. You can also add files, such as community-created templates, to begin your project. Plunker’s source code is free and can be found on its GitHub repository.

 

WAD Author

Connect with >8,000 participants, >300 tech companies & startups and >100 speakers from >50 countries. Experience the latest technologies and innovations on the market and participate in workshops, round tables, and interactive sessions with the world’s leading developers and IT experts.

LEARN MORE