July 11th, 2024

CodeMirror: Extensible code editor component for the web

CodeMirror is a versatile web code editor with accessibility, syntax highlighting, collaborative editing, and more. It supports multiple languages, offers extensive features, and encourages community contributions and discussions.

Read original articleLink Icon
CodeMirror: Extensible code editor component for the web

CodeMirror is an extensible code editor component for the web, offering features like accessibility, mobile support, syntax highlighting, autocompletion, code folding, search/replace, and more. It supports collaborative editing, multiple selections, and internationalization. The library is open source under the MIT license and is actively developed on GitHub, welcoming contributions and funding for maintenance. It provides language support for various programming languages and offers a range of features for developers to enhance their coding experience. Users can find detailed documentation on the library's features and participate in discussions on the forum. Additionally, CodeMirror has a code of conduct to ensure an inclusive and welcoming community.

Link Icon 8 comments
By @ivanjermakov - 3 months
I had mixed experience integrating CM6 into a programming language sandbox website.

Basic actions like setting text, reading changes, setting selections and diagnostics took a lot more steps that I anticipated. Instead of setting text with a method, you need to create a transaction with text action and dispatch it to the editor instance.

Some more sophisticated actions like highlight regions require creating custom plugins.

In addition to that, all of these were not trivial and documentation was lacking fundamental concepts you need to understand to use its API.

Footprint, performance and typescript support are great though.

By @AlexErrant - 3 months
I've been using CodeMirror+Lezer to write a custom query language similar to GitHub's (somerepo stars:>100). It's been great (though unfortunately time-consuming), and Marijn's been incredibly responsive/helpful on the "discuss" forum (as long as your question puts in a modicum of effort, hah). He's merged some PRs I've made, and treated many discussions as feature requests and implemented them.
By @joatmon-snoo - 3 months
CodeMirror's been fantastic for us: as folks building a programming language, we wanted a way to create a playground for people to try it out (much like what Goland and Rust did), and we found CodeMirror super helpful for putting together https://www.promptfiddle.com/

It did help that we wrote our compiler in Rust and were able to transpile it to WASM :)

By @kaycebasques - 3 months
CodeMirror is one of those workhorse projects that many people here have probably used many times but may not know by name. It powered the Chrome DevTools Console for many years for example. (It seems like the Console may still be powered by CodeMirror but I'm not familiar with that codebase anymore.)
By @FjordWarden - 3 months
One of my favourite JS projects to read, the module system is very well designed while at the same time it has those bit-shifting gems like splitting a 32bit number into an index and an offset to avoid allocating an extra object for that.
By @indigo0086 - 3 months
Question for those that have success with it. How did you handle auto complete with something like SQL where you need to query the db for table and column info while remaining performant.
By @epolanski - 3 months
I have always looked for something basic, mobile friendy that would support TypeScript types on hover.

Monaco would be okay, if not for mobile..