Reason for switching from Monaco to CodeMirror?

minu · October 24, 2024, 9:51pm

I’ve noticed Livebook switched from Monaco to CodeMirror some time recently. That must’ve taken a non-trivial amount of work, I wonder what was the reason?

I’m asking because I’m implementing an app that has code editor for some features. It seems Monaco is easier to get started with, but has less options for customizing, perhaps that was the reason?

sbuttgereit · October 25, 2024, 12:49am

The PR that implements the change offers some insights…

github.com/livebook-dev/livebook

Migrate the code editor to CodeMirror

livebook-dev:main ← livebook-dev:jk-cm

opened 02:27PM - 24 Jan 24 UTC

jonatanklosko

+4985 -3386

[CodeMirror](https://codemirror.net) is an extensible, modular, and lightweight …(everything is opt-in by default). When we started Livebook it was in the process of rewriting, but things stabilised since then and I decided to migrate from Monaco. Monaco is fairly heavy and even with cherry-picking imports, it's just a lot of stuff that we don't need. Over time we accumulated a lot of workarounds, including monkey-patching. A couple updates worth noting: 1. Full load for the session page content 6.9 MB -> 4.0 MB (actual transfer 1.6 MB -> 958 kB). 2. Editor history distinguishes remote changes, so when collaborating, undo rolls back local changes only (properly transformed). 3. I revisited collaborative cursors propagation and now they are a part of the Operational Transform, meaning that the cursors update in sync with changes, which is particularly relevant under noticeable latency. 4. I made all editor mounting lazy. We mount the editor only once it enters the viewport. We put the editor content into the page though, so search works and the scroll position is accurate. This way, even very large notebooks can be opened pretty quick. 5. CodeMirror uses an incremental parsing system for highlighting and indentation, we now have [livebook-dev/codemirror-lang-elixir](https://github.com/livebook-dev/codemirror-lang-elixir). 6. Closes #2003, closes #2417. Actually fixes #152 and #1098.

jonatanklosko · October 25, 2024, 6:28am

When we first started Livebook, CodeMirror was in the process of a complete rewrite (v5 → v6), so Monaco was a clear choice at the time. It’s been some time since the rewrite happened and I run into some articles regarding CodeMirror, so reevaluated and decided it’s worth migrating. It was definitely work, though a major part was adding the parser for Elixir for good highlighting, and the collaborative editing bits, which we had to implement for Monaco in the past as well.

Monaco definitely has a ton of features that you would need when building a mini IDE, however it’s not that modular, so even with cherry-picked imports the bundle ends up being quite huge. Over time, there were quite a few cases where had to do hacky workarounds. There are APIs for adding custom features/elements, but it’s not the same level of power that CodeMirror gives you.

The CodeMirror extensible design is extremely thoughtful, it may require a bit to wrap your head around the abstractions, but once you do it is actually much fun to extend the editor. We successfully implemented all the features we needed, including collaborative editing, user cursors, completion, hover documentation, signature preview, diagnostics, and doctests indicators. Styling and theming with CodeMirror is also much easier, you can just write CSS for a bunch of classes. With Monaco it’s much harder, you end up overriding certain built-in styles with important rules, and themes specify colors for certain attributes, instead of using CSS freely.

I would give CodeMirror extra points for beautiful, extensive documentation covering all the options, conceptual guides, and examples. Monaco, even though it’s a massive project, basically exposes an auto generated API docs, with many of the options having little to no explanation. The CodeMirror author is also attentive to issues and questions posted on the forum.

So in summary, with CodeMirror you may need to put some extra work to get to the initial point you need, but it also gives you more power to make it into whatever you want. It also depends on the use case, for a simpler editor it may be that setting up CodeMirror is actually less work.

Here you can find the full configuration of the editor in Livebook.

I hope this clarifies the tradeoffs a bit, if you have specific questions let me know!