minu

minu

Reason for switching from Monaco to CodeMirror?

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?

Marked As Solved

jonatanklosko

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!

19
Post #3

Also Liked

sbuttgereit

sbuttgereit

The PR that implements the change offers some insights…

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

Where Next?

Popular in Questions Top

JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
RisingFromAshes
I’ve read in another post that it may be possible with a router helper - but I couldn’t find an appropriate one, and tbh, I’m still just ...
New
baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
skosch
To my knowledge, put_in, Map.update etc. all have the one limitation of not automatically creating intermediate keys when needed (for exa...
New
fireproofsocks
Forgive me if this is obvious, but how does one delete a database record WITHOUT selecting it first? Ecto.Repo — Ecto v3.14.0 has exampl...
New
pmjoe
I have a relationship of love and hate with Elixir. Lots of things are just absolutely right, but there are some things that are kind of ...
New
JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New

Other popular topics Top

Qqwy
Update: How to use the Blogs & Podcasts section You can post links to your blog posts or podcasts either in one of the Official Blog...
3271 130286 1222
New
KronicDeth
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
289 36654 110
New
JeremM34
Hello, how can I check the Phoenix version ? Thanks !
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
sorentwo
Hello! tl;dr Announcing Oban, an Ecto based job processing library with a focus on reliability and historical observability. After spen...
985 44532 311
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New

We're in Beta

About us Mission Statement