CodeMirror 6

This page summarizes the projects mentioned and recommended in the original post on news.ycombinator.com

Our great sponsors
  • Scout APM - Less time debugging, more time building
  • OPS - Build and Run Open Source Unikernels
  • SonarQube - Static code analysis for 29 languages.
  • codemirror-promql

    PromQL support for the CodeMirror code editor

    I'm using CodeMirror 6 for promlens.com and together with the lezer parser generator, it was great for developing syntax highlighting, contextual autocompletion, and inline linting for PromQL (that part is OSS actually, in https://github.com/prometheus-community/codemirror-promql, much of it built by Augustin Hudson, some by myself).

  • codemirror.next

    The next generation of the CodeMirror in-browser editor

    "This means that you, as user, may choose one of these licenses to abide by. I.e. if complying with the GPL is problematic for you, you can choose the more liberal MIT license." https://github.com/codemirror/codemirror.next/commit/8a8dc87...

  • Scout APM

    Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.

  • use-prosemirror

    ProseMirror + React made easy

    > I'm guessing the integration will be basically a wrapper component with a ref of a DOM node where CodeMirror will do its thing.

    Pretty much. This is how my React ProseMirror integration works: https://github.com/dminkovsky/use-prosemirror/blob/main/src/.... I believe CodeMirror would be the same. Makes me think I should expand support.

  • HyperMD

    A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.

    You can do some interesting non-code things with CodeMirror.

    HyperMD[0] is probably the craziest (in a good way) thing I've seen done with CodeMirror.

    [0] https://laobubu.net/HyperMD/#./docs/zh-CN/README.md and https://github.com/laobubu/HyperMD

  • Monaco Editor

    A browser based code editor

    I'm sorry. What I meant was this:

    "Please note that this repository contains no source code for the code editor, it only contains the scripts to package everything together and ship the monaco-editor npm module."

    https://github.com/microsoft/monaco-editor

  • rich-markdown-editor

    The open source React and Prosemirror based markdown editor that powers Outline. Want to try it out? Create an account:

    I had a similar experience starting out with ProseMirror; I wanted to make something similar to the editors in Dropbox Paper and Notion, and found an out-of-the-box rich text editor called tiptap built onto of it.

    They already had nodes for images and embeds [1, 2] which made development easy (I would recommend checking out the source code; its about a hundred lines of code for each, and simple). But as I made more custom nodes, I learned pretty well the internals of tiptap and how it used ProseMirror. And over time, I've come to appreciate knowing its api.

    So if there's any advice for people trying to get started with ProseMirror, I would say to look at libraries which built upon it as example code such as tiptap or the outline rich-markdown-editor [3].

    [1] https://github.com/ueberdosis/tiptap/blob/main/packages/tipt...

    [2] https://github.com/ueberdosis/tiptap/blob/main/examples/Comp...

    [3] https://github.com/outline/rich-markdown-editor

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts