October 10th, 2012 by Adrian Parr
Over the last year or so there has been increase in the number of online HTML, CSS & JS editors. These are usually intended to demo small snippets of code that can be saved and shared. The feature sets of each service differ slightly, so you may need to try a few before you find the one that suits your specific requirements. Here are a few to get you started (with the most popular/fully-featured near the top). Many of these are based on CodeMirror or ACE.
jsdo.it is a Japanese online playground that has some very talented individuals using it. It is the sister site to the Flash AS3 online playground wonderfl. It pushes other peoples creations to the homepage (which is good for inspiration) and allows you to fork their code and modify it as you like. There are categories too (such as Application, User Interface, CSS, Game etc) which is useful. You can ‘Fav’ other peoples creations and you can ‘Follow’ them too (like you can on Codepen).
ztxt – This is open source and available on github (thanks to Zevan Rosser). There is not a hosted version of this, the intention is that you download a copy of ztxt and then either run it locally using MAMP (or WAMP), or you host it on your own live webserver. I like the way that it can be used locally and allows access to your local filesystem. More information on ztxt can be seen on YouTube here.
Tinker – This is fairly bare-bones, but it does have a clean UI (with draggable editing areas) and offers syntax highlighting and saving (to a unique short URL). Clutter-free and to the point. It is open source and available to download from github (thanks to Chiel Kunkels).
pastebin.me – Created by Dale Harvey as a personal project, this tool is pretty bare-bones. A single editing panel with a non-realtime output panel. No syntax highlighting or features that the other editor have. It is available to download from github.
Google Code Playground – This is similar to the HTML5 Rocks Playground, in that it is intended to demonstrate pre-written chunks of code (not as an editor for you to create your own and save) that you can tweak to see the results. The great thing about this is that it is chock-full of fantastic examples of accessing Google APIs, ranging from Google Translate and Google Calendar, through to Google Search, Maps and YouTube. If you are planning on using a Google API, it is worth checking here first to see if there is an example that will help. The link to the documentation is context sensitive, depending on what type of example you are viewing at the time.
That pretty much wraps it up for now. I’m sure there are a bunch of other ones I’ve missed off this list (eg. Plunker), let me know in the comments if there is one I should take a look at. Enjoy!