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

This page summarizes the projects mentioned and recommended in the original post on news.ycombinator.com

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Scout APM - Less time debugging, more time building
  • JetBrains - Developer Ecosystem Survey 2022
  • SonarQube - Static code analysis for 29 languages.
  • codejar

    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

    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 - 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

    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

    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

    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

    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

    Collaborative extensions for CodeMirror6

  • Scout APM

    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

    Native messaging host for withExEditor

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

    https://github.com/asamuzaK/withExEditorHost

  • codemirror-vim

    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

    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

    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

    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.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts