Develop ideas and code with free online sandboxes

Today I had felt like tinkering with my blog design. Normally, when writing code, I hop between Code Writer (incidentally not a bad app for Windows 8 and a much more attractive looking alternative to Notepad++) and Firefox; alt-and-tabbing often enough to give epileptics cause for concern. Today though, I wanted a sandbox to use which would allow me to code and see my changes all in one window, as I make them.

Here is a mini-roundup of the top three I found.



So I started with jsFiddle. Slightly silly name if you ask me and combined with the fact that these digital sandboxes are also sometimes called playgrounds I find it incredible they haven’t been filtered out of half the networks around the world!

But that aside the site itself is quite up to task. As the name suggests its main purpose is to develop JavaScript and as such there are many options for including a multitude of other libraries as you code. I also love how every block is resizeable so you can code with as much space as you want and vary the preview screen too. It’s main downfall though is the fact you must press run to update any changes you make. This makes sense for JavaScript work though as a lot may change in between updates. Not so much for pure CSS.



From the name this sounded far more up my street. The layout is minimal and clean but lacks options. The updates for the preview however are seamless, and don’t even seem to flicker. Sadly this sandbox also lacks more pretty standard features: no way to re-arrange the layout other than to hide all the code boxes (why?) and there is no built-in sharing solution, just a generated link.

¬†CSSDesk is clean and quick but lacks pretty standard features found elsewhere. If I wanted to test out something quickly this is perfect. But to build and share something properly I would really have to go for…



This has to be my favourite of the bunch. It seems to have everything, a completely changeable layout (including quick links to set layout styles), extra theme styles to change how it looks to you and, more importantly how it looks when you embed your code into another site. On the topic of which there is also an official WordPress app for inserting your embed straight into posts with a shortcode.

One more great thing I like about CodePen is the homepage. Straight away you’re thrown into a mix of projects made by other users of the site. It’s a great way to find inspiration or just good ideas to use on your site or a customers.

So there you have it my round up is complete and I can say for certain that my personal favourite of the bunch is CodePen. It has all the features you could ask for and more. I could even be tempted to buy a Pro account. Yes it is that good!

Written by:

Be First to Comment

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.