16 Online JavaScript Editors for Web Developers

Top 5 Online JavaScript Editors You Probably Know Already

Top 5 Online JavaScript Editors You Probably Know Already

Notepad++, Sublime Text 2, perhaps even Wordpad for some. All of those are great editors, and certainly can help you build applications with JavaScript. It always has, and always will – come down to the preference of the developer.

Online JavaScript editors are great because they allow you to edit your code directly from your browser. But, another great function / feature is that you can usually see a live preview of what you’re doing, and that can really help save us time – when it comes to building functions, or full-scale projects even.

In the recent years, technology has allowed and enabled these online JavaScript IDE’s to let their users save projects and share them with friends, and online communities. I think the most popular among all is going to be JSFiddle, which is also one of the oldest ones on the list.

It’s worth noting that this list will grow into more than just a few JavaScript editors, as many of these platforms and website offer multiple programming language support, and you can expect to see HTML / CSS quite a bit, as well as a couple of other similar languages. It’s also very common for many of these tools to offer Git, Mercurial integration, and few-step deployment of your favorite apps.

JS Bin

JS Bin - Collaborative JavaScript Debugging
One of the community members suggested this in the comments, somehow I managed to miss one of the most obvious ones. I hope that putting it up the top, makes up for it! :)

JSFiddle

Create a new fiddle - JSFiddle
Quite possibly the most sophisticated – as far as simplicity goes – online JavaScript editor there is, offering a wide variety of functions and external features. Most notably, the ability to load tons of frameworks and extensions to make online development much more appealing, and accessible.

Little tools like TidyUp, and JSHint will clean and verify your code, or you can try the collaborate feature to invite your friends over for a coding session!

Codenvy

Codenvy IDE
What about a full-scale IDE for developers who want to do more than just JavaScript? Codenvy might help. In 2013, the team behind Codenvy raised 9$ million to help many developers transition from the traditional desktop development, to doing development on the web, full-time. It’s a huge promise, and it will certainly require a lot of work.

Just head over to the homepage, and see for yourself the amount of environments that Codenvy offers, and whether you’d like to try any of them. Besides, it beautifully integrates with several PaaS services to make deployment incredibly fast and easy.

Rendera

Rendera - Online HTML5 Editor
I think that many new developers and designers underestimate, the amount of time that goes into switching tabs and seeing whether the code works or not. Rendera can help immensely, it provides simple functionality and you can view the results within one single click. It’s very lightweight, and is great development environment for beginners. Built with Sinatra.

Cloud9

alex - Cloud9
I love c9, and the way they do things, very professional, modern and stylish! Oh wow, so cheese! Much cringe. You can easily create new workspace, for applications such as: Node.js, WordPress, Django, Rails and of course custom ones. It really makes development much easier, and for beginners it means quicker learning process.

Built-in app deployment, makes transitions seamless. The premium plan will cost you $19, not all that much – considering the wide variety of features, and overall online IDE experience.

sourceLair

sourceLair · online IDE for Django, Python, JavaScript, HTML_CSS
Very appealing to those developers who’re looking for full cloud integration of Git and Mercurial. You can clone, commit, pull repos with ease and have everything stored fully in the cloud. You can easily begin a Django project within seconds, as the IDE has features integrated that allow to deploy a new stack very easily.

I have no heard of sourceLair a whole lot, but it looks very promising and it has actually been around for longer than many of the JavaScript editors on this list.

Application Craft

Visual IDE in the Cloud - App development for Mobile and Desktop with Application Craft
It’s not free, but it offers a lengthy 45-day free trial, which should be more than enough to understand the platform and see whether you’d like to continue using it, at just $14 per month. It’s fairly feature rich, and is also putting a lot of emphasis on mobile development, possible the most of all the editors in this list. I could ramble on for the rest of the day, but instead I recommend watching their YouTube channel and seeing what they’re all about.

Liveweave

Liveweave - HTML5, CSS3 & JavaScript playground for web designers & developers
Great little online JavaScript editor, supports HTML5 & CSS3 at the same time, like most of these editors! :) It’s similar to JSFiddle, probably boasts a little bit less libraries, but has a little bit more broad GUI, and also a button that can enable and disable live editing. Has a built-in color palette generator.

CodePen

CodePen - Pen
CodePen is an HTML, CSS, and JavaScript code editor in your browser with instant previews of the code you see and write. Very cool platform, and has thousands upon thousands of examples, of how versatile web development can be, and what can be achieved through combining three programming languages. I’m always on CodePen, looking for new ideas and inspiration. Other than that, it’s a great online editor.

