6 Coding Playgrounds For Web Developers

Over the past couple of years several coding playgrounds have popped up, much to our delight. These are web applications that allow real-time editing and previews of client-side codes: HTML, CSS, and JavaScript. The best part of these coding playgrounds is that most of them are free and you can easily share a “playground” with someone either for teaching purposes or for debugging.

Personally, these web applications have been a great help to my work. Whenever I find myself stumped with JavaScript or CSS, I can easily create a playground and share it to my other developer friends for help. They are fun, interactive, and totally helpful especially for beginners. Here are 6 coding playgrounds that you can try out for yourself.

Recommended Reading: 15 Websites To Test Your Codes Online

1. Codepen

Codepen is probably one of the most popular coding playgrounds out there. Chris Coyier of CSS Tricks is a co-founder/co-creator of Codepen, which probably explains why this web app looks grand. Aside from its sleek visuals, Codepen displays live previews of the changes you make in its editor, making it easier to see cause and effect.

Codepen’s available CSS pre-processors include SCSS, SASS, LESS, and Stylus. And for JS pre-processor it has CoffeeScript and LiveScript. For HTML it has Haml, Markdown, Slim, and Jade. There’s also 8 built-in JS libraries ready to be used. Collaboration and private “pens” in Codepen are available, but you have to pay for them.

2. JSFiddle

JSFiddle is probably responsible for the popularity of coding playgrounds, since it is one of the first and most famous playgrounds available. JSFiddle has over 30 JavaScript libraries ready for immediate usage, plus you can add external files easily. For pre-processing, it has SCSS for CSS, CoffeeScript for JS and simple vanilla HTML.

If you are collaborating with another developer, I highly recommend using JSFiddle to sort things out. Among the available coding playgrounds out there, JSFiddle’s collaboration feature is probably the best of the bunch. Plus the feature is easy to use and free, unlike Codepen.

What is missing from JSFiddle is live previews. You have to basically refresh the page by clicking on the play button. And compared to other playgrounds, JSFiddle is probably the slowest. Another slightly frustrating quirk of JSFiddle is its run button, sometimes clicking on it doesn’t work, so you’ll have to click a couple more times before it actually runs the code (and yes, I tested this on multiple browsers).

3. JS Bin

JS Bin is created by Remy Sharp, a master JavaScript developer who owns a web development company focused on, you guessed it, JavaScript (and HTML5). JS Bin’s JS pre-processor includes CoffeeScript, TypeScript, Traceur, and JSX and has over 40 JS libraries at its disposal. You can add external files, but you’ll have to do it manually on the editor. As for CSS pre-processor, it provides LESS.

What sets it apart from the previous playgrounds is that JS Bin allows you to download files to your computer, a nifty feature that may prove useful to developers, especially when fiddling around with code while offline. You can also create private “bins” on JS Bin but you will have to pay for this feature. Unfortunately, at this point, JS Bin doesn’t have a collaboration feature.

4. CSSDeck

CSSDeck has been around for several years now but it hasn’t made much of an impact. But it is still noteworthy because of its simplicity. If you want to avoid all the noise of other playgrounds with all of their features, CSSDeck is the app to use.

CSSDeck’s pre-processors include HAML, Markdown, Slim, and Jade for HTML, LESS, Stylus, SASS, and SCSS for CSS, and CoffeeScript for JS. It also has several CSS and JS libraries available and adding libraries that aren’t in the list is done manually, which should be easy.

One thing that surprised me about CSSDeck is its simple but useful feature that allows its users to increase text size. If you are looking for a playground with lots of fancy features then CSSDeck isn’t for you. But this is also what makes it unique since its simplicity gives focus on the things that matter.

5. Dabblet

Before anything else, Dabblet surprised me big time when I hovered on hex color codes. The colors actually popped out! Now, that’s a first. Although I’m not certain if that’s actually a useful feature, it’s still pretty neat.

Now, the great thing about Dabblet is that it allows its users to preview it in 5 different views: CSS editor and the result, HTML editor and the result, CSS and HTML editors and result, JavaScript and its playable result, or everything at once. I hope that wasn’t a mouthful, but it’s crucial to understand that this bulk feature is not available on other playgrounds.

One thing that I’m confused about is its lack of pre-processor options for HTML and CSS. It doesn’t have these along with built-in JavaScript libraries. But I guess you can insert those manually, so no sweat on that. With regards to each panels, they are fixed in size and you can’t resize them, something that the previous playgrounds have. Also, it doesn’t seem to have a gallery of demos from other users.

6. Liveweave

Liveweave is a useful coding playground packed with quite a few features such as having the capability to turn off its live preview. You can also take better care of your eyesight with the night vision mode, where everything turns dark. Liveweave offers over 20 JavaScript libraries. It even supports SVG. It also comes with a built-in ruler which is great for getting precise measurements and aesthetics.

One more thing that caught my attention is its easy collaboration feature. If you have used Teamviewer in the past, it works the same way. All you have to do is click on the Team Up link and you can share the link to your “weave”. I’m not certain if it’s my laptop or my Internet connection, but there seems to be a slight lag. Still, it’s an essential feature and Liveweave did it beautifully.

You can even download your weaves as a single HTML file (whoops, JS, CSS, and HTML in one file – minus points!) or as a zip file for separate HTML, CSS, and JS files (well, there you go). Before I forget, it has a built-in Lorem Ipsum generator.

Conclusion

Well, there you go, each playground has their own unique characteristics that may prove useful to you in one of your “playtimes”. I hope this article has helped you in picking the right one for your needs. If you have other playgrounds in mind, please do share them with us in the comments below.