Sunday , 17 December 2017
Home | Resources | 6 of the Best Online Code Playgrounds

6 of the Best Online Code Playgrounds

Have you ever wanted to test out a new development idea quickly, to see if you’re on the right track? Did you ever wanted to share your source code with your friends/users and let them run and improve the code? If so, you need to check out the listed online code playgrounds, as this article is really for you.

In recent times quite a range of online code playgrounds have appeared. Most of them offer a quick and easy way to experiment with client-side code and the ability to easily share the code with others.

Today, we have compiled six of the best online code playgrounds, which would really help you easily test, run & share your code online. So without any further delays, here they are:


6 of the Best Online Code Playgrounds

JSFiddle is one of the earliest and most widely used code playground, which also played a major influential role for all which followed. It can be used to test your HTML, CSS and JavaScript code. You can easily create a custom environment based on most popular frameworks & extensions such as jQuery, MooTools, YUI, Ember and a lot more. You can easily save, share and embed the JSFiddle code snippets into your web blogs, articles etc. You can also speed up your coding workflow by utilizing the power of emmet automation as JSFiddle does supports emmet.


6 of the Best Online Code Playgrounds

CodePen is one of our favorite coding playgrounds, and just like others mainly used for HTML5, CSS3 and JavaScript. It also offers live view, three different layouts (the page does refreshes when you change the layout).

CodePen isn’t just a coding playground but it is also a learning hub. Unlike most of the other coding playgrounds where the code must be shared, or you must have a link to view the code, CodePen Pens are available to all and you can easily view & Fork any of the Pens from different categories such as Picks, popular, recent and a wide array of tags to narrow your search.

You can easily share your Pens through different mediums such as social media, page urls & sms. You can also save any of the Pens as a GitHub Gists or by exporting them as a zip file. CodePen also supports emmet. You can create different collections depending on your choice, and can easily embed any of the Pens in your web blogs/articles etc.

CodePen Pro version offers more solid goodies such as multiple device previews, Asset hosting, Collab Mode, Professor Mode and the ability to mark your code as private and Multiple external resources.


6 of the Best Online Code Playgrounds

Liveweave is a real-time editor mainly used as an HTML5, CSS3 & JavaScript playground. It offers four different layouts to choose from at a time depending on your requirements and the best thing about this is that it all happens in real time without refreshing the page. Liveweave also offers live preview and you can easily turn it ON/OFF depending on your requirements.

It also supports emmet but you’ll have to press Ctrl + E (Cmd + E) to activate the action unlike others where you’ll have to press the Tab key to get the job done. Like most of the other playgrounds, Liveweave also offers the ability to download your code (a Single HTML file or a Zip), you can also create your own color palette to help you create the right color scheme for your site. You can also auto-format selected code using Tidy-up HTML, and can take advantage of using quite a range of available libraries like Angular JS, Bootstrap, jQuery UI, Ember, Kinetic JS etc.


6 of the Best Online Code Playgrounds

Dabblet also offers almost the same features as JSFiddle but is more catered towards testing and sharing HTML and CSS code where JSFiddle is widely used for JavaScript code snippets. But this doesn’t mean that you won’t be able to test any of your JavaScript code, as Dabblet is very much capable of doing that as well. It also offers small inline previews for many kinds of CSS values like lengths, color, angles, gradients, character entities, fonts and a lot more.

The best features of Dabllet is its use of -prefix-free,  which lets you use only unprefixed CSS properties everywhere, and you won’t have to add any prefixes in your css code. Secondly, you can save all your work as GitHub gists, share your code snippets with others and you can easily embed any of your code in websites.


6 of the Best Online Code Playgrounds

CSSDesk has been around for years & is extremely helpful tool for playing with your web code. CSSDesk is a very simple coding playground which also mainly focuses on HTML and CSS. It also offers basic syntax highlighting and live preview just like most of the other coding playgrounds. You can also view code from other users just like CodePen which is categorized in different categories. Another amazing feature is the codecasts, where you can record your coding process & easily share the whole process.


6 of the Best Online Code Playgrounds

JS Bin is a web app specifically designed to help you test JavaScript, HTML and CSS code snippets. You can also easily debug the Javascript code through console which is one of the very best feature of JS Bin. JS Bin also allows the code snippets to be easily saved and shared for reviews or help. You can also record your whole coding process using CodeCast and can easily share. Another great feature is that you can view the result in a new window as well. JS Bin also allows the ability to code faster by utilizing emmet.

These were our picks for best of online code playgrounds, hope one of these will really help you develop something awesome, do let us know if we have missed any of your favorite in comments section below.

Leave a Reply

Your email address will not be published. Required fields are marked *

Join our Newsletter!

Subscribe to our email newsletter for useful tips, Tech News and valuable resources.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.