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…

Where Next?

Popular in Questions Top

minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
dotdotdotPaul
Okay, I'm having a heck of a time trying to figure out how to best handle the validation of belongs_to associations in Ecto. I'm sure I'...
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
ycv005
I have followed this StackOverflow post to install the specific version of Erlang. And When I am running mix ecto.setup then getting fol...
New
Jim
As a follow up to my earlier question: I have the code compiling and running but not getting a successful login from the rest server. ...
New
aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
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
stefanluptak
Hello everybody, usually, I use a 29" ultra-wide monitor for VSCode which can easily accomodate explorer (files panel) + file with code ...
New
Exadra37
Sometimes I want to check if the input into a function is not a blank string. My first approach: defmodule Example do def do_stuff(s...
New
lucidguppy
I have a super simple question about elixir - how would I take a file like this foo bar baz and output a new file that enumerates th...
New

Other popular topics Top

TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
273 38985 115
New
lastday4you
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
fireproofsocks
I’m working on defining a simple Ecto schema for a table (in PostGres), but I don’t see where I can define a column as NOT NULL. Conside...
New
JDanielMartinez
Hi! May someone helps me, please! I have two apps into an umbrella project: the first one is Database, which manages queries, and the se...
New
vrod
I am using the Starship cross-shell prompt – it seems pretty nice, but I get some errors: [WARN] - (starship::utils): Executing command ...
New
Brian
What is the proper way to load a module from a file in to IEX? In the python world, doing something like this pretty standard: from ....
New
William
I would like to know that is there any online source for learning Phoenix Framework for building E-Commerce Store? Any advantage on build...
New
script
If I have a string “1000 cfu/ml” . I want to remove the characters and / and space . So the string is like this "1000" What is the ...
New
johnnyicon
Hi all, I've just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I'm trying to use Postg...
New
jay1
Why is it that the mnesia database isn’t the most preferred database for use in Elixir/Phoenix?
New

We're in Beta

About us Mission Statement