Why You Should Use Monaco instead of DraftJS

Introduction

Query editing is the most important function of any SQL client. Developers and analysts use Arctype for several hours a day to query and manage their databases. What are the must-haves in a SQL editor? A good query editor should:

• Have code formatting and syntax highlighting functionality
• Support keyboard shortcuts for common tasks
• Handle large blocks of code without substantial performance losses
• Be responsive

Arctype’s previous query editor was built using DraftJS. In our latest release, we switched to Monaco, the same code editor that VSCode uses. In this post, I will explain what factors we considered, how we implemented our changes, and what improvements we achieved. As you consider reworking large parts of your tools and products, I hope you can learn from our experience.

DraftJS Pros and Cons

We replaced DraftJS with Monaco to improve the editor experience and address performance concerns. DraftJS is flexible—kind of like an editor construction kit—and is really meant for rich text editors. Because it’s so flexible, we were able to continually implement features on top of Draft to build our query editor (like slash commands). However, our implementation created technical debt as we expanded functionality, and performance issues began to creep in. We found that DraftJS, in contrast to Monaco, is more React-friendly and much more maintainable. While DraftJS lets you implement almost anything you can design–there’s a huge trade-off with this flexibility. DraftJS requires you to create plugins for a lot of the basic features that code editors need, which we, unfortunately, ended up having to write ourselves. It’s also not easy to manage DraftJS’s internal state with React.

Implementing Monaco in Arctype

Over time, the scaffolding of DraftJS became a headache for us to manage. Our Draft editor code was over 2500 lines, while our current Monaco editor is only 434 lines. Monaco comes with better default SQL support and is able to handle many more lines of SQL easily. It also improves syntax highlighting and autocomplete.

After we switched out DraftJS for Monaco, a few wins became immediately apparent:

• Performance: you can paste 20,000 lines of SQL into the editor without a render flash. Scrolling and navigating around are also fast.
• Multi cursor editing was natively supported
• Commenting multiple lines was easy using shortcuts
• Auto indenting makes long queries much more manageable. This feature works super well with auto format (Command/Ctrl + Alt + F)

Overall we are very happy with our wins that resulted from improving the SQL editor in Arctype. The performance, rendering, syntax support, and so many more features are now much more stable for our users. We should have known from the beginning: always use the right tool for the job. We recommend anyone building IDE functionality to use Monaco instead of DraftJS for their code editors.

Build with Us

Interested in working on technology like this and sharing in our engineering culture? Come work with us by emailing jobs@arctype.com or check out our openings.