20 Best Code Playground for Your Arsenal

From past couple of years a variety of code playgrounds have been introduced to the developers which combines the power of myriad of languages such as CSS, HTML, PHP, python, and JavaScript to help you to develop innovative and useful web applications.

One of the best feature of a playground is, it allows you to test and keep experimental snippets code without the rigmarole of creating files, firing up your IDE or setting up a local server.

In this article we have compiled a list of 20 Best Code Playgrounds which enable you to test, debug, and run your code for building interactive and flawless web applications.

Here is the list of Best Code Playgrounds.

1. Codepen

CodePens is one of the most popular and widely used coding ground which has been serving well to developers for years now. CodePen is a playground for the front end side of the web. It’s all about inspiration, education, and sharing. The service highlights popular demonstrations (“Pens”) and offers advanced functionality such as sharing and embedding.

2. JS Hint

JSHint is a community-driven tool to detect errors and potential problems in JavaScript code and to enforce your team’s coding conventions. JSHint is open source and will always stay this way.

3. JS Nice

JSNice uses advanced machine learning and program analysis techniques to learn name and type regularities from large amounts of available open source projects. It is a new kind of statistical de-obfuscation and de-minification engine for JavaScript.

4. CSSDesk

CSSDesk is an Online CSS Sandbox. It allows people to quickly test snippets of CSS code, and watch the result appear live.

5. JS Bin

JS Bin is a webapp specifically designed to help JavaScript and CSS folk test snippets of code, within some context, and debug the code collaboratively. JS Bin allows you to edit and test JavaScript and HTML

6. JS Fiddle

sFiddle is a shell editor that eases writing JavaScript code by creating a custom environment based on popular JS frameworks. You can select the framework & the version of your choice (MooTools, jQuery, Dojo, Prototype, YUI, Glow,Vanilla).

7. Liveweave

Liveweave is a HTML5, CSS3 & JavaScript playground and a real-time editor for web designers and developers. It is a great tool to test, practice and share your creations! It has resizable panels, so that you can write your code (or weave, as we call it) the way you want.

8. Editr

Editr is a HTML, CSS and JavaScript playground that you can host on your server. It is based on ACE Editor. Its super easy to setup. It supports multiple instances on one page.

9. Dabblet

Dabblet is an interactive playground for quickly testing snippets of CSS and HTML code. It uses -prefix-free, so that you won’t have to add any prefixes in your CSS code. You can save your work in Github gists, embed it in other websites and share it with others.

10. D3 Playground

The D3.js Playground is designed to allow you to play with the D3.js library in an interactive manner.

11. Google’s Code Playground

Google’s Code Playground is a web-based tool that lets web developers try out all of the APIs that Google provides, tweak the code, and see the results. Google’s Code Playground lets you play around without opening an external editor, and all of the APIs are loaded for you in the Pick an API box

12. Ideone

Ideone is an online compiler as well as a debugging tool. It allows programmers to compile source code as well as execute it in online in more than 60 programming languages including JavaScript

13. Kodtest

It has beautiful, GUI, same functionality as JSFiddle has, nothing much changes from the likes of JSFiddle, or Liveweave. The only difference is the interface, and perhaps the choice of ibraries.

14. Codemagic

Codemagic.gr is a powerful online code editor for web development! It’s open-source and it follows the philosophy of client-side and fast execution. It’s built for creative people who do a lot of web-related experiments and want to test stuff in real-time without the hassle of preparing project files and whatnot.

15. LiveGap Editor

It is a free online code editor for html,css,javascript,xml with syntax highlighting,live preview,code folding,fullscreen mode,themes,matching tags,auto completion,tag finding,frameWork and closing Brackets.

16. HowJS

HowJS is a JS playground for minimalists with a WYSIWYG editor. It has a much simpler UI & execute your JS code when you’re typing, no need to pull up the browser console anymore.

17. Repl.it

The repl.it project is an attempt to create an online environment for interactively exploring programming languages. It provides a fully-featured terminal emulator and code editor, powered by interpreter engines for more than 15 languages.

18. Codepad

codepad.org is an online compiler/interpreter, and a simple collaboration tool. It’s a pastebin that executes code for you. You paste your code, and codepad runs it and gives you a short URL you can use to share it. Paste the URL into chat or email to get help or to show someone how to do something. Or just try things out when you don’t have an interpreter handy. It works well on many phones.

19. Js.do

This is an online JavaScript Editor that can be useful for editing JavaScript online. It presents a simple screen where you can post your JavaScript and run the code to ensure that your script is doing fine.

20. Runcode

Rextester runcode is an amazing playground where you can write test and play with code for more than 30 languages in real time.