A curated list of awesome CodeMirror 6 & ProseMirror resources
CodeMirror 6 and Prosemirror share a few things:
- They're by the same author, Marijn Haverbeke
- They each have their own GitHub Organizations with multiple repos:
- It is possible to embed inline and block widgets, and thus one could embed the other
- They each have separate models and views
- Their models allow for undo/redo and custom keybindings
- They rely on HTML5's contenteditable rather than custom rendering, and can work well on mobile
- They're community funded
They also differ in many ways:
- CodeMirror is designed to work primarily with code, and is syntax highlighted
- ProseMirror is designed to work primarily with document trees, like HTML
- CodeMirror 6 is newer than ProseMirror, and written in TypeScript. ProseMirror is older, and written in JavaScript. (ProseMirror is newer than CodeMirror 5 and below.)
- There are more well-known web-based prose editing libraries than there are well-known web-based code-editing libraries
- Well-known web-based code editing libraries include CodeMirror, Monaco Editor, and ACE Editor
- Well-known web-based prose (rich text) editing libraries include ProseMirror, CKEditor, Draft.js, Quill, TinyMCE, Substance.js, and trix
- ProseMirror repos are prefixed with
prosemirror-while CodeMirror's are unprefixed - with so many repos, it's more work to type the prefix! Repos will sometimes need to be renamed when forking, but it's worth less typing.
This awesome page combines resources for each of them into one document, to help accelerate learning them both at the same time.
- tiptap - A renderless rich-text editor for Vue.js
These are the official docs by category, so the same concepts can be learned with each. They do share a lot and it's concievable that they could one day be merged into the same project, but they definitely needed to evolve separately.
CodeMirror is first in these sections, because it's the most popular of the two, and perhaps the easiest to understand.