As a blogger I wanted to add feature like "try it yourself" editor on "www.w3schools.com" to my blog and allow visitors of my blog to test them. Sometimes when having a problem, wanted to post code and show the live demonstration of the problem to the users on various forums.
There are a lot of options available on the Internet.
The jsfiddle allows a lot of options:
1. Create different version of the code.
2. You can share the code with others. I have created the code for text shadow and its easy for me to share it just using the given link "http://jsfiddle.net/avdhut/9V3Py/" .
The code can also be embedded into your blog using the embed page option. This is a very cool feature and its very easy to add it to your blog. For first time I have added it to "CSS 3 Text Shadow" article. This gives result of exactly what I added.
We can add our own resources and work with them online.
The jsbin is a very good online editor. It has similar features to jsfiddle. It can also be shared with other users. Interesting thing about jsbin is that it allows you to lock the version, giving more options for creating and saving versions. Its html pane contains <Doctype> , html, body and other tags that are used in webpage design. It auto executes the code allowing us to see the output as we code.
It is another good option for the testing your code online. This also has similar features as jsfiddle.
It has additional features such as professor look. But many options of the codepen are paid. I found out about codepen from an article on css-tricks.
I tried to create a try it yourself editor "Create Try It Yourself Online Editor", but its very primitive and raw as compared to the more advanced options that I have mentioned in this article.