11 ms·

Ace, CodeMirror, and Monaco: A comparison of browser code editors (2021)

247 points by williamstein 5y ago

teddyh 5y ago
I prefer using a local editor using the withExEditor browser extension: https://github.com/asamuzaK/withExEditorHost https://github.com/asamuzaK/withExEditorHost
polote 5y ago
And there is also this more recent article https://blog.replit.com/codemirror https://blog.replit.com/codemirror of why they chose CodeMirror
- williamstein 5y ago
  Thanks. It is great how they put so much effort into explaining their choices.
bityard 5y ago
FYI, this is a few months old, if you want to read something up to date, check out https://blog.replit.com/codemirror 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 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 https://github.com/antonmedv/codejar) which clocks in at 2 kB.
- masfrost 5y ago
  The 1MB number is not correct, the core of CodeMirror is 150kb before gzip. Codejar is pretty cool, but it's super minimal, it's great if you want something very basic. It also doesn't really work on mobile despite using contentEditable.
  - bityard 5y ago
    I'm not taking gzip into consideration, I'm going by the fact that this file is 1.14MB: https://codemirror.net/6/codemirror.js https://codemirror.net/6/codemirror.js
    - deleted 5y ago
      [deleted]
    - grayrest 5y ago
      The size is going to depend on the set of features enabled and I expect that build has everything turned on so that it can be used for all the demos. I did a quick check of a CM6 project (customizing the JS lexer) with the base options and a JS-derived lexer and it came out to 405k / 124k gzip. I wouldn't consider it especially lightweight but I think the size is reasonable for the feature set.
    - masfrost 5y ago
      Hmm, not sure. Here it is around 300kb inflated https://codemirror-basic-setup.replitfaris.repl.co/ https://codemirror-basic-setup.replitfaris.repl.co/ using the basic-setup package, and I don't think this build tree-shakes. Code for this build is here https://codemirror-basic-setup.replitfaris.repl.co/__repl https://codemirror-basic-setup.replitfaris.repl.co/__repl
- robocat 5y ago
  Your points are valid, but are not relevant. > Unfortunately copy and paste doesn't work well on Firefox on Linux Code editing in the browser has plenty of valid criticisms, but that criticism is as pointless as saying it won’t work in Lynx. Use any one of the many many browsers that do support copy and paste. > which clocks in at 2 kB. You aren’t comparing like-for-like in terms of functionality. You might as well say just use a <textarea> tag which clocks in at 0.02kB. > but the minified JS is still over 1 MB From the article: Modularity, bundling, and footprint: “CodeMirror is built with modern technologies. You can even use ES6 modules to import it with no bundler involved. Lazy-loading features is a breeze; dynamic ES6 imports are all you need. The project is very modular and has a very slim core.”. CodeMirror is relatively light, compared against Monaco: “Monaco is huge. monaco-editor and related libraries contributed a whopping 51.17 MB to our bundle size (5.01 MB when parsed + gzipped)”, in Monaco “lazy-loading features are not possible as far as I'm aware”.
neoneye2 5y ago
I did a summer project last year and picked CodeMirror 5, after trying out several web editors. I can't remember why I made that choice. It had to work well with wasm + webworker. I'm very satisfied about CodeMirror 5 and is looking forward for version 6. https://loda-lang.org/edit/?oeis=2487 https://loda-lang.org/edit/?oeis=2487
kinduff 5y ago
I've been following Marijn for years in his development on CodeMirror and all I have is great admiration of all the work he has made over the last couple of years, how he gives support, and provide patches to fix reported bugs. Just for that fact I've been implementing CodeMirror in every project I need to.
ilovecaching 5y ago
I like being able to create shareable snippets and appreciate the need for code editors on the web in some places. I would never rely on a web based editor as my full time editor. I have read a few dystopian takes where we rent our editors in the cloud (VSCode/Fleet seem to be leading this). Software is a trade, and the editor is the primary tool of the trade. Your editor should be able to follow you wherever you go, be easy to shape to your liking by being FOSS that you can compile yourself, and you should never rent it for money. Own the tools you rely on to make a living. Reading through usesthis.com and many a blog post, I've yet to find a programmer I admire that isn't using either vim/emacs for these reasons.
- afry1 5y ago
  In theory, I agree with you, but on the whole, this is a rather elitist viewpoint. The vast majority of the world uses a mobile phone to connect to the internet. While I do agree that web-based editors aren't as good as desktop-based editors, and that there's potential for abuse in the transactional nature of web-based editors, a web-based editor is the best that billions of people can manage. It's not perfect, but I'd take a world with online code editors over a world where coding is only possible in a desktop environment. A world with more programmers and more people who are knowledgeable about how their digital lives really work is better than a world with fewer in the know, or fewer who are empowered to know due to technological limitations.
