Online code editors are great when it comes to writing and accessing your code from anywhere. These web-based code editors are also helpful for sharing your code with others or for demoing your project, and for doing collaborative editing with other developers.
Online Code Editors
CodePen also has a huge community of front-end developers and you will easily find demos and example that are built by other great developers. It’s always fun to explore the picks and popular section on CodePen to get inspiration as well as to learn new things in front-end web development. They have job boards too where you can find front end design and development jobs.
CodePen Pro offers Collab Mode which allows you to pair program in real time and Professor Mode for allowing a group of students to follow you as you teach code and chat with each other.
JSFiddle also supports SCSS and CoffeeScript. Sharing or embedding your code demo is also quite easy with JSFiddle.
With Liveweave, it’s quite easy to add external libraries such as jQuery, AndgularJS, Bootstrap etc. to your projects. It also offers a ruler to help you with your responsive web-design. Liveweave offers a “Team Up” feature which has same features as the JSFiddle collaborative editing.
Plunker is also an online community (like CodePen) for creating, collaborating on and sharing your web development ideas. It is a fully open-source online code editor under MIT license. You can find Plunker’s source code on GitHub.
Plunker allows you to add multiple files in your workspace and also has community generated templates, which you can use to kick-start your project.
JS Bin supports codecasting too, which allows you to record your coding session, and cast it out to any number of participants, generally in real-time. JS Bin supports codecasting out of the box, for free, to both registered and anonymous users. All you need to do is share your demo’s url with /watch instead of /edit.
CSS Deck is a bit simpler tool compared to others and offers the feature of comments apart from the basic features. Sharing and embedding of your demo is also possible with CSS Deck.
kodtest comes in handy when you want to check the result of your code in multiple screen sizes. This online tool allows you to quickly switch between multiple pre-configures screen sizes.
Demo of Online Code Editors
To help you in comparing the features of these online code playgrounds, I have compiled a demo for all the editors above. You will find the link to the demo on each of the images above for the tools. The demo utilizes CreateJS library to draw draggable shapes on canvas like circle, star and rectangle.
Below, I am embedding the demo I created on CodePen. You can change the tabs below to see the HTML, CSS and JS code. Or play around with the draggable shapes in the Result tab.
Note: If you are reading this in a RSS feed reader, you may not see the embedded demo above. Please follow the demo link or open the article in your browser to see the demo.
To keep the size of this post smaller, I have not embedded demo of other code editors, however they could have been embedded here in similar manner. As mentioned earlier, you can find the link to demo on other code editors on each of the images above.
Final Words about Web based Code Editors
Web based code editors are able to find use in multiple scenarios. Whether you require to jot together a quick-prototype of your projects, or you want to share a demo with your client, or even when you want to collaborate with others in your team, these online tools would make a good choice to keep in your bookmark.
The web-based code editors are also great for educational purposes, as they require no setup and can be easily accessed from devices such as chromebooks too.
In this article, we have limited ourselves to the code editors available for front-end web development. However, there are many other code editors which can help you write code online in many other programming languages such as Swift, Go or C#, VB.NET & F#. In fact there are even complete development environments available in the cloud which can be accessed from your browser such as Koding and Could9.
If you do front-end web development, then do leave us a comment about your favorite online code editor and in case we missed mentioning yours, we would certainly like to know.