I created a repo here which contains the quickstart guide and examples I wish I had when I was learning CodeMirror 6. I found the learning curve of CM6 to be quite intimidating compared to CM5, which is what motivated me to create this resource.
I’m wondering if you would think it’s appropriate for me to open a PR for this page to add this repo as a community resource? I for one would have love something like it while I was bootstrapping CM6.
Sorry, no, that doesn’t really add anything that isn’t already addressed by the bundling example and the guide.
That’s fair. I guess devs that are struggling will stumble upon it via google if needed.
IMHO the value it adds is functional examples complete with HTML and premade bundle file. That lets you get started way faster than the official bundling guide and docs. It took me 5 hours of reading through docs and trying to understand all the new abstractions and tinkering with rollup/npm to get a CM6 editor the way I wanted. Heck, it took me an hour just to get One Dark theme working because it’s not obvious anywhere how to apply a 3rd party theme (it’s obvious now, but at the time I could not find a single working example in the official docs for applying a 3rd party theme and the docs got me on the wrong trail when I saw views had a “theme” property when in reality you want to add the theme as an extension). And I’m a CM5 user who thought CM5 on-boarding was very manageable.
There is just currently no way to easily bootstrap yourself with CM6 unless you are an expert front-end JS developer familiar with node.js style import/export conventions, npm, and bundlers (which I was not). I am, however, very familiar with vanilla HTML/JS/CSS.
So unless I missed something, what’s missing from CM6 onboarding is a quick way to get a local CM6 instance up and running.
CM5 had a really simple example to get up and running locally (as well as excellent demo pages):
Bam, you just paste that into an html file and open it in a browser and you can start iterating.
CM6 on the other hand has no easy way to do the equivalent. There is “some assembly required” to get a basic local instance up and running, and said required assembly was not obvious at all to me. Like, how do I take something from the CM6 try page and run it locally? I eventually figured out I’d need to use npm to create a bundle using the provided snippet and then craft my own HTML using the bundle.
Anyway, I think CM6 is a super powerful tool, just that learning curve is currently unreasonably steep for non-node.js devs because of lack of easy-to-setup examples.
Actually, now that I think of it. I think the number one change to the codemirror website that would have saved me a lot of time is just a little blurb on the on the Try page that says something like “To run these examples locally, create a bundle using the bundle guide”. Just some breadcrumbs to lead me from the examples to how to get examples running locally.
As a Node.js noob I didn’t immediately recognize that creating a bundle was the first thing I had to do to get up and running and I wasted a lot of time clicking around and reading stuff until I finally stumbled on the bundle guide…
This would have been very useful to me starting out, thanks for making it. I’ve considered making some blog posts with simple examples for people like me that found some difficulty getting started. Thanks.
They are inside the “node_modules” folder and need to be installed via npm
got it。could you give me a help for get selected context.
window.view.state.selection.ranges
I just get selected ranges ,no context
Brian, many thanks for creating this mini tutorial. Following it, installed some software and got up and going with a minimal example quickly.
This process should be on the front page of Codemirror for n00bs (even though I used CM5). CM6 is a stunning piece of code.
GOD BLESS YOU dude… i spent 3 days trying to get this working, its completely hostile. Thanks to your examples i made it work and i didnt give up on this.
god bless you, you made a great service to this script, they should replace the current docs with this, even put it on homepage instead of that confusing and completely useless “example” they have now.
with all due respect, you are so wrong. In the official guide, you can not end up using it and making it work if you don’t assume a lot of things that not everyone can assume. In this guide, you start from a working example and you learn how to use it while actually using it. If you want to go deeper then you can follow the official example (that is way too confusing honestly), but for a “quick start” this one is best. Please do consider including this or similar simple and functional code samples in the official docs.
Another thing CM6 n00bs should read is Marijn s blog, especially this list: https://marijnhaverbeke.nl/blog/#javascript
It answers a lot of time consuming questions I’d probably ask here.
Just what i needed. Thanks!
Totally disagree, the quickstart guide is exactly what I needed. I think sometimes the creator of a library is the worst person to explain to a beginner how to use it because they don’t know what it’s like to come to it with no context and perhaps limited technical experience. Anyway thanks RPGillespie you saved me a bunch of time
Just chiming in to say the quickstart has from Gillespie has been a huge help. The official documentation - while admirable that the time was taken to put it together - is a huge miss if you’re a newcomer. Most of it jumps right into the middle of some topic that really requires much deeper background knowledge, and that background is unavailable or unclear how to find anywhere.
Couldn’t agree more w/ the point above, that frequently the original author might not be the best candidate to write documentation. No fault there, it’s just hard to deconstruct all the built up knowledge and act like you don’t know anything about a project, then write about it. Instead of turning away offers to help improve the documentation (like this quickstart), maybe see it as constructive feedback and wanting to contribute back to the project.
I’m still dumbfounded, days later, how to use CM. No doubt CM is a work of genius but the guide is way too terse and downright incomplete in basic details before it links to the bewildering one-page reference page and getting me completely lost. We need heavily commented reference examples. Separate pages per topic. Repetition is not a bad thing!
Thank you for this tool, it’s incredibly powerful!
Thank you for preparing the CM6 Quick Start repository. The examples are a great way to learn how to put everything together. It’s a valuable contribution to the community, helpful for new users as reference. If not in the official documentation, maybe the Awesome CodeMirror repo is a good place for people learning how to use the library.
Having recently joined the “This looks great, but how do I actually use it?” club, I am very glad that I found Rob’s quickstart guide.
Even with it, not really being a Node person and not wanting to spend days trying to understand the cryptic docs, it still took me far too long to get to the stage where I could just add a single file to my front-end code and highlight some textarea content (presumably a common request).
So I’ve made a pre-built-bundles project extending Rob’s quick start guide with some very basic pre-configured language configs for all the officially supported languages, and also pre-built bundles for each of them.
These are designed to be used on front-end web projects. They also aim to make it easy to use the editor in forms (keeping textarea data in sync with the editor), so the functions that I’ve added are for that purpose.
I’m not an expert on any of this, so if anyone wants to improve this repo, it would be gratefully accepted.
Thank you @RPGillespie6 for making this quickstart! It helped me out a lot 
@marijn, your documentation is not suited to build a static website with a code editor where no nodejs is involved (or even typescript). It’s not like you can’t do that. There are other projects out there, also those written in typescript, that offer “dist” builds either as releases or through a CDN (sometimes both). That already gives a much easier way to access your project!
What you have now is full on nodejs where you’re required to first know quite a bit of different tech (nodejs, the bundler and - part of - it’s documentation, your bundle documentation) before you can build your own dist and go from there.
The naming of the examples is magnificently misleading. For example the split view example CodeMirror Split View Example is no split view at all. You can assume with a name like that (and the project being called codemirror) that a sane example should show an actual split view (2 columns) where one side is the code and the other is the result of that code. Your Try example is a split view (yay for that!) but it itself is named so weirdly that i at first thought CodeMirror was a paid library because try 9 out of 10 times means “trying” something that you can buy. But it’s not that, it’s a demo.
Not to turn this into a rant as the modular structure is amazing and something more projects definitely should aim for! What you’ve build is a marvel and seems to be the best in it’s class compared to the alternatives! So hats of to that for sure 
It demonstrates the technical side of implementing a split view. The CSS to make it look the way you apparently expect is not the interesting or hard part.
Maybe, since you’ve noticed the modular structure, you can also see why this system isn’t distributed as a single script loadable with a <script> tag.
That’s a bit too simplistic.
There are projects out there that, though a CDN, let your include a sort of index from which - via import - different js files are included. It doesn’t have to be a single massive js blob.