- seanw444 5y ago
  I'm glad this is an MIT-licensed project. This seems very lightweight, covers a lot of edge cases, is accessible, and seems to be fairly performant. Very good for a web editor. For websites like Pastebin or something where this comes in handy, I applaud the project. But I agree, I will still never leave Emacs :) though, I don't think this project is aimed at replacing standalone editors.
zewish 5y ago
After a couple of weeks of research we found Slate in for a project we're working on. In case somebody needs a proper editor framework - you definitely need to give Slate a try (https://github.com/ianstormtaylor/slate https://github.com/ianstormtaylor/slate). It's one of the best editor frameworks I've used, and it also has a really nice React integration.
- mlajtos 5y ago
  The article is about code editors, Slate is for building rich text editor.
- ndvivedi 5y ago
  I did a similar analysis a year ago and came to the conclusion that ProseMirror (https://prosemirror.net 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.
kaycebasques 5y ago
The code editors in Chrome DevTools are powered by CodeMirror.
nathancahill 5y ago
For Markdown specifically, ByteMD is built with Svelte on top of CodeMirror. It's a real joy to use. For editors in general, CodeMirror 6 is an excellent, modular rewrite of CodeMirror 5. Monaco uses it's own build system that requires a lot of configuration twiddling to get it to work. Powerful, but it's first and foremost built for VSCode.
productceo 5y ago
I think in Stack Overflow Developer Survey or in the State of JS Survey, 3% or less responded they use cloud IDE. I wonder whether they are solving some real problem that cannot be solved in desktop IDE, and whether they will really take off one day.
- arve0 5y ago
  I think they are solving for management, for example by locking down the dev environment. Not saying it’s impossible in desktop IDEs, but maybe harder?
  - pjmlp 5y ago
    X Windows and RDP/VNC, it is nothing new.
- ssivark 5y ago
  That might be the case today, but will that be the case two decades from now? I.E. if you had to optimize for friendliness for the next several million programmers around the world, is there potential to simplify the tooling and improve the onboarding & deployment experience?
  - pjmlp 5y ago
    It was the case already two decades ago, that is how I used to develop on UNIX, with X Windows and telnet, then eventually ssh replaced telnet, and RDP/VNC replaced X Windows. The circle of re-invention keeps coming around.
- slaymaker1907 5y ago
  The killer app for cloud IDEs is honestly going to be something GitHub code navigation. Imagine being able to do PRs with click to definition, find all references, etc., without having to pull in the changes locally. It's also great even right now for reading open source projects when you are trying to understand how something works. They are great for viewing code, but I'm not convinced they are good for writing code.
metadata 5y ago
CodeMirror is promising. Monaco is huge and clunky to integrate, but it works really well once you get past the steep learning curve. It has everything one needs to build a full IDE around it (as VSCode demonstrates, quite convincingly). Right now, someone with own parser/language analyzer (I have built parsers for several SQL dialects) has just Monaco to work with as LSP for CM6 doesn't seem to exist yet. Will be closely watching CM development.
- masfrost 5y ago
  Author here: We might release our LSP implementation for CodeMirror some time this year. The LSP integration for Monaco is lackluster, it works, but isn't great. We thought LSP would work perfectly on Monaco only to find out that the Monaco APIs are very different from LSP APIs or even VSCode APIs. The 3rd party package out there is good, but you need a bunch of monkey-patching to make it work in an "IDE" environment.
  - rektide 5y ago
    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 https://github.com/replit/codemirror-vim
- draw_down 5y ago
- specialist 5y ago
  I'm interested in your SQL grammars. Especially how you tested them. FWIW I've been toying with ANTLR. I used some of their community's example grammars to get started. Is it weird that grammars generally don't include test harnesses?
bastardoperator 5y ago
Considering I can now press '.' on GitHub and get vscode, not including codespaces or opting to run in vscode on the desktop, why would I use one of these alternatives? And to be clear, I'm not advocating anything, genuinely curious what makes these better then the alternatives.
- CarlGroovy 5y ago
  Maybe if you were developing on a Chromebook. But yes, I don't see any other reason. I'm curious too.
- ianbutler 5y ago
  vscode is built on top of Monaco. These are all lower level editors with very well exposed APIs that let you build on top of them. It's more for developing something with a code editor versus directly using them everyday as your editor, though I'm sure people do.
- textadventure 5y ago
  You are thinking of personal use cases, but the point of these editors is that they strive to be as light weight as possible and are meant to be part of some online service that for some aspect of their functionality/features includes offering an embedded code editor. VScode has too much stuff for most of those use cases where you'd use something like CodeMirror.
- qbasic_forever 5y ago
  When you press . on github you _are_ using one of those options--monaco, as built into VS Code's new client/PWA experience.
  - bastardoperator 5y ago
    Exactly what I was looking to understand, thank you for the feedback.
- itslennysfault 5y ago
  IMO... you don't. Microsoft won the day (for now anyways).
numbsafari 5y ago
Using a browser based IDE is really powerful as an option, but comes with a major cost of having to co-exist with the browser in terms of keyboard macros/chords. Personally, I've found it to be really annoying. Using VSCode as a desktop connected to a remote code server, or using JetBrains Projector, is the true sweet spot where you combine the remote capabilities with a native app. Also fits well with vim/emacs TUI-style dev. If I were building an IDE today, I would absolutely be building it as a client-server app from day 1.
- wbobeirne 5y ago
  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 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.
- mariusmg 5y ago
  >If I were building an IDE today, I would absolutely be building it as a client-server app from day 1. Why ? The last thing you want as a user when pressing a key in a IDE is to then wait for a network request.
  - tsegers 5y ago
    That's exactly what a lot of users that do development on a beefy remote machine from a light machine they use as a terminal want. Ssh+vim+tmux is a pretty common setup. That network request might add 20ms of lag, but means that anything that requires CPU power will be an order of magnitude faster. The unhappy path (a bad or absent connection) is bad, but the happy path is pretty damn happy.
    - ObscureScience 5y ago
      I guess the combination is the holy grail, but the effort may not be worth it in alot of cases. What I'm referring to would be a caching view which both hides latency, batches communication for efficiency and perhaps even does some actions on the client-side buffer if it's deemed appropriate.
victornomad 5y ago
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 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. The only bug I encountered back in the day was some scrolling issues with ipads but probably is solved already. I tried also CodeMirror and Monaco but somehow went back to Ace because of its simple setup.
laurent123456 5y ago
Mobile support means that CodeMirror 6 is often the only option. I think it's a bit of a waste to start of project with Ace or Monaco, knowing that it will never work in mobile.
- masfrost 5y ago
  Ace is not perfect on mobile, but it works to some extent.
- qbasic_forever 5y ago
  Agreed, it's really surprising to me that MS hasn't put more effort into getting a solid mobile-friendly option with Monaco.
deleted 5y ago
[deleted]
samwillis 5y ago
Not mentioned in the article but CodeMirror has a brilliant story for realtime collaborative editing. You have two options: - An Operational Transform (OT) based system built by Marijn (the creator of CodeMirror) - A Conflict Free Replicated Datatype (CRDT) based system using Yjs built by Kevin Jahns (the creator of Yjs) - https://github.com/yjs/y-codemirror https://github.com/yjs/y-codemirror OT Demo: https://codemirror.net/6/examples/collab/ https://codemirror.net/6/examples/collab/ Yjs Demo: https://demos.yjs.dev/codemirror/codemirror.html 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 incredible. It's a great platform to build collaborative tools on and the big plus is offline editing support, you can have a document diverge significantly while offline and still merge successfully. OTs are a little more difficult to make work well for a significant period offline. I don't know which of the above Replit use, I would suspect the OT version as they mention building a OT system for Ace in the article.
- masfrost 5y ago
  We had to handroll our own OT implementation inhouse (based on https://github.com/ottypes/text-unicode 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)
  - mlajtos 5y ago
    There is Yjs bindings for CM6: https://github.com/yjs/y-codemirror.next https://github.com/yjs/y-codemirror.next
    - masfrost 5y ago
      Amazing, thanks
masfrost 5y ago
Author here. Glad to see the blogpost on HN! CodeMirror improved Replit's performance by a lot and by extension our retention. In fact, after releasing it to mobile in July[1] our weekly retention rate on mobile increased by a whopping 70%. That said, solve a lot of mobile usability issues so it's not all due to performance. On desktop however, it's a different story, we made sure to just have parity with Monaco and it still improved retention by %25, almost all due to performance! If you like working on performance come work at Replit, we want people that care about the performance of our systems! Adopting CodeMirror pushed us to write more in a more functional style that makes the code more fun and simple (not easy) in the shortrun, and more maintainable in the long run! My teammates write CodeMirror extensions for kicks and giggles, sometimes they end up releasing some "bret victor shit"[3]. If you like CodeMirror and end up using it in production, try to get your company to fund the project[4] and open-source as much as you can! [1]: https://blog.replit.com/codemirror-mobile https://blog.replit.com/codemirror-mobile [2]: https://blog.replit.com/codemirror https://blog.replit.com/codemirror [3]: https://blog.replit.com/kaboomdraw https://blog.replit.com/kaboomdraw [4]: https://marijnhaverbeke.nl/fund/ https://marijnhaverbeke.nl/fund/
- jan_Inkepa 5y ago
  > Adopting CodeMirror pushed us to write more in a more functional style that makes the code more fun and simple (not easy) in the shortrun, and more maintainable in the long run! I had a similar kind of good experience with code-mirror. I was writing my first proper compiler, and making a total dogs dinner of it. As a distraction, I decided to try put together an editor with syntax highlighting with CodeMirror. In the process of just fitting my compiler to the CodeMirror recursive descent parser I ended up bringing my compiler back from the brink of disaster. It feels really nice when a framework/API has enough good-taste/-engineering built into it that it improves code that uses it :) I'll be interested in seeing how the upgrade to 6 goes - I'll wait until it's officially released, though... (People've been using said compiler + IDE for about ten years now)
  - tomcam 5y ago
    You’re killing me here. What’s the compiler?
