CodeMirror 6 Quickstart and Learn-By-Examples

https://github.com/RPGillespie6/codemirror-quickstart/tree/master

This was very useful for me, I could not get started with the official documentation…

@marijn While the CM6 is an amazing piece of software the documentation clearly suffers the Curse of knowledge - Wikipedia.

The tutorials on the page are great for when someone already knows the basics, but the documentation really lacks a few clearly marked and easy to find complete examples for newbies like this one. Reading how the core is functional and the shell is imperative or the whole api documentation while I don’t understand how to glue this editor together to make it even work is impractical.

In your first response to the original post you said that the examples don’t provide anything more than is already written and shared two links. I’ve read both of the pages yet still couldn’t figure out basic stuff while reading the first example code from OP gave me everything to get going.

In my case the main problem was that I don’t really know where the “built-in” extensions come from. The pages list all the extensions but I couldn’t find them because I have no idea what modules to import them from. While I still have no idea how to find it - the example from OP showed me this in code and this is fine for me right now.

What I’m trying to say is that I’d appreciate if you reconsidered the matter of documentation from the perspective of total newbie. I know it’s hard due to aforementioned curse of knowledge, but I believe this thread highlights our perspective quite well. The only question is - are you willing to help more people embrace CM6 by providing clear “getting started” guide?

To clarify my original reply to this thread: I am happy that this quickstart was written, and it’s great if such resources exist. I just don’t want to move them into the project website because trying to explain the messy JS ecosystem from scratch adds a lot of scope, and I don’t want to be responsible for publishing and maintaining such a document. Also, I feel that people who are completely new to JS development are simply unlikely to have a good time with CodeMirror. It is a large, complex library that requires a certain amount of development background for people to be able to do anything useful with it. As such, catering to beginning programmers is not something that feels like a good use of my energy. But again, if others want to write guides in this space, more power to them.

I understand this point of view - especially about the maintenance. Those are valid points.

I’d like to clarify one thing a bit. My post was not about tutorials for beginner programmers. What I needed was a basic piece of code that shows the complete setup of CodeMirror. I literally lacked this - I’d probably be okay with even more minimal setup. Just basics showing the API of codemirror to get me started.

Using this example I managed to integrate CM6 into my app and I’m pretty happy with the results. Just needed something to jumpstart from. Maybe you could at least consider additional section on the page with links to external resources with “warranty off” notice? I feel like this could help others (non-beginners as well) get started with CM6.

Whatever you decide - I’ll take this opportunity to thank you for the work on CM6. I’ve my experience with few different editors in different technologies (non-JS/non-browser envs) and I know how terrible the experience can get. This lets me fully appreciate the architecture you’ve designed for CM6. Thank you for this!

I’m somewhat confused how one could look through any of the official docs and not come across one of those. The guide has a working editor as its second code example, and half the examples create an editor as well. But I guess having basicSetup inlined can give one a better idea of the pieces that make up the editor. I’ve added an example like that to the docs as well.

Well - it’s there but looking through the documentation to find the minimal working example which I wouldn’t expect in the System Guide > Architecture > Modularity section :wink:

The basic editor example you added is the exact thing I was looking for. Thank you!

My $0.02 is that CM6’s landing page and docs don’t do as good a job as CM5’s landing page at funneling the user to “getting started” resources.

CM5:

Very very first thing thing you see is a code snippet to get you started. Furthermore, it’s obvious how to use said snippet - just paste it into an HTML document. If you click “Manual”, the very first thing you see is “Basic Usage”:

Again, self-evident how to use. There’s also a top-level “Basic Usage” link in the navbar.

Contrast this to CM6’s landing page:

Where do I even start? It’s a giant labyrinth you are asking new users to traverse. I’ll need to know about most of these features eventually, but how do I get started? “System Guide > Architecture > Modularity” is not obvious as a starting point, if only because newcomers are scanning headings looking for keywords like “Getting Started”, “Quick Start”, “Basic Usage”, not “Modularity”.

There’s also “Examples > Basic Usage” (which I did find), but then unless you instinctively know how to turn it into something a browser can use (not every web dev uses/configures bundlers), you are stuck again because there are no breadcrumbs to the (separate) bundle page.

Believe me when I say the CM6 web pages can be intimidating to navigate because it’s information overload in an environment where you are just trying to figure out to get started.

Of course, I eventually figured it all out! The information is all there, but it’s fragmented in a way that makes discoverability frustrating. There is nothing funneling the user to a one-stop-shop quickstart. It was that frustration that motivated me to create that one-stop-shop quickstart above that I wished CM6 would have funneled me to from the landing page.

I don’t think you have to “[try] to explain the messy JS ecosystem from scratch” in the docs - my quickstart doesn’t do that either. But what the quickstart does do is provide a basic, pre-made bundle so users can start iterating with something before introducing the concepts of modularity and bundling. It lowers the amount of friction required to get an editor up and running by removing the need for node/npm/bundlers, etc. You can start tinkering with just notepad and a browser if you want.

Again, just giving feedback here - I want to help CM6 improve and succeed. I think CM6 is excellent and I use it in my projects but I think the community response in this thread is indicative that the docs might have a bit of friction that could be smoothed out.

1 Like