Turb0JS beta

Turb0JS
Use Turb0JSbeta to write, store, share and analyze small JavaScript programs. Run the code in the browser step by step, using breakpoints and watch expressions. Just click on the line number and execution will halt at that line, and see the values of your variables in the watch window. Want to change the code? Simply edit the code and run it again. You can also make a copy and save your changes in you “Drive”. You’ll have to sign in for that, see below. Will not support DOM, just JavaScript.

kodtest

{kodtest_}
Different GUI, same functionality. Yep, nothing much changes from the likes of JSFiddle, or Liveweave. The only difference is the interface, and perhaps the choice of libraries.

Codio

The World's Most Powerful Browser-Based IDE - Codio
The free version is limited to open projects only, the premium is priced at $12 per month.

Quick video shows the default interface, and some functions like pulling from Git, with just a couple of clicks. Try their features page to see more videos like that, I’m not sure I’d be better at explaining them through words.

Koding

Koding I A New Way For Developers To Work
Koding is similar to Twitter, only it allows you to code within the interface, and it offers some nice collaboration tools along the way. It’s definitely one of the nicest development environments I’ve seen, as far as the style goes. You’re given a free virtual machine when you signup, to aid you with your development journey.

It doesn’t matter what language you need to program with, it’s all covered with Koding. They provide extensive guides to both beginner and experienced types of coders, and constantly offer things like free terabyte weeks, where you can participate to gain more free space for your projects.

It’s very popular in teamwork communities, where multiple people are working on the same thing. I had no idea what this site was until a few weeks ago, but it’s really cool and I suggest you check it out.

Code Beautify

Make your code beautiful with Code Beautify
It’s not a direct JavaScript editor, but it does serve a great purpose, and combined with any of the tools mentioned in the list, it can also be quite powerful. It’s a code beautifier, which will take your piece of code and allow you to minify it, beautify, make it a tree view, etc,. etc,. It’s different for each type. Try it out, a really nice tool, and worth having in the bookmarks – like this post is! :)

Compilr

Compilr
Compilr is an online editor & sandbox that lets you write your code all from the comfort of your browser. We do all the heavy lifting so you can just focus on writing and learning code!

Supports the following languages,

  • C++
  • C#
  • Java
  • HTML5
  • JavaScript
  • PHP

it actually timed out for me, so be careful how you browse the site. The result is that I am unable to gather more info, I think it’s deciding too quickly whether someone is a bot, or a real user.

Codeanywhere

Online Code Editor - Codeanywhere
This is the last online code editor on our list, and it’s certainly not the worst. Codeanywhere enables the synchronization with FTP, SSH and even storage sites like Dropbox, to give you access to your files wherever you are. It’s the ultimate tool for web workers on the move. Best of all, it is light weight and fast, so you can concentrate on working, not on the fact that you working from a browser.

Online JavaScript Editors for Web Developers

I started out with a list of 5 of these editors, it quickly escalated and we’ve ended up with 15 of them. I’m pleased with the result, and I was able to learn about a few new ones, that had never crossed my sight before. I hope you too, were able to find something new, and perhaps something you’re going to play with – more than just once.

Not sure, if I have missed any, but I welcome additions to the list and I’ll add them accordingly.

21 COMMENTS

  1. Hi Abhi,

    it seems perfectly fine to me, you’re the first person to say anything. Any suggestions on how I can improve it, and what exactly is distracting you from reading? Is it possible you’re sitting in a dark room?

  2. What about nitrous.io? I’ve done simple projects, and it seems to be on par with Cloud9. Just curious about what others think.

    • Hi Kos,

      could you elaborate a little bit more and maybe give us some examples to work with. I like the idea, but quite puzzled as to what exactly I can do with it.

      Try and grab the attention of all others readers as well. :)

  3. Would be great to add MeteorPad, an IDE for Meteor.JS apps. You get a virtual machine with MongoDB on it and the Meteor server. A sample project is already loaded, and you can edit the server and client HTML, JS and CSS files. The resulting app runs in the right pane. Makes playing with Meteor super, super easy. Literally one-click.

  4. I use the ShieldUI JavaScript framework, because is complete with lots of JavaScript HTML5 components, very customizable and utile. It also has 24/7 support packages.

  5. Hey there! I’ve been reading your weblog for a long time now and finally got the courage to go ahead and give you a shout out from New Caney Texas! Just wanted to mention keep up the excellent work!

  6. You can also check out PlayCode – fastest online JavaScript editor.
    Minimalist design and very fast livereload.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.