sto_hristo 5y ago
Might be worth taking a look at ProseMirror - it's fully modular and you can put it together by yourself - it's the ultimate in flexibility.
- mlajtos 5y ago
  The article is about code editors, ProseMirror is for building rich text editor. However, CodeMirror and ProseMirror has the same author – Marijn Haverbeke.
ianberdin 5y ago
Yes, unfortunately Monaco is far from the most stable, but powerful out of the box. Therefore http://playcode.io http://playcode.io moved from Ace to Monaco. Speaking of technology! Playcode is the only and first playground that uses Esbuild in the browser, so it works super fast.
- Lordronn 5y ago
- pictur 5y ago
  what does it mean to use esbuild in browser?
  - ianberdin 5y ago
    It gives insanely fast and smooth experience in web development. https://esbuild.github.io/ https://esbuild.github.io/ So, you see result, as you type.
proofrock 5y ago
Any thoughts on Code Server? It’s vs code in a browser, I’ve been used it for one year now and it’s great. But maybe it’s outside the scope of the article?
- qbasic_forever 5y ago
  It's using monaco as the underlying editor, just like VS Code that it's based on. Code Server basically takes the VS Code codebase as is and just adds a very light server layer to do auth and static content serving. All of the frontend javascript code, etc. is the same as the desktop version of VS Code.
