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:
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.
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.
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.
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.
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.