A Big Bet on CodeMirror

Replit has long used Monaco to improve the stability, performance, and accessibility of its editor, but as the service grew, it faced the following limitations.

Key problems with Monaco:

• Lack of mobile support: A separate Ace editor had to be used for mobile environments, which created the hassle of duplicating features.
• Difficulty in customization: The UI and features were hard to modify, and there were limits to applying a proprietary design system.
• Performance and bundle size: The related libraries took up about 51.17 MB of bundle size, degrading the overall app's loading performance.
• Complex API: Documentation was lacking and the API was complex, making it very difficult to implement new features.

As an alternative, Replit adopted CodeMirror 6, an editor optimized for accessibility, touchscreen support, and extensibility.

Features of CodeMirror 6:

• Modular architecture: The core library is very lightweight, with a Lego-like structure where features such as syntax highlighting or line numbers are added as extensions.
• High flexibility: You can pick only the features you need or replace core parts with custom implementations, making it easy to build Replit's own unique editor experience.
• Performance and mobile optimization: It is much lighter and more performant than Monaco, and fully supports mobile environments.