Ace, CodeMirror, and Monaco: A Comparison of the Code Editors You Use in Browser

• codejar

  1 1,180 4.7 TypeScript

  An embeddable code editor for the browser 🍯

  FYI, this is a few months old, if you want to read something up to date, check out https://blog.replit.com/codemirror

  Unfortunately copy and paste doesn't work well on Firefox on Linux in any of these fancy editors because support for the primary selection is broken and Mozilla doesn't seem interested in fixing it: https://bugzilla.mozilla.org/show_bug.cgi?id=1593761

  The article calls CodeMirror "lightweight" but the minified JS is still over 1 MB. If you want lightweight then you probably want something like CodeJar (https://github.com/antonmedv/codejar) which clocks in at 2 kB.

• slate

  16 24,620 9.4 TypeScript

  A completely customizable framework for building rich text editors. (Currently in beta.) (by ianstormtaylor)

  You definitely need to give Slate (https://github.com/ianstormtaylor/slate) a try - the best editor framework I've used.

• Appwrite

  appwrite.io

  sponsored

  Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

  

• phonk

  4 326 0.0 Java

  PHONK is a coding playground for new and old Android devices

  I integrated Ace in a couple of projects for already 10 years ago and the experience was incredible smooth to use and upgrade versions.

  One of them the uses was for the Remote Editor of my programming environment for Android, PHONK https://github.com/victordiaz/PHONK (is unmantained nowadays because of lack of time).

  What I loved the most was the API to tweak the editor the way you want. Ace come with a demo where you can tweak all parameters easily.

• Code-Server

  171 54,147 9.5 TypeScript

  VS Code in the browser

  

  For PWAs, you can "install" the app to your machine / phone which gives it its own icon and launches it in its own window. This also allows it to override most default shortcuts (Cmd/Ctrl+W, Cmd/Ctrl+T etc.) I use this with https://github.com/coder/code-server on my personal server and it's a way better experience for me than mucking around with SSH / SFTP plugins.

• y-codemirror

  1 49 4.3 JavaScript

  Yjs CodeMirror Binding

  

  Not mentioned in the article but CodeMirror has a brilliant story for collaborative editing. You have two options:

  - An Operational Transform (OT) based system built by Marijn (the creator of CodeMirror)

  OT Demo: https://codemirror.net/6/examples/collab/

  - A Conflict Free Replicated Datatype (CRDT) based system using Yjs crated by Kevin Jahns (the creator of Yjs) - https://github.com/yjs/y-codemirror

  Yjs Demo: https://demos.yjs.dev/codemirror/codemirror.html

  Both are brilliant, but I'm a huge fan of Yjs - the number of different bindings to different editors (and state systems) is brilliant.

• text-unicode

  1 54 0.0 TypeScript

  Unicode text OT implementation

  

  We had to handroll our own OT implementation inhouse (based on https://github.com/ottypes/text-unicode) since we had built the system for it already. I suspect we would've used or forked CodeMirror's collab package if we were starting today.

  Also huge fan of yjs, but the implementation is not compatible with codemirror 6, only version 5 (AFAIK)

• y-codemirror.next

  1 47 6.3 JavaScript

  Collaborative extensions for CodeMirror6

  

• Scout APM

  scoutapm.com

  sponsored

  Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.

  

• withExEditorHost

  1 32 8.4 JavaScript

  Native messaging host for withExEditor

  I prefer using a local editor using the withExEditor browser extension:

  https://github.com/asamuzaK/withExEditorHost

• codemirror-vim

  2 59 7.6 JavaScript

  Vim keybindings for CM6

  

  lsp would be so awesome to see! please do consider releasing.

  thanks for releasing codemirror-vim! not having vim capabilities has been one of the longest standing blockers to me using anything web-platform based. i understand there are some vim plugins for various platforms, but great to see some efforts out in the open for codemirror6. https://github.com/replit/codemirror-vim

• codemirror-emacs

  1 5 4.9 TypeScript

  Emacs keybindings for CM6

  

  Hey!

  > How does it work?

  It's a web application, so a lot of JavaScript.

  > I tried the emacs keybindings on replit... what a joke

  It needs some more love, the work is done out in the open, feel free to open issues. https://github.com/replit/codemirror-emacs

  For what it's worth, we're not trying to recreate your emacs or VIM experience, just trying to port as many keybindings as we can. Will log the things you mentioned, it just seems like there's conflict with other keybindings.

  > Maybe there are function keys bound? I wish I could find out.

  Ctrl+Enter to run

  > Is there any possibility of one of these "IDEs" having auto-indent / reindent? I see from the docs there's supposed to be one, but all I get is not-smart left/right motion.

  What do you mean by left/right motion? Are you asking for like an auto-format feature? Or just handle re-indent when the indentation options change?

• ProseMirror

  15 5,961 4.6 JavaScript

  The ProseMirror WYSIWYM editor

  

  I did a similar analysis a year ago and came to the conclusion that ProseMirror (https://prosemirror.net) was the right choice for my project. ProseMirror is an excellent toolkit for building your own rich text components and happens to also be written by the author of CodeMirror. It does not give you as quick an out of the box experience as slate (or any of the other rich text libraries out there) but its speed and flexibility is excellent.

• esbuild

  130 32,186 9.8 Go

  An extremely fast JavaScript and CSS bundler and minifier

  It gives insanely fast and smooth experience in web development. https://esbuild.github.io/

  So, you see result, as you type.

Suggest a related project