Ace, CodeMirror, and Monaco: A comparison of browser code editors (2021) | Hacker News Reader

Ace, CodeMirror, and Monaco: A comparison of browser code editors (2021)

blog.replit.com

247 pointswilliamstein94 comments

Author here. Glad to see the blogpost on HN!

CodeMirror improved Replit's performance by a lot and by extension our retention. In fact, after releasing it to mobile in July[1] our weekly retention rate on mobile increased by a whopping 70%. That said, solve a lot of mobile usability issues so it's not all due to performance. On desktop however, it's a different story, we made sure to just have parity with Monaco and it still improved retention by %25, almost all due to performance!

If you like working on performance come work at Replit, we want people that care about the performance of our systems!

Adopting CodeMirror pushed us to write more in a more functional style that makes the code more fun and simple (not easy) in the shortrun, and more maintainable in the long run! My teammates write CodeMirror extensions for kicks and giggles, sometimes they end up releasing some "bret victor shit"[3].

If you like CodeMirror and end up using it in production, try to get your company to fund the project[4] and open-source as much as you can!

[1]: https://blog.replit.com/codemirror-mobile [2]: https://blog.replit.com/codemirror [3]: https://blog.replit.com/kaboomdraw [4]: https://marijnhaverbeke.nl/fund/

> Adopting CodeMirror pushed us to write more in a more functional style that makes the code more fun and simple (not easy) in the shortrun, and more maintainable in the long run!

I had a similar kind of good experience with code-mirror. I was writing my first proper compiler, and making a total dogs dinner of it. As a distraction, I decided to try put together an editor with syntax highlighting with CodeMirror. In the process of just fitting my compiler to the CodeMirror recursive descent parser I ended up bringing my compiler back from the brink of disaster. It feels really nice when a framework/API has enough good-taste/-engineering built into it that it improves code that uses it :)

I'll be interested in seeing how the upgrade to 6 goes - I'll wait until it's officially released, though...