deleted 5y ago
[deleted]
SonOfLilit 5y ago
I read this just two days ago to settle on CodeMirror for the demo page of my new regex syntax! Great blogpost.
kleiba 5y ago
OT: What are the main features that make you as a developer prefer a (browser-based or not) IDE over editors like vim/emacs? Does it make a difference if we're talking about professional development vs. hobby projects?
mltony 5y ago
One more point to consider: CodeMirror is not accessible for blind users with screenreaders, as it just presents an empty text area. While Monaco is acdcessible, at least VSCode is. This used to cause a lot of pain for blind people using Jupyter, which uses CodeMirror (or at least used to).
- jkaptur 5y ago
  The article says that the new version of CodeMirror uses a contenteditable and native selection, which I would expect to pretty much "just work" with screenreaders - is that not true?
- robocat 5y ago
  I presume that is because it is a complicated feature, but not technically impossible? Although perhaps using contentEditable* makes an implementation more difficult? * From article: “CodeMirror would achieve that by leaning on native browser text editing (via contentEditable) rather than implementing text editing entirely in the library/javascript.”. Edit: from https://blog.replit.com/codemirror https://blog.replit.com/codemirror “CodeMirror 6 is a complete rewrite of the CodeMirror editor with a focus on accessibility, touchscreen support, and extensibility.”. I expect that marjin really cares about accessibility. However, in my limited experience, as a lone developer I couldn’t make our complex product properly accessible unless that was the focus of say six months effort, which we couldn’t afford at the time.
  - mltony 5y ago
    Ah, you're right, CodeMirror 6 appears to be more accessible. However it still only shows one line at a time. So that's still worse than Monaco. Monaco can show one or two hundred lines at a time. So with CodeMirror 6 I still would have to read text line by line without any way to skip a function for example, which is unnecesarily tedious. Sure, I understand that people don't have infinite time to spend on perfect accessibility. I was careful not to have any blaming tone in my message.
- marijn 5y ago
  This is mostly accurate for CodeMirror version 5. But this article is talking about version 6, which was intentionally built in a way that avoids the problem.
stevebmark 5y ago
As a new user of Monaco trying to incorporate it into a project: I disagree with Monaco's documentation being good. Monaco's documentation is terrible, it's auto-generated API documentation. Examples are outdated or flat out wrong. To make matters worse, the (unofficial?) React plugin documentation is unreadable to newcomers https://www.npmjs.com/package/@monaco-editor/react https://www.npmjs.com/package/@monaco-editor/react
- danielvaughn 5y ago
  Yep. I ended up not even being able to import it as an npm package. Literally just copied it old-school-style into my repo, and iframed it in. The good thing about Monaco is that it's very good once you get it working. It's just the getting-it-working that really sucks.
