The importance of online code editing platforms cannot be overemphasized. As much as we love our local IDE’s, one too many times we find ourselves needing to quickly share and or collaborate with a friend or colleague in our local projects.
Table of Contents
In cases like this, online playgrounds give us that added functionality to write and run codes as well as share snippets and have colleagues test it out and give us feedback. In this post, we’ll be looking at the top 5 online code editors for JavaScript in no particular order.
CodePen
CodePen is an online social development environment for front-end developers. It comes fully equipped with all the features you’ll need to build, test, share, collaborate and even deploy your websites.
Plans and Features CodePen plans are flexible enough to accommodate whatever needs you might have. First, there are individual and team plans. Under the individual plans, you have a range of other plans that have been carefully structured to offer you a wide range of choices depending on what features are more important to you and on how much you can afford.
The free plan has all you need to perform usual operations like creating pens, sharing snippets, running tests and so much more. If you’re developing for experimental purposes or just building out your project for development purposes, the free plan has all you need.
The PRO plan, however, adds a little bit to what you can do with CodePen. With CodePen PRO, you get unlimited privacy, asset hosting space, live view, embedded themes and so much more. On the PRO plan, you won’t miss your local IDE. If you have specific needs for these features and you’ve got a few dollars to spare, then these plans are totally worth the price.
You can visit the pricing page to have a closer look at what each plan offers to help you decide. However, that’s not all, as we mentioned earlier, there’s also a team plan for people working in teams. The price of the team plan is subject to the number of members in your team. However, it comes with a standard $12/month/member price.
CodeSandbox
CodeSandbox is an online editor that allows developers to focus on writing code while it handles all the necessary background processes and configurations. Unlike CodePen, CodeSandbox focuses more on building and sharing code demos that contain back-end components. The editor is optimized to analyze npm dependencies, show custom error messages, and also make projects searchable by npm dependency.
CodeSandbox offers dedicated sandboxes to help developers quickly get started on developing with their favorite tools to build web applications. With CodeSandbox, all you need to do is open the browser, select your preferred development tool and start writing code. It abstracts all the backgrounds tasks and configurations so that you only need to worry about writing your code. With Condesandbox, we can do all of the following and more:
Github integration With Codesanbox 2.0, you can commit, create repositories and open pull requests right from within CodeSandbox.
Host static files CodeSandbox hosts all the files in the public directory for you. Previously this functionality didn’t exist on CodeSandbox, but now, you can add static images, web workers, etc. As a result, you can imitate all the functionalities of your local development server as you now have full access to the index.html file.
Real-time collaboration With CodeSandbox, you can create a project and open a Live Session to generate a live URL you can share to colleagues. Through the URL, all your colleagues can work together on the project at the same time. This may seem difficult to manage when the number grows, and you can’t track what each person is doing. As a result, you can switch to a Classroom Mode where you can specify who can edit the sandbox and who can only view.
Visual studio code integration CodeSandbox has a feature called VSCode in browser. It allows you access to VSCode features like keybindings, user snippets, breadcrumbs etc. All you need to do is copy your settings files directly from VSCode to CodeSandbox, and you will have control of all the files on your sandbox. These are only a handful of the features you’ll get with CodeSandbox, there are more, like working in teams, Sandbox containers etc. I invite you to check them out their docs page for more.
Back-end support
It is worthy to note that CodeSandbox is one of the few online playgrounds that has support for back-end languages like Node.js. What’s more? It has npm support. As a result of it, you can install any npm package you require in seconds.
StackBlitz
StackBlitz is a VSCode powered online playground for web developers. It offers developers the ability to create projects in just one click. The collaboration features of StackBlitz makes it possible to share a created project with colleagues through a unique project URL.
Seamless project setup Like other playgrounds we’ve already mentioned, StackBlitz automatically takes care of all the background processes involved in setting up projects; like installing dependencies, compiling, bundling, etc. This way it abstracts the setup process for you so you can focus on what you do best, writing code. Stackblitz is renowned for its ability to handle Angular and React projects, all you need to set up a new of them is the click of a button.
VSCode similarity Because VSCode powers StackBlitz, it comes packed with all the Aesthetic features we love in VSCode, giving you the look and feel of your local IDE.
TypeScript support StackBlitz has TypeScript support and TypeScript auto-completion, a feature that is not found in other IDE’s like Plunker.
NPM support With StackBlitz, you can import any npm package into your project, just like you would in VSCode. Better still, you can copy snippets from documentation pages and blogs into the editor and it’ll automatically detect the missing packages and prompt you to install them.
Image credit to Eric Simons.
Offline support Thanks to StackBlitz in-browser development server, you can continue writing code and editing your work even when offline. This gives you the superpower to build offline while leveraging the power of the online platform, killing two birds with one stone. We can’t possibly go over all the perks, but you’re welcome to see them yourself on the website.
JS Fiddle
JSFiddle is an online playground for creating, testing and showcasing collaborational HTML, CSS and JavaScript code snippets, known as ‘fiddles’. It is one of the earliest playgrounds that laid the foundation for the creation of other modern-day playgrounds. At the moment, it may seem a bit basic compared to modern playgrounds like CodePen; however, it still performs basic playground operations like testing, sharing, and collaboration. As an added advantage, JSFiddle can also perform complex ajax simulations.
JSFiddle lets you quickly get started by providing access to unique boilerplate templates for diverse technologies. As a result, it’ll take you just about the click of a button to generate a boilerplate code for React, Vue or whichever technology you want.
As much as JSFiddle behaves alike with other playgrounds, it has certain features that make it equally unique in its own way. Unlike most others, with JSFiddle, you can customize, add and use other JavaScript tools and frameworks easily. With the Togetherjs support, JSSFiddle offers an interactive user interface that lets users collaborate and share fiddles with colleagues. Moreso, it has inbuilt Git support. You can also use JSFiddle for any of the following:
JS BIN
JSBin is a live playground for Html, CSS and JavaScript and a range of other preprocessors like jade, markdown and much more. It provides specific editor panels with an intuitive user interface for user interactivity. With JSBin, users can create bins, share, collaborate and test codes.
JSBin is mostly focused on the ability to share code. It shares not just the code but also the complete output result of the code in the bin. It’s real-time collaboration features lets colleagues view and see changes in real-time as you type in the editor panels.
Though JSBin opens into a default Html code on start, there are many libraries available for you. You can add as many libraries as is required for your project to build your desired product.
With JSBin, all created bins have a unique sharing Url that other users can join with to collaborate, fork and or edit the bin, while your original bin remains intact. Moreso, with JSBin, you can perform the following operations and more
JSBin also has a PRO plan that adds more functionality to what you can do. It gives an additional layer of features to extend your bin functionality. With The JSBin PRO, you can
Scrimba
Scrimba is an entirely different kind of online playground than what we’ve seen so far. It offers you the ability to pause the video and edit the instructor’s code and see the result in the editor.
In-video interaction This provides an extra layer of interactivity to the usual playground functionality. Scrimba lets you take up an instructors demo and build it up into whatever use case you desire. In the playground mode, you can interact with the instructor’s code however you please, and you can edit, copy, paste and basically perform any interactive operation you desire.
Cross-platform Scrimba is completely cross-platform. It adapts to any screen size and arranges contents in both portrait and landscape mode to match your screens resolution requirements, this way, it constantly serves you the best visual output.
Console and dependencies Scrimba has an in-built console that both the user and the instructor can access to run commands and debug code. You can log messages just the same way you would in any other editor. It also lets you install external dependencies into your project. What’s better? the Scrimba team has designed the console in a way that you can see the console output with opening the console panel.
Analytics Scrimbar has a sidebar notes features that track all the changes you make in the editor. This is a handy feature that gives you the ability to keep track of all your changes and refer to them in the future when the need be.
Liveweaver
Liveweaver is an online playground for Html, CSS, and JavaScript for web designers and developers. Like other editors we’ve come across, Liveweaver gives users the ability to create, test, and share code with colleagues.
It opens into distinct editor panels for Html, CSS, JavaScript and Output panels respectively. One remarkable feature of Liveweaver is its simplicity. A newbie could easily open up Liveweaver, create a small app and run it without reading up any prior documentation.
Moreso, Liveweaver supports a wide range of third-party libraries like Bootstrap, jQuery, Threejs etc. This helps developers build more robust applications without library support hinderances.
Liveweave is free to use and comes packed with over 20 handy JavaScript libraries. With Liveweave, you can do all of the following and more
Conclusion
In this post we have discussed five top online JavaScript editors you can use in 2019. Each playground has it’s unique abilities so its difficult to choose a “best” one amongst them. We can, however, choose the one whose features best solves our needs. Disclaimer: This five online playgrounds discussed here are entirely my choice based on my own experience with them. There are other amazing online playgrounds like Plunker, CSS Deck, Dabblet, etc. If you have other playgrounds in mind, please do share them with us in the comments below. Hopefully, this post would help you pick the most suitable one for your needs.
#javascript