(People've been using said compiler + IDE for about ten years now)

You’re killing me here. What’s the compiler?

( https://www.puzzlescript.net )

10 years of supporting your own compiler is pretty damn impressive

Not mentioned in the article but CodeMirror has a brilliant story for realtime collaborative editing. You have two options:

- An Operational Transform (OT) based system built by Marijn (the creator of CodeMirror)

- A Conflict Free Replicated Datatype (CRDT) based system using Yjs built by Kevin Jahns (the creator of Yjs) - https://github.com/yjs/y-codemirror

OT Demo: https://codemirror.net/6/examples/collab/

Yjs Demo: https://demos.yjs.dev/codemirror/codemirror.html

Both are brilliant, but I'm a huge fan of Yjs - the number of different bindings to different editors (and state systems) is incredible. It's a great platform to build collaborative tools on and the big plus is offline editing support, you can have a document diverge significantly while offline and still merge successfully. OTs are a little more difficult to make work well for a significant period offline.

I don't know which of the above Replit use, I would suspect the OT version as they mention building a OT system for Ace in the article.

We had to handroll our own OT implementation inhouse (based on https://github.com/ottypes/text-unicode) since we had built the system for it already. I suspect we would've used or forked CodeMirror's collab package if we were starting today.

Also huge fan of yjs, but the implementation is not compatible with codemirror 6, only version 5 (AFAIK)

There is Yjs bindings for CM6: https://github.com/yjs/y-codemirror.next

Amazing, thanks

FYI, this is a few months old, if you want to read something up to date, check out https://blog.replit.com/codemirror

Unfortunately copy and paste doesn't work well on Firefox on Linux in any of these fancy editors because support for the primary selection is broken and Mozilla doesn't seem interested in fixing it: https://bugzilla.mozilla.org/show_bug.cgi?id=1593761

The article calls CodeMirror "lightweight" but the minified JS is still over 1 MB. If you want lightweight then you probably want something like CodeJar (https://github.com/antonmedv/codejar) which clocks in at 2 kB.

The 1MB number is not correct, the core of CodeMirror is 150kb before gzip. Codejar is pretty cool, but it's super minimal, it's great if you want something very basic. It also doesn't really work on mobile despite using contentEditable.

I'm not taking gzip into consideration, I'm going by the fact that this file is 1.14MB: https://codemirror.net/6/codemirror.js

The size is going to depend on the set of features enabled and I expect that build has everything turned on so that it can be used for all the demos.

I did a quick check of a CM6 project (customizing the JS lexer) with the base options and a JS-derived lexer and it came out to 405k / 124k gzip. I wouldn't consider it especially lightweight but I think the size is reasonable for the feature set.

Hmm, not sure.

Here it is around 300kb inflated https://codemirror-basic-setup.replitfaris.repl.co/ using the basic-setup package, and I don't think this build tree-shakes.

Code for this build is here https://codemirror-basic-setup.replitfaris.repl.co/__repl

Your points are valid, but are not relevant.

> Unfortunately copy and paste doesn't work well on Firefox on Linux

Code editing in the browser has plenty of valid criticisms, but that criticism is as pointless as saying it won’t work in Lynx. Use any one of the many many browsers that do support copy and paste.

> which clocks in at 2 kB.

You aren’t comparing like-for-like in terms of functionality. You might as well say just use a <textarea> tag which clocks in at 0.02kB.

> but the minified JS is still over 1 MB

From the article: Modularity, bundling, and footprint: “CodeMirror is built with modern technologies. You can even use ES6 modules to import it with no bundler involved. Lazy-loading features is a breeze; dynamic ES6 imports are all you need. The project is very modular and has a very slim core.”.

CodeMirror is relatively light, compared against Monaco: “Monaco is huge. monaco-editor and related libraries contributed a whopping 51.17 MB to our bundle size (5.01 MB when parsed + gzipped)”, in Monaco “lazy-loading features are not possible as far as I'm aware”.

Using a browser based IDE is really powerful as an option, but comes with a major cost of having to co-exist with the browser in terms of keyboard macros/chords.

Personally, I've found it to be really annoying.

Using VSCode as a desktop connected to a remote code server, or using JetBrains Projector, is the true sweet spot where you combine the remote capabilities with a native app. Also fits well with vim/emacs TUI-style dev.

If I were building an IDE today, I would absolutely be building it as a client-server app from day 1.

For PWAs, you can "install" the app to your machine / phone which gives it its own icon and launches it in its own window. This also allows it to override most default shortcuts (Cmd/Ctrl+W, Cmd/Ctrl+T etc.) I use this with https://github.com/coder/code-server on my personal server and it's a way better experience for me than mucking around with SSH / SFTP plugins.

>If I were building an IDE today, I would absolutely be building it as a client-server app from day 1.

Why ? The last thing you want as a user when pressing a key in a IDE is to then wait for a network request.

That's exactly what a lot of users that do development on a beefy remote machine from a light machine they use as a terminal want. Ssh+vim+tmux is a pretty common setup. That network request might add 20ms of lag, but means that anything that requires CPU power will be an order of magnitude faster. The unhappy path (a bad or absent connection) is bad, but the happy path is pretty damn happy.

I guess the combination is the holy grail, but the effort may not be worth it in alot of cases.

What I'm referring to would be a caching view which both hides latency, batches communication for efficiency and perhaps even does some actions on the client-side buffer if it's deemed appropriate.

code-server (vscode in gerneral with remote development extensions) does a lot of splitting of processes between the server and client. This makes normal code writing done on the client side. Intellisense still has the network delay, but is something that takes time anyway. The terminal doesnt get this benefit so they instead add local echo to make the delay a little easier to handle with [1]. I do not know if this works in code server.

[1] https://code.visualstudio.com/updates/v1_51#_local-echo

ssh+vim+tmux actually unlocked my iPad as a coding tool, which is incredible. I can go on a bike ride, stop in the park, get a bit of work done with some tea in a thermos, and then bike back home.

And bill client for the whole day ;)

Does tmux add anything in particular to SSH+Vim? I’ve never used it so I don’t know the connection, other than its obvious use as a multiview terminal with fabulous persistence?

Multiplexing in the ssh shell is way more convenient than opening a new ssh connection every time you need a new terminal. If vim is occupying your shell you definitely want a multiplexer instead of Ctrl+Z every time you need to do something in shell. I know vim 8 has an integrated terminal but I can't stand using the terminal with vim keystrokes.

tmux is also amazing for spotty ssh connections. For example, I had to run long jobs over ssh through a VPN. Tmux means you don't need to worry about the connection dropping and losing your current process

Rendering will be done locally, so keypresses will be instant, the intelligent response will have 20ms lag, but that's not exactly much addition (as a total percentage) with current IDEs.

https://www.mightyapp.com/

shrug

It’s worth noting that the setup mentioned:

> Using VSCode as a desktop connected to a remote code server, or using JetBrains Projector, is the true sweet spot

is a zero lag approach when it comes to code editing.

The only time a brief lag show up in the IDE are when you need to open a folder/workspace in an uncached directory which is easily ignored.

I’ve been banging the drum on this setup for well over 2 years. Happy to share more info if interested

More generally with web apps the extraneous browser chrome (some of which carries over into "installed" PWAs, even) is annoying. If web apps are to be treated as true peers to their native desktop counterparts, browserisms like back buttons must be left behind.

Iirc you can’t reconfigure keybindings in any major browser. To me that’s terrible UX, preventative of richer web applications, and a usability issue.

I’m not suggesting JavaScript should be able to redefine keys without permission, but I can’t even disable CTRL+w as a power user…

Given my age, for me it is back to X Windows days doing remote development, only in a more fancy protocol.

CodeMirror is promising. Monaco is huge and clunky to integrate, but it works really well once you get past the steep learning curve. It has everything one needs to build a full IDE around it (as VSCode demonstrates, quite convincingly).

Right now, someone with own parser/language analyzer (I have built parsers for several SQL dialects) has just Monaco to work with as LSP for CM6 doesn't seem to exist yet.

Will be closely watching CM development.

Author here: We might release our LSP implementation for CodeMirror some time this year.

The LSP integration for Monaco is lackluster, it works, but isn't great. We thought LSP would work perfectly on Monaco only to find out that the Monaco APIs are very different from LSP APIs or even VSCode APIs. The 3rd party package out there is good, but you need a bunch of monkey-patching to make it work in an "IDE" environment.

lsp would be so awesome to see! please do consider releasing.

thanks for releasing codemirror-vim! not having vim capabilities has been one of the longest standing blockers to me using anything web-platform based. i understand there are some vim plugins for various platforms, but great to see some efforts out in the open for codemirror6. https://github.com/replit/codemirror-vim

I'm interested in your SQL grammars. Especially how you tested them.

FWIW I've been toying with ANTLR. I used some of their community's example grammars to get started. Is it weird that grammars generally don't include test harnesses?

And there is also this more recent article https://blog.replit.com/codemirror of why they chose CodeMirror

Thanks. It is great how they put so much effort into explaining their choices.

As a new user of Monaco trying to incorporate it into a project: I disagree with Monaco's documentation being good. Monaco's documentation is terrible, it's auto-generated API documentation. Examples are outdated or flat out wrong. To make matters worse, the (unofficial?) React plugin documentation is unreadable to newcomers https://www.npmjs.com/package/@monaco-editor/react

Yep. I ended up not even being able to import it as an npm package. Literally just copied it old-school-style into my repo, and iframed it in. The good thing about Monaco is that it's very good once you get it working. It's just the getting-it-working that really sucks.

I did a summer project last year and picked CodeMirror 5, after trying out several web editors. I can't remember why I made that choice. It had to work well with wasm + webworker. I'm very satisfied about CodeMirror 5 and is looking forward for version 6.

https://loda-lang.org/edit/?oeis=2487

I think in Stack Overflow Developer Survey or in the State of JS Survey, 3% or less responded they use cloud IDE. I wonder whether they are solving some real problem that cannot be solved in desktop IDE, and whether they will really take off one day.

I think they are solving for management, for example by locking down the dev environment. Not saying it’s impossible in desktop IDEs, but maybe harder?

X Windows and RDP/VNC, it is nothing new.

That might be the case today, but will that be the case two decades from now? I.E. if you had to optimize for friendliness for the next several million programmers around the world, is there potential to simplify the tooling and improve the onboarding & deployment experience?

It was the case already two decades ago, that is how I used to develop on UNIX, with X Windows and telnet, then eventually ssh replaced telnet, and RDP/VNC replaced X Windows.

The circle of re-invention keeps coming around.

The killer app for cloud IDEs is honestly going to be something GitHub code navigation. Imagine being able to do PRs with click to definition, find all references, etc., without having to pull in the changes locally. It's also great even right now for reading open source projects when you are trying to understand how something works.

They are great for viewing code, but I'm not convinced they are good for writing code.

Reviewing PRs on GitHub is embarrassingly bad, given that it's their core feature. It hasn't been upgraded for years, even, missing features BitBucket/Stash had like 10 years ago. Now a file tree is finally in beta, so it's possible to navigate between the files. But it's still impossible to see the context around changes without having to press expand/(...) a hundred times.

I've recently experimented with the PR feature inside JetBrains IDE's. It allows one to navigate quite well without having to actually switch branch. Like it so far, nice to see the whole file and related files, not just the diff.

TBH reviewing PRs on VSCode's Pull Request extension works pretty well for me. I agree it is a bit slow but I get to see the changes with all my keybindings, themes and other tweaks, this just makes the experience better IMO.

Have you seen this? https://docs.github.com/en/codespaces/the-githubdev-web-base...

The closest is to press ".", or change url from github.com to github.dev. That opens up the github repo in a VScode/Monaco editor

After being annoyed with Python's crazy unstable tooling, I've resorted to running everything I do in docker containers.

Makes it really easy to get a new project up and running. "docker compose up", and point pycharm to the python container as the remote interpreter and it's up and running. No longer having to spend a few days getting the local env up and running on some developer's unlucky configuration of software+hardware.

So while I still use a local IDE, and run most of my stuff in a container locally, it's not too far off from I feel it's viable to move everything to a computer in the cloud. Our DS people are working like that already, with their notebooks and stuff.

I would wager 75% or more of those respondents actually are using monaco as a code editor though--it's what powers VS Code's IDE editing experience.

Now that so many people are using VS Code anyway, it is the most perfect situation if you're dealing with sensitive data.

You just never have local copies of anything. Everything just runs on a server from your thin client.

Even useful if you need extra horsepower for a Language Server.

What is the definition of a "cloud IDE"? Is it limited to those that run in a browser,or does this include are ssh + tmux + vim, or VSCode with a remote server & JetBrains & its equivalent? If it includes the latter, I expect the number to be much larger than 3%

Cloud IDEs are the modern version of using X Windows or RDP/VNC sessions, that is the problem that they solve.

Yes, unfortunately Monaco is far from the most stable, but powerful out of the box. Therefore http://playcode.io moved from Ace to Monaco. Speaking of technology! Playcode is the only and first playground that uses Esbuild in the browser, so it works super fast.

what does it mean to use esbuild in browser?

It gives insanely fast and smooth experience in web development. https://esbuild.github.io/

So, you see result, as you type.

[Replit specific rant, but in my defense it's their blog post.]

I don't understand the in-browser code editor experience. How does it work?

I tried the emacs keybindings on replit... what a joke - Control-N to go to the next line? Nope. Control-P for previous? Nope. Meta-F? opens the file menu. I don't even know what keybindings I should be hoping will work.

Vi keybindings are much more usable in-browser (obviously).

A massive problem for me was getting out of the frame and not being able to get back in. I wanted to do something like ":compile". Or ":n" to get to the next focusable input field.

Maybe there are function keys bound? I wish I could find out.

Is there any possibility of one of these "IDEs" having auto-indent / reindent? I see from the docs there's supposed to be one, but all I get is not-smart left/right motion.

Working with beginners it would be very nice.

I think in Monaco you can right click -> Format Document or something like that.

Hey!

> How does it work?

It's a web application, so a lot of JavaScript.

> I tried the emacs keybindings on replit... what a joke

It needs some more love, the work is done out in the open, feel free to open issues. https://github.com/replit/codemirror-emacs

For what it's worth, we're not trying to recreate your emacs or VIM experience, just trying to port as many keybindings as we can. Will log the things you mentioned, it just seems like there's conflict with other keybindings.

> Maybe there are function keys bound? I wish I could find out.

Ctrl+Enter to run

> Is there any possibility of one of these "IDEs" having auto-indent / reindent? I see from the docs there's supposed to be one, but all I get is not-smart left/right motion.

What do you mean by left/right motion? Are you asking for like an auto-format feature? Or just handle re-indent when the indentation options change?

One more point to consider: CodeMirror is not accessible for blind users with screenreaders, as it just presents an empty text area. While Monaco is acdcessible, at least VSCode is. This used to cause a lot of pain for blind people using Jupyter, which uses CodeMirror (or at least used to).

The article says that the new version of CodeMirror uses a contenteditable and native selection, which I would expect to pretty much "just work" with screenreaders - is that not true?

I presume that is because it is a complicated feature, but not technically impossible? Although perhaps using contentEditable* makes an implementation more difficult?

* From article: “CodeMirror would achieve that by leaning on native browser text editing (via contentEditable) rather than implementing text editing entirely in the library/javascript.”.

Edit: from https://blog.replit.com/codemirror “CodeMirror 6 is a complete rewrite of the CodeMirror editor with a focus on accessibility, touchscreen support, and extensibility.”. I expect that marjin really cares about accessibility. However, in my limited experience, as a lone developer I couldn’t make our complex product properly accessible unless that was the focus of say six months effort, which we couldn’t afford at the time.

Ah, you're right, CodeMirror 6 appears to be more accessible. However it still only shows one line at a time. So that's still worse than Monaco. Monaco can show one or two hundred lines at a time. So with CodeMirror 6 I still would have to read text line by line without any way to skip a function for example, which is unnecesarily tedious.

Sure, I understand that people don't have infinite time to spend on perfect accessibility. I was careful not to have any blaming tone in my message.

This is mostly accurate for CodeMirror version 5. But this article is talking about version 6, which was intentionally built in a way that avoids the problem.

I like being able to create shareable snippets and appreciate the need for code editors on the web in some places. I would never rely on a web based editor as my full time editor. I have read a few dystopian takes where we rent our editors in the cloud (VSCode/Fleet seem to be leading this). Software is a trade, and the editor is the primary tool of the trade. Your editor should be able to follow you wherever you go, be easy to shape to your liking by being FOSS that you can compile yourself, and you should never rent it for money. Own the tools you rely on to make a living. Reading through usesthis.com and many a blog post, I've yet to find a programmer I admire that isn't using either vim/emacs for these reasons.

In theory, I agree with you, but on the whole, this is a rather elitist viewpoint.

The vast majority of the world uses a mobile phone to connect to the internet. While I do agree that web-based editors aren't as good as desktop-based editors, and that there's potential for abuse in the transactional nature of web-based editors, a web-based editor is the best that billions of people can manage.

It's not perfect, but I'd take a world with online code editors over a world where coding is only possible in a desktop environment. A world with more programmers and more people who are knowledgeable about how their digital lives really work is better than a world with fewer in the know, or fewer who are empowered to know due to technological limitations.

I'm glad this is an MIT-licensed project. This seems very lightweight, covers a lot of edge cases, is accessible, and seems to be fairly performant. Very good for a web editor. For websites like Pastebin or something where this comes in handy, I applaud the project.

But I agree, I will still never leave Emacs :) though, I don't think this project is aimed at replacing standalone editors.

After a couple of weeks of research we found Slate in for a project we're working on. In case somebody needs a proper editor framework - you definitely need to give Slate a try (https://github.com/ianstormtaylor/slate). It's one of the best editor frameworks I've used, and it also has a really nice React integration.

The article is about code editors, Slate is for building rich text editor.

I did a similar analysis a year ago and came to the conclusion that ProseMirror (https://prosemirror.net) was the right choice for my project. ProseMirror is an excellent toolkit for building your own rich text components and happens to also be written by the author of CodeMirror. It does not give you as quick an out of the box experience as slate (or any of the other rich text libraries out there) but its speed and flexibility is excellent.

I've been following Marijn for years in his development on CodeMirror and all I have is great admiration of all the work he has made over the last couple of years, how he gives support, and provide patches to fix reported bugs.

Just for that fact I've been implementing CodeMirror in every project I need to.

The code editors in Chrome DevTools are powered by CodeMirror.

I integrated Ace in a couple of projects for already 10 years ago and the experience was incredible smooth to use and upgrade versions.

One of them the uses was for the Remote Editor of my programming environment for Android, PHONK https://github.com/victordiaz/PHONK (is unmantained nowadays because of lack of time).

What I loved the most was the API to tweak the editor the way you want. Ace come with a demo where you can tweak all parameters easily. The only bug I encountered back in the day was some scrolling issues with ipads but probably is solved already.

I tried also CodeMirror and Monaco but somehow went back to Ace because of its simple setup.

Mobile support means that CodeMirror 6 is often the only option. I think it's a bit of a waste to start of project with Ace or Monaco, knowing that it will never work in mobile.

Ace is not perfect on mobile, but it works to some extent.

Agreed, it's really surprising to me that MS hasn't put more effort into getting a solid mobile-friendly option with Monaco.

For Markdown specifically, ByteMD is built with Svelte on top of CodeMirror. It's a real joy to use.

For editors in general, CodeMirror 6 is an excellent, modular rewrite of CodeMirror 5.

Monaco uses it's own build system that requires a lot of configuration twiddling to get it to work. Powerful, but it's first and foremost built for VSCode.

I read this just two days ago to settle on CodeMirror for the demo page of my new regex syntax!

Great blogpost.

OT: What are the main features that make you as a developer prefer a (browser-based or not) IDE over editors like vim/emacs? Does it make a difference if we're talking about professional development vs. hobby projects?

I prefer using a local editor using the withExEditor browser extension:

https://github.com/asamuzaK/withExEditorHost

Any thoughts on Code Server? It’s vs code in a browser, I’ve been used it for one year now and it’s great. But maybe it’s outside the scope of the article?

It's using monaco as the underlying editor, just like VS Code that it's based on. Code Server basically takes the VS Code codebase as is and just adds a very light server layer to do auth and static content serving. All of the frontend javascript code, etc. is the same as the desktop version of VS Code.

Might be worth taking a look at ProseMirror - it's fully modular and you can put it together by yourself - it's the ultimate in flexibility.

The article is about code editors, ProseMirror is for building rich text editor. However, CodeMirror and ProseMirror has the same author – Marijn Haverbeke.

Considering I can now press '.' on GitHub and get vscode, not including codespaces or opting to run in vscode on the desktop, why would I use one of these alternatives? And to be clear, I'm not advocating anything, genuinely curious what makes these better then the alternatives.

Maybe if you were developing on a Chromebook. But yes, I don't see any other reason. I'm curious too.

vscode is built on top of Monaco. These are all lower level editors with very well exposed APIs that let you build on top of them. It's more for developing something with a code editor versus directly using them everyday as your editor, though I'm sure people do.

You are thinking of personal use cases, but the point of these editors is that they strive to be as light weight as possible and are meant to be part of some online service that for some aspect of their functionality/features includes offering an embedded code editor. VScode has too much stuff for most of those use cases where you'd use something like CodeMirror.

When you press . on github you _are_ using one of those options--monaco, as built into VS Code's new client/PWA experience.

Exactly what I was looking to understand, thank you for the feedback.

IMO... you don't. Microsoft won the day (for now anyways).

Like X Windows for UNIX development or RDP/VNC for Windows.

IT has the final word on what development servers look like, what tools are allowed and what devs are able to do.

Remote development servers are the IT dream on devs not screwing up devenvs, or sneak in unallowed tooling.

Reply on news.ycombinator.com