fn-mote 5y ago
[Replit specific rant, but in my defense it's their blog post.] I don't understand the in-browser code editor experience. How does it work? I tried the emacs keybindings on replit... what a joke - Control-N to go to the next line? Nope. Control-P for previous? Nope. Meta-F? opens the file menu. I don't even know what keybindings I should be hoping will work. Vi keybindings are much more usable in-browser (obviously). A massive problem for me was getting out of the frame and not being able to get back in. I wanted to do something like ":compile". Or ":n" to get to the next focusable input field. Maybe there are function keys bound? I wish I could find out. 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. Working with beginners it would be very nice.
- easrng 5y ago
  I think in Monaco you can right click -> Format Document or something like that.
- masfrost 5y ago
  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 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?

247 points by williamstein 5y ago

I prefer using a local editor using the withExEditor browser extension: https://github.com/asamuzaK/withExEditorHost https://github.com/asamuzaK/withExEditorHost

polote 5y ago

And there is also this more recent article https://blog.replit.com/codemirror https://blog.replit.com/codemirror of why they chose CodeMirror

williamstein 5y ago
Thanks. It is great how they put so much effort into explaining their choices.

bityard 5y ago

FYI, this is a few months old, if you want to read something up to date, check out https://blog.replit.com/codemirror 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 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 https://github.com/antonmedv/codejar) which clocks in at 2 kB.

masfrost 5y ago
The 1MB number is not correct, the core of CodeMirror is 150kb before gzip. Codejar is pretty cool, but it's super minimal, it's great if you want something very basic. It also doesn't really work on mobile despite using contentEditable.
- bityard 5y ago
  I'm not taking gzip into consideration, I'm going by the fact that this file is 1.14MB: https://codemirror.net/6/codemirror.js https://codemirror.net/6/codemirror.js
  - deleted 5y ago
    [deleted]
  - grayrest 5y ago
    The size is going to depend on the set of features enabled and I expect that build has everything turned on so that it can be used for all the demos. I did a quick check of a CM6 project (customizing the JS lexer) with the base options and a JS-derived lexer and it came out to 405k / 124k gzip. I wouldn't consider it especially lightweight but I think the size is reasonable for the feature set.
  - masfrost 5y ago
    Hmm, not sure. Here it is around 300kb inflated https://codemirror-basic-setup.replitfaris.repl.co/ https://codemirror-basic-setup.replitfaris.repl.co/ using the basic-setup package, and I don't think this build tree-shakes. Code for this build is here https://codemirror-basic-setup.replitfaris.repl.co/__repl https://codemirror-basic-setup.replitfaris.repl.co/__repl
robocat 5y ago
Your points are valid, but are not relevant. > Unfortunately copy and paste doesn't work well on Firefox on Linux Code editing in the browser has plenty of valid criticisms, but that criticism is as pointless as saying it won’t work in Lynx. Use any one of the many many browsers that do support copy and paste. > which clocks in at 2 kB. You aren’t comparing like-for-like in terms of functionality. You might as well say just use a <textarea> tag which clocks in at 0.02kB. > but the minified JS is still over 1 MB From the article: Modularity, bundling, and footprint: “CodeMirror is built with modern technologies. You can even use ES6 modules to import it with no bundler involved. Lazy-loading features is a breeze; dynamic ES6 imports are all you need. The project is very modular and has a very slim core.”. CodeMirror is relatively light, compared against Monaco: “Monaco is huge. monaco-editor and related libraries contributed a whopping 51.17 MB to our bundle size (5.01 MB when parsed + gzipped)”, in Monaco “lazy-loading features are not possible as far as I'm aware”.

neoneye2 5y ago

I did a summer project last year and picked CodeMirror 5, after trying out several web editors. I can't remember why I made that choice. It had to work well with wasm + webworker. I'm very satisfied about CodeMirror 5 and is looking forward for version 6. https://loda-lang.org/edit/?oeis=2487 https://loda-lang.org/edit/?oeis=2487

kinduff 5y ago

I've been following Marijn for years in his development on CodeMirror and all I have is great admiration of all the work he has made over the last couple of years, how he gives support, and provide patches to fix reported bugs. Just for that fact I've been implementing CodeMirror in every project I need to.

ilovecaching 5y ago

I like being able to create shareable snippets and appreciate the need for code editors on the web in some places. I would never rely on a web based editor as my full time editor. I have read a few dystopian takes where we rent our editors in the cloud (VSCode/Fleet seem to be leading this). Software is a trade, and the editor is the primary tool of the trade. Your editor should be able to follow you wherever you go, be easy to shape to your liking by being FOSS that you can compile yourself, and you should never rent it for money. Own the tools you rely on to make a living. Reading through usesthis.com and many a blog post, I've yet to find a programmer I admire that isn't using either vim/emacs for these reasons.

afry1 5y ago
In theory, I agree with you, but on the whole, this is a rather elitist viewpoint. The vast majority of the world uses a mobile phone to connect to the internet. While I do agree that web-based editors aren't as good as desktop-based editors, and that there's potential for abuse in the transactional nature of web-based editors, a web-based editor is the best that billions of people can manage. It's not perfect, but I'd take a world with online code editors over a world where coding is only possible in a desktop environment. A world with more programmers and more people who are knowledgeable about how their digital lives really work is better than a world with fewer in the know, or fewer who are empowered to know due to technological limitations.
seanw444 5y ago
I'm glad this is an MIT-licensed project. This seems very lightweight, covers a lot of edge cases, is accessible, and seems to be fairly performant. Very good for a web editor. For websites like Pastebin or something where this comes in handy, I applaud the project. But I agree, I will still never leave Emacs :) though, I don't think this project is aimed at replacing standalone editors.

zewish 5y ago

After a couple of weeks of research we found Slate in for a project we're working on. In case somebody needs a proper editor framework - you definitely need to give Slate a try (https://github.com/ianstormtaylor/slate https://github.com/ianstormtaylor/slate). It's one of the best editor frameworks I've used, and it also has a really nice React integration.

mlajtos 5y ago
The article is about code editors, Slate is for building rich text editor.
ndvivedi 5y ago
I did a similar analysis a year ago and came to the conclusion that ProseMirror (https://prosemirror.net 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.

kaycebasques 5y ago

The code editors in Chrome DevTools are powered by CodeMirror.

nathancahill 5y ago

For Markdown specifically, ByteMD is built with Svelte on top of CodeMirror. It's a real joy to use. For editors in general, CodeMirror 6 is an excellent, modular rewrite of CodeMirror 5. Monaco uses it's own build system that requires a lot of configuration twiddling to get it to work. Powerful, but it's first and foremost built for VSCode.

productceo 5y ago

I think in Stack Overflow Developer Survey or in the State of JS Survey, 3% or less responded they use cloud IDE. I wonder whether they are solving some real problem that cannot be solved in desktop IDE, and whether they will really take off one day.

arve0 5y ago
I think they are solving for management, for example by locking down the dev environment. Not saying it’s impossible in desktop IDEs, but maybe harder?
- pjmlp 5y ago
  X Windows and RDP/VNC, it is nothing new.
ssivark 5y ago
That might be the case today, but will that be the case two decades from now? I.E. if you had to optimize for friendliness for the next several million programmers around the world, is there potential to simplify the tooling and improve the onboarding & deployment experience?
- pjmlp 5y ago
  It was the case already two decades ago, that is how I used to develop on UNIX, with X Windows and telnet, then eventually ssh replaced telnet, and RDP/VNC replaced X Windows. The circle of re-invention keeps coming around.
slaymaker1907 5y ago
The killer app for cloud IDEs is honestly going to be something GitHub code navigation. Imagine being able to do PRs with click to definition, find all references, etc., without having to pull in the changes locally. It's also great even right now for reading open source projects when you are trying to understand how something works. They are great for viewing code, but I'm not convinced they are good for writing code.

metadata 5y ago

CodeMirror is promising. Monaco is huge and clunky to integrate, but it works really well once you get past the steep learning curve. It has everything one needs to build a full IDE around it (as VSCode demonstrates, quite convincingly). Right now, someone with own parser/language analyzer (I have built parsers for several SQL dialects) has just Monaco to work with as LSP for CM6 doesn't seem to exist yet. Will be closely watching CM development.

masfrost 5y ago
Author here: We might release our LSP implementation for CodeMirror some time this year. The LSP integration for Monaco is lackluster, it works, but isn't great. We thought LSP would work perfectly on Monaco only to find out that the Monaco APIs are very different from LSP APIs or even VSCode APIs. The 3rd party package out there is good, but you need a bunch of monkey-patching to make it work in an "IDE" environment.
- rektide 5y ago
  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 https://github.com/replit/codemirror-vim
draw_down 5y ago
specialist 5y ago
I'm interested in your SQL grammars. Especially how you tested them. FWIW I've been toying with ANTLR. I used some of their community's example grammars to get started. Is it weird that grammars generally don't include test harnesses?

bastardoperator 5y ago

Considering I can now press '.' on GitHub and get vscode, not including codespaces or opting to run in vscode on the desktop, why would I use one of these alternatives? And to be clear, I'm not advocating anything, genuinely curious what makes these better then the alternatives.

CarlGroovy 5y ago
Maybe if you were developing on a Chromebook. But yes, I don't see any other reason. I'm curious too.
ianbutler 5y ago
vscode is built on top of Monaco. These are all lower level editors with very well exposed APIs that let you build on top of them. It's more for developing something with a code editor versus directly using them everyday as your editor, though I'm sure people do.
textadventure 5y ago
You are thinking of personal use cases, but the point of these editors is that they strive to be as light weight as possible and are meant to be part of some online service that for some aspect of their functionality/features includes offering an embedded code editor. VScode has too much stuff for most of those use cases where you'd use something like CodeMirror.
qbasic_forever 5y ago
When you press . on github you _are_ using one of those options--monaco, as built into VS Code's new client/PWA experience.
- bastardoperator 5y ago
  Exactly what I was looking to understand, thank you for the feedback.
itslennysfault 5y ago
IMO... you don't. Microsoft won the day (for now anyways).

numbsafari 5y ago

Using a browser based IDE is really powerful as an option, but comes with a major cost of having to co-exist with the browser in terms of keyboard macros/chords. Personally, I've found it to be really annoying. Using VSCode as a desktop connected to a remote code server, or using JetBrains Projector, is the true sweet spot where you combine the remote capabilities with a native app. Also fits well with vim/emacs TUI-style dev. If I were building an IDE today, I would absolutely be building it as a client-server app from day 1.

wbobeirne 5y ago
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 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.
mariusmg 5y ago
>If I were building an IDE today, I would absolutely be building it as a client-server app from day 1. Why ? The last thing you want as a user when pressing a key in a IDE is to then wait for a network request.
- tsegers 5y ago
  That's exactly what a lot of users that do development on a beefy remote machine from a light machine they use as a terminal want. Ssh+vim+tmux is a pretty common setup. That network request might add 20ms of lag, but means that anything that requires CPU power will be an order of magnitude faster. The unhappy path (a bad or absent connection) is bad, but the happy path is pretty damn happy.
  - ObscureScience 5y ago
    I guess the combination is the holy grail, but the effort may not be worth it in alot of cases. What I'm referring to would be a caching view which both hides latency, batches communication for efficiency and perhaps even does some actions on the client-side buffer if it's deemed appropriate.

victornomad 5y ago

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 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. The only bug I encountered back in the day was some scrolling issues with ipads but probably is solved already. I tried also CodeMirror and Monaco but somehow went back to Ace because of its simple setup.

laurent123456 5y ago

Mobile support means that CodeMirror 6 is often the only option. I think it's a bit of a waste to start of project with Ace or Monaco, knowing that it will never work in mobile.

masfrost 5y ago
Ace is not perfect on mobile, but it works to some extent.
qbasic_forever 5y ago
Agreed, it's really surprising to me that MS hasn't put more effort into getting a solid mobile-friendly option with Monaco.

deleted 5y ago

[deleted]

samwillis 5y ago

Not mentioned in the article but CodeMirror has a brilliant story for realtime collaborative editing. You have two options: - An Operational Transform (OT) based system built by Marijn (the creator of CodeMirror) - A Conflict Free Replicated Datatype (CRDT) based system using Yjs built by Kevin Jahns (the creator of Yjs) - https://github.com/yjs/y-codemirror https://github.com/yjs/y-codemirror OT Demo: https://codemirror.net/6/examples/collab/ https://codemirror.net/6/examples/collab/ Yjs Demo: https://demos.yjs.dev/codemirror/codemirror.html 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 incredible. It's a great platform to build collaborative tools on and the big plus is offline editing support, you can have a document diverge significantly while offline and still merge successfully. OTs are a little more difficult to make work well for a significant period offline. I don't know which of the above Replit use, I would suspect the OT version as they mention building a OT system for Ace in the article.

masfrost 5y ago
We had to handroll our own OT implementation inhouse (based on https://github.com/ottypes/text-unicode 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)
- mlajtos 5y ago
  There is Yjs bindings for CM6: https://github.com/yjs/y-codemirror.next https://github.com/yjs/y-codemirror.next
  - masfrost 5y ago
    Amazing, thanks

masfrost 5y ago

Author here. Glad to see the blogpost on HN! CodeMirror improved Replit's performance by a lot and by extension our retention. In fact, after releasing it to mobile in July[1] our weekly retention rate on mobile increased by a whopping 70%. That said, solve a lot of mobile usability issues so it's not all due to performance. On desktop however, it's a different story, we made sure to just have parity with Monaco and it still improved retention by %25, almost all due to performance! If you like working on performance come work at Replit, we want people that care about the performance of our systems! Adopting CodeMirror pushed us to write more in a more functional style that makes the code more fun and simple (not easy) in the shortrun, and more maintainable in the long run! My teammates write CodeMirror extensions for kicks and giggles, sometimes they end up releasing some "bret victor shit"[3]. If you like CodeMirror and end up using it in production, try to get your company to fund the project[4] and open-source as much as you can! [1]: https://blog.replit.com/codemirror-mobile https://blog.replit.com/codemirror-mobile [2]: https://blog.replit.com/codemirror https://blog.replit.com/codemirror [3]: https://blog.replit.com/kaboomdraw https://blog.replit.com/kaboomdraw [4]: https://marijnhaverbeke.nl/fund/ https://marijnhaverbeke.nl/fund/

jan_Inkepa 5y ago
> Adopting CodeMirror pushed us to write more in a more functional style that makes the code more fun and simple (not easy) in the shortrun, and more maintainable in the long run! I had a similar kind of good experience with code-mirror. I was writing my first proper compiler, and making a total dogs dinner of it. As a distraction, I decided to try put together an editor with syntax highlighting with CodeMirror. In the process of just fitting my compiler to the CodeMirror recursive descent parser I ended up bringing my compiler back from the brink of disaster. It feels really nice when a framework/API has enough good-taste/-engineering built into it that it improves code that uses it :) I'll be interested in seeing how the upgrade to 6 goes - I'll wait until it's officially released, though... (People've been using said compiler + IDE for about ten years now)
- tomcam 5y ago
  You’re killing me here. What’s the compiler?

sto_hristo 5y ago

Might be worth taking a look at ProseMirror - it's fully modular and you can put it together by yourself - it's the ultimate in flexibility.

mlajtos 5y ago
The article is about code editors, ProseMirror is for building rich text editor. However, CodeMirror and ProseMirror has the same author – Marijn Haverbeke.

ianberdin 5y ago

Yes, unfortunately Monaco is far from the most stable, but powerful out of the box. Therefore http://playcode.io http://playcode.io moved from Ace to Monaco. Speaking of technology! Playcode is the only and first playground that uses Esbuild in the browser, so it works super fast.

Lordronn 5y ago
pictur 5y ago
what does it mean to use esbuild in browser?
- ianberdin 5y ago
  It gives insanely fast and smooth experience in web development. https://esbuild.github.io/ https://esbuild.github.io/ So, you see result, as you type.

proofrock 5y ago

Any thoughts on Code Server? It’s vs code in a browser, I’ve been used it for one year now and it’s great. But maybe it’s outside the scope of the article?

qbasic_forever 5y ago
It's using monaco as the underlying editor, just like VS Code that it's based on. Code Server basically takes the VS Code codebase as is and just adds a very light server layer to do auth and static content serving. All of the frontend javascript code, etc. is the same as the desktop version of VS Code.

deleted 5y ago

[deleted]

SonOfLilit 5y ago

I read this just two days ago to settle on CodeMirror for the demo page of my new regex syntax! Great blogpost.

kleiba 5y ago

OT: What are the main features that make you as a developer prefer a (browser-based or not) IDE over editors like vim/emacs? Does it make a difference if we're talking about professional development vs. hobby projects?

mltony 5y ago

One more point to consider: CodeMirror is not accessible for blind users with screenreaders, as it just presents an empty text area. While Monaco is acdcessible, at least VSCode is. This used to cause a lot of pain for blind people using Jupyter, which uses CodeMirror (or at least used to).

jkaptur 5y ago
The article says that the new version of CodeMirror uses a contenteditable and native selection, which I would expect to pretty much "just work" with screenreaders - is that not true?
robocat 5y ago
I presume that is because it is a complicated feature, but not technically impossible? Although perhaps using contentEditable* makes an implementation more difficult? * From article: “CodeMirror would achieve that by leaning on native browser text editing (via contentEditable) rather than implementing text editing entirely in the library/javascript.”. Edit: from https://blog.replit.com/codemirror https://blog.replit.com/codemirror “CodeMirror 6 is a complete rewrite of the CodeMirror editor with a focus on accessibility, touchscreen support, and extensibility.”. I expect that marjin really cares about accessibility. However, in my limited experience, as a lone developer I couldn’t make our complex product properly accessible unless that was the focus of say six months effort, which we couldn’t afford at the time.
- mltony 5y ago
  Ah, you're right, CodeMirror 6 appears to be more accessible. However it still only shows one line at a time. So that's still worse than Monaco. Monaco can show one or two hundred lines at a time. So with CodeMirror 6 I still would have to read text line by line without any way to skip a function for example, which is unnecesarily tedious. Sure, I understand that people don't have infinite time to spend on perfect accessibility. I was careful not to have any blaming tone in my message.
marijn 5y ago
This is mostly accurate for CodeMirror version 5. But this article is talking about version 6, which was intentionally built in a way that avoids the problem.

stevebmark 5y ago

As a new user of Monaco trying to incorporate it into a project: I disagree with Monaco's documentation being good. Monaco's documentation is terrible, it's auto-generated API documentation. Examples are outdated or flat out wrong. To make matters worse, the (unofficial?) React plugin documentation is unreadable to newcomers https://www.npmjs.com/package/@monaco-editor/react https://www.npmjs.com/package/@monaco-editor/react

danielvaughn 5y ago
Yep. I ended up not even being able to import it as an npm package. Literally just copied it old-school-style into my repo, and iframed it in. The good thing about Monaco is that it's very good once you get it working. It's just the getting-it-working that really sucks.

fn-mote 5y ago

[Replit specific rant, but in my defense it's their blog post.] I don't understand the in-browser code editor experience. How does it work? I tried the emacs keybindings on replit... what a joke - Control-N to go to the next line? Nope. Control-P for previous? Nope. Meta-F? opens the file menu. I don't even know what keybindings I should be hoping will work. Vi keybindings are much more usable in-browser (obviously). A massive problem for me was getting out of the frame and not being able to get back in. I wanted to do something like ":compile". Or ":n" to get to the next focusable input field. Maybe there are function keys bound? I wish I could find out. 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. Working with beginners it would be very nice.

easrng 5y ago
I think in Monaco you can right click -> Format Document or something like that.
masfrost 5y ago
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 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?