Reason for switching from Monaco to CodeMirror?

minu

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?

2 comments

/livebook

0 4028 2

2024-10-25 06:28:52 UTC

Showing Posts 1 to 2

Show Best Posts
Show All (oldest first)
Show All (newest first)

sbuttgereit

The PR that implements the change offers some insights…

https://github.com/livebook-dev/livebook/pull/2444

Post #1

jonatanklosko

Creator of Livebook

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!

Post #2

— All posts loaded —