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

• codejar

  5 1,698 6.5 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

  26 28,980 8.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.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• phonk

  26 454 4.6 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

  395 65,274 9.2 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 80 0.0 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

  2 69 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 138 4.3 JavaScript

  Collaborative extensions for CodeMirror6

  

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

• withExEditorHost

  1 33 7.5 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 253 6.5 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 15 2.4 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

  43 7,362 3.8 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

  322 37,276 9.5 Go

  An extremely fast bundler for the web

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