CodeMirror vs Ace Editor

There are a lot of online code editors out there and I have aggregated 30 Code Playgrounds in the past. There are also mini code editors, all kinds of browser editors, and some cool ways to write, save, and preview code with developer tools. Since HTML, CSS, and JS is all processed on the client side it makes sense to bring code editing to the browser. Today, I am going to take a look at two JavaScript libraries that enable online code playgrounds with all kinds of code editing features: CodeMirror and Ace Editor. I am also going to create my own mini code playground with these tools to see which one I like more.

CodeMirror is pretty awesome and it powers both JSfiddle and CodePen. Here is a list of all the tools and websites that use CodeMirror and it is the first library I have tried. There are a ton of demos, good documentation, and a nice compression helper.

I took a look at all the demos and built a simple example that will allow me to drag and drop files, directories of files, and even archive zip files into the browser and I can visualize the contents of files, or code, with CodeMirror (version 3.18). I also added a “view raw” feature that creates a blob object with FileReader and let’s you render any file in a new browser tab or window. Finally, I leveraged ZeroClipboard to easily allow copying of source code to the clipboard.

Drag, Drop, and Edit Code with CodeMirror

Overall, I like CodeMirror and the only performance issues I have encountered happened with big files and special options like line wrapping, which makes sense as I was testing a large minified file. Next, I tried Ace editor. It powers GitHub, Mozilla Add-On Builder , and a lot more. It also has great documentation, API reference, and guides but I really love that it comes with a kitchen sink example. Also, it’s pretty easy to get CodeMirror to work with Emmet (Zen Coding) but Ace Editor has an official example.

So, I transformed my demo to use the Ace and it felt much easier to implement. I loved that it did not need to load any special css, nor any modes unless it needed them, but the main JavaScript file for Ace is much bigger. It had no problem loading huge files and I also like that it comes with modes like JSON and the modes are nicely named. Here is the same demo with Ace:

Drag, Drop, and Edit Code with Ace Editor

Overall, I prefer Ace, but only slightly and that might change depending on specific needs. Either way, I am glad there are alternatives. In fact, there are other code editors like Orion and here is a good overview and comparison of JavaScript source code editors.