[HN Gopher] Ace, CodeMirror, and Monaco: A comparison of browser...
___________________________________________________________________
Ace, CodeMirror, and Monaco: A comparison of browser code editors
(2021)
Author : williamstein
Score : 185 points
Date : 2022-03-14 15:42 UTC (7 hours ago)
(HTM) web link (blog.replit.com)
(TXT) w3m dump (blog.replit.com)
| laurent123456 wrote:
| 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 wrote:
| Ace is not perfect on mobile, but it works to some extent.
| qbasic_forever wrote:
| Agreed, it's really surprising to me that MS hasn't put more
| effort into getting a solid mobile-friendly option with Monaco.
| [deleted]
| ianberdin wrote:
| Yes, unfortunately Monaco is far from the most stable, but
| powerful out of the box. Therefore 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.
| pictur wrote:
| what does it mean to use esbuild in browser?
| Lordronn wrote:
| kaycebasques wrote:
| The code editors in Chrome DevTools are powered by CodeMirror.
| masfrost wrote:
| 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 [2]:
| https://blog.replit.com/codemirror [3]:
| https://blog.replit.com/kaboomdraw [4]:
| https://marijnhaverbeke.nl/fund/
| jan_Inkepa wrote:
| > 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)
| [deleted]
| nathancahill wrote:
| 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.
| bityard wrote:
| 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.
| robocat wrote:
| 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".
| masfrost wrote:
| 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 wrote:
| 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
| [deleted]
| masfrost wrote:
| Hmm, not sure.
|
| Here it is around 300kb inflated 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
| grayrest wrote:
| 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.
| metadata wrote:
| 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.
| draw_down wrote:
| masfrost wrote:
| 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 wrote:
| 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
| proofrock wrote:
| 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?
| bastardoperator wrote:
| 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.
| qbasic_forever wrote:
| When you press . on github you _are_ using one of those options
| --monaco, as built into VS Code's new client/PWA experience.
| bastardoperator wrote:
| Exactly what I was looking to understand, thank you for the
| feedback.
| CarlGroovy wrote:
| Maybe if you were developing on a Chromebook. But yes, I don't
| see any other reason. I'm curious too.
| ianbutler wrote:
| 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 wrote:
| 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.
| itslennysfault wrote:
| IMO... you don't. Microsoft won the day (for now anyways).
| samwillis wrote:
| 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
|
| OT Demo: https://codemirror.net/6/examples/collab/
|
| 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
| 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 wrote:
| 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)
| mlajtos wrote:
| There is Yjs bindings for CM6:
| https://github.com/yjs/y-codemirror.next
| masfrost wrote:
| Amazing, thanks
| productceo wrote:
| 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 wrote:
| 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?
| matsemann wrote:
| After being annoyed with Python's crazy unstable tooling, I've
| resorted to running everything I do in docker containers.
|
| Makes it really easy to get a new project up and running.
| "docker compose up", and point pycharm to the python container
| as the remote interpreter and it's up and running. No longer
| having to spend a few days getting the local env up and running
| on some developer's unlucky configuration of software+hardware.
|
| So while I still use a local IDE, and run most of my stuff in a
| container locally, it's not too far off from I feel it's viable
| to move everything to a computer in the cloud. Our DS people
| are working like that already, with their notebooks and stuff.
| ssivark wrote:
| 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?
| atonse wrote:
| Now that so many people are using VS Code anyway, it is the
| most perfect situation if you're dealing with sensitive data.
|
| You just never have local copies of anything. Everything just
| runs on a server from your thin client.
|
| Even useful if you need extra horsepower for a Language Server.
| qbasic_forever wrote:
| I would wager 75% or more of those respondents actually are
| using monaco as a code editor though--it's what powers VS
| Code's IDE editing experience.
| slaymaker1907 wrote:
| 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.
| gabrielsroka wrote:
| Have you seen this?
| https://docs.github.com/en/codespaces/the-githubdev-web-
| base...
| madacol wrote:
| The closest is to press ".", or change url from github.com to
| github.dev. That opens up the github repo in a VScode/Monaco
| editor
| matsemann wrote:
| Reviewing PRs on GitHub is embarrassingly bad, given that
| it's their core feature. It hasn't been upgraded for years,
| even, missing features BitBucket/Stash had like 10 years ago.
| Now a file tree is finally in beta, so it's possible to
| navigate between the files. But it's still impossible to see
| the context around changes without having to press
| expand/(...) a hundred times.
|
| I've recently experimented with the PR feature inside
| JetBrains IDE's. It allows one to navigate quite well without
| having to actually switch branch. Like it so far, nice to see
| the whole file and related files, not just the diff.
| imnitishng wrote:
| TBH reviewing PRs on VSCode's Pull Request extension works
| pretty well for me. I agree it is a bit slow but I get to
| see the changes with all my keybindings, themes and other
| tweaks, this just makes the experience better IMO.
| mltony wrote:
| 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 wrote:
| 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 wrote:
| 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 "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 wrote:
| 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.
| sto_hristo wrote:
| 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 wrote:
| The article is about code editors, ProseMirror is for building
| rich text editor. However, CodeMirror and ProseMirror has the
| same author - Marijn Haverbeke.
| teddyh wrote:
| I prefer using a local editor using the withExEditor browser
| extension:
|
| https://github.com/asamuzaK/withExEditorHost
| fn-mote wrote:
| [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 wrote:
| I think in Monaco you can right click -> Format Document or
| something like that.
| SonOfLilit wrote:
| I read this just two days ago to settle on CodeMirror for the
| demo page of my new regex syntax!
|
| Great blogpost.
| stevebmark wrote:
| 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
| danielvaughn wrote:
| 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.
| kinduff wrote:
| 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.
| numbsafari wrote:
| 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.
| kitsunesoba wrote:
| More generally with web apps the extraneous browser chrome
| (some of which carries over into "installed" PWAs, even) is
| annoying. If web apps are to be treated as true peers to their
| native desktop counterparts, browserisms like back buttons must
| be left behind.
| hsbauauvhabzb wrote:
| Iirc you can't reconfigure keybindings in any major browser. To
| me that's terrible UX, preventative of richer web applications,
| and a usability issue.
|
| I'm not suggesting JavaScript should be able to redefine keys
| without permission, but I can't even disable CTRL+w as a power
| user...
| mariusmg wrote:
| >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.
| dijit wrote:
| Rendering will be done locally, so keypresses will be
| instant, the intelligent response will have 20ms lag, but
| that's not exactly much addition (as a total percentage) with
| current IDEs.
| tsegers wrote:
| 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 wrote:
| 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.
| whimsicalism wrote:
| ssh+vim+tmux actually unlocked my iPad as a coding tool,
| which is incredible. I can go on a bike ride, stop in the
| park, get a bit of work done with some tea in a thermos,
| and then bike back home.
| FpUser wrote:
| And bill client for the whole day ;)
| wbobeirne wrote:
| 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.
| polote wrote:
| And there is also this more recent article
| https://blog.replit.com/codemirror of why they chose CodeMirror
| williamstein wrote:
| Thanks. It is great how they put so much effort into explaining
| their choices.
| victornomad wrote:
| 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. 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.
| kleiba wrote:
| 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?
| neoneye2 wrote:
| 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
| ilovecaching wrote:
| 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.
| seanw444 wrote:
| 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.
| afry1 wrote:
| 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.
| zewish wrote:
| 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). It's one of the best
| editor frameworks I've used, and it also has a really nice React
| integration.
| mlajtos wrote:
| The article is about code editors, Slate is for building rich
| text editor.
___________________________________________________________________
(page generated 2022-03-14 23:00 UTC)