What is a code playground?
These code playgrounds are reviewed in no particular order. If you want to read my overall thoughts among them all, read the last section.
Codepen has a liveview that is automatically updated when you type and allows for three major layouts. These layouts reload the page when you click them and you can save your code to your account but must buy the pro version to get any private projects. The pro version also enables a live view that automatically updates on different devices as you type, asset hosting which allows you to use your images and other files for your site, a collaborative mode which enables shared coding, unlimited embed themes, "professor mode" which enables a full-screen for presentations, private pens and multiple external resources you can link to. You can read the entire list of benefits here.
JS Bin is different from the others by the way of embedding. Sure, others have embeddable code, but you have to click a link on the embedded app to go to that particular site to alter the code in any way. I think it's a much nicer sentiment to allow the code to be edited on the page it's embedded into. JSbin also offers a free _codecasting_ feature that Codepin charges for and, unlike CSSDeck, is live. Enter JS Bin! JS Bin lets you embed and edit the code right on the website it’s embedded on. Go ahead and try changing the code below!JS Bin on jsbin.com
Plunker allows for multiple files to be added to your project. This is helpful when trying to make more than just a simple demo. It features real time code collaboration and live preview updating, code linting, and the project is open source under the MIT license.
Unfortunately, the embedded code cannot be edited directly. You need to open it on plunker to mess with the code example.
CSS Deck shares many of the capabilities of the other code playgrounds, but offers a few more, while maintaining the low price of free. You can sign in with social media, including Github, as others have to offer.
Interestingly, CSS Deck offers the ability to record your process for others to review later on. They call them codecasts; go ahead and watch this one to see how it works. As with the others, you can fork (copy) any public project. However, CSS Deck offers a nice way to embed the code into a website (see below), which can be nice if you have a blog and share what you learn.
Dabblet feels much more design oriented than the others. I’m not saying the other code playgrounds look bad, but I really appreciate dabblet’s look. It’s the small things, like giving a visual representation of a dimension when you hover your mouse over the number, or show the color and other parameters when you hover over the word.
Again, the small things make me really want to like dabblet, like how they link to a website that validates your code. But, at the same time, the small things that other services offer and dabblet does not somewhat frustrates me because I like the design of this one so much. For example, you can't resize each section manually. So, one code section gets much smaller screen real estate than the other two, which may be helpful or harmful depending on what project you’re working on. You can embed dabblet by including an iframe with the source of your project. You can also change the layout and which section (HTML/CSS/JS/Result) you want to view at any given moment.
LiveweaveLiveweave is very similar to the others but has some different features; it has four different layouts that you can pick to suite your size monitor and preferences. However, Liveweave updates the layout without reloading the page and you can actually change the size of each individual cell. A small thing, I know, but I thought it was worth mentioning.
As you can see, embedding Liveweave is possible through an iframe, but it's not the most responsive layout. If you need to embed code, I recommend using a different playground.
While most playgrounds offer Emmet (formerly called Zen coding), Liveweave requires you to press Ctrl + E (Cmd + E) to activate the action, while the others require you to hit tab (tab is what most editing software uses). There's also a smart autocompletion and linting logic in the editor.
Liveweave offers the ability to download your code as well as a "Tidy-up HTML" feature that will auto-format and clean up your code a bit.
Another feature that is unique to Liveweave is the color & palette lab, a reference tool that will help you find or create the right color scheme for your site. As is with the other playgrounds, there is a plethora of externally hosted frameworks that you can reference.
Well, for one, JS Fiddle doesn't auto-update when you type. You need to hit Ctrl + E to run the code, which can be tedious if you're troubleshooting. You can still resize the cells, use external resources, frameworks, etc.
JS Fiddle has a nice collaboration mode that lets you work on the same section of code with people you’re working with, in real time. You can properly embed a fiddle in your blog by clicking the share dropdown (you need to be logged in to see this option). Below is an example of JS Fiddle's embed capabilities. Unfortunately, you cannot edit JSFiddle embeds directly (instead, there is a link to jsfiddle.net).
All the playgrounds I wrote about certainly have good things about them, so in the end it's up to you to choose which one you like the best and will go to first. I, personally, will likely use CSS Deck because it offers most of the things I will find myself using. Features that include embedding code that people can edit, simple design, and ease of use.
All of the playgrounds offer the basic necessities to troubleshoot your code and they even have what I would consider add-ons (such as Emmet). In the end, you should try them all, at least for a little bit. You will find features in one that you like over the others and choose from your experience. I know there are more code playgrounds, but I found these to be the most appealing to me.