Online Editors for Blogs and Webpages

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.

1. jsfiddle

                    The jsfiddle is one of the best option to test your HTML, CSS and JavaScript code. You just have to put the HTML code in HTML pane, CSS code in CSS pane and JavaScript code in JavaScript pane and execute the code.

  It even allows different JavaScript libraries like jQuery, Mootools etc..

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.

2. jsbin

                 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.

3. jsdo.it

                    This very unique editor, unlike the jsfiddle and jsbin you have to login using one of your account such as google , yahoo etc.. This allows you to share the code using the link. Also jsdo.it allows to upload your own resources to it. But unlike the jsifddle you can only see one pane at a time html or CSS or javascript or files. This allows you to link your code to github.

4. codepen

              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.