List of community extensions?

This link List of Extensions only provides the list of official extensions.

There are some great community extensions that are hard to find because they aren’t listed under a single resource. Some good ones are demoed here: React CodeMirror - CodeMirror component for React.
Repl.it which is a commercial supporter of codemirror has also published several extensions.

If the official codemirror website can have a section linking to various community extensions, it will make finding, contributing, and sharing such extensions much more straightforward.

3 Likes

@marijn would you be willing to create an official page to list community extensions - I would love to help you collect the list!

Something like this is definitely going to be useful. I’m somewhat concerned about maintaining it, though. Many open-source packages are published in a short burst of enthusiasm and then immediately abandoned, and I’d hate to end up with a lot of links to inactive, broken stuff—but I also don’t really want to audit every link and check on it later.

A disclaimer at the top + an encouragement to help maintain the list with pull requests might make this manageable, I don’t know. If you have a set of links that’d make a good starting list, please post them here and I’ll set up an initial page.

1 Like

A disclaimer at the top + an encouragement to help maintain the list with pull requests might make this manageable

Thanks! That would be lovely.

Given how widespread codemirror is, I’m sure that the community will pick up once they have an official channel for listing the plugins.


Here are a few of the initial extensions & components. Please start with a page for listing these and I will send your PRs on github as I hunt for more.

Note: all of the following rely on codemirror v6


Articles

Extensions

Color Picker [uiwjs]

Source - react-codemirror/extensions/color at master · uiwjs/react-codemirror · GitHub

Relative Line Numbers [uiwjs]

Source -

Clickable links [uiwjs]

Source - react-codemirror/extensions/hyper-link at master · uiwjs/react-codemirror · GitHub

Clickable links

Mentions [uiwjs]

Source - react-codemirror/extensions/mentions at master · uiwjs/react-codemirror · GitHub

image

Event Handlers [uiwjs]

Source - react-codemirror/extensions/events at master · uiwjs/react-codemirror · GitHub

Line Wrapping

Codemirror 6 line wrapping that preserves indentation · GitHub


CodeMirror Components

React

react-codemirror [uiwjs]

Source - GitHub - uiwjs/react-codemirror: CodeMirror 6 component for React.
Preview - React CodeMirror - CodeMirror component for React.

:rocket: Quickly and easily configure the API.
:seedling: Versions after @uiw/react-codemirror@v4 use codemirror 6. #88.
:atom_symbol: Support the features of React Hook(requires React 16.8+).
:books: Use Typescript to write, better code hints.
:globe_with_meridians: The bundled version supports use directly in the browser #267.
:earth_americas: There are better sample previews.
:art: Support theme customization, provide theme editor.

Vue

vue-codemirror

Source - GitHub - surmon-china/vue-codemirror: @codemirror code editor component for @vuejs
Preview - vue-codemirror | Homepage

1 Like

And here are some for older versions - in case someone would like to port them to codemirror 6

Ideally, creating a separate page for these will be good since this will help people find older things that need to be ported to the latest version of codemirror.


Extensions

Code-blast

Source - GitHub - chinchang/code-blast-codemirror: ✨Particles blasts while typing in Codemirror

Codemirror Movie

A plugin for CodeMirror for code demos

Source - GitHub - sergeche/codemirror-movie: A plugin for CodeMirror for code demos


Tools based on Codemirror

HyperMD

A WYSIWYG Markdown Editor for browsers.

Break the Wall between writing and previewing.

Source - GitHub - laobubu/HyperMD: A WYSIWYG Markdown Editor for browsers. Break the Wall between writing and previewing.

Markdown2PDF

Offline markdown to pdf, choose → edit → transform :clinking_glasses:

Source - GitHub - realdennis/md2pdf: Offline markdown to pdf, choose -> edit -> transform 🥂
Preview - https://md2pdf.netlify.app/
It just works!

JavaScript Scope Context Coloring

A JavaScript experiment in switching between syntax highlighting and scope colorizing, built on JSLint and CodeMirror and inspired by Douglas Crockford.

Source - GitHub - daniellmb/JavaScript-Scope-Context-Coloring: An experiment in switching between syntax highlighting and scope colorizing built on JSLint and CodeMirror.
Preview - JavaScript Scope Context Coloring

Assembler Simulator

A simulator of 8-bit CPU using the “Samphire” Microprocessor Simulator instruction set (similar to the Intel 8086 chip). “Samphire” is used for teaching CS1111 Systems Organisation at University College Cork, but it is restricted to Windows.

This project aims to recreate as much of the “Samphire” application as possible and provide a better learning experience using modern front-end web technologies

Source - GitHub - exuanbo/assembler-simulator: The Assembler Simulator is an 8-bit CPU simulation tool that utilizes the "Samphire" sms32v50 Microprocessor Simulator instruction set.
Preview - Assembler Simulator

PlantUML Editor

Source - GitHub - kkeisuke/plantuml-editor: PlantUML online demo client

Noty

Autosaving sticky note with support for multiple notes without needing multiple windows.

Caucus

Realtime Collaborate Editor with Embedded Compiler

Source - GitHub - Rishabh-malhotraa/caucus: Realtime Collaborate Editor with Embedded Compiler
Preview - https://caucus.netlify.app/

Flok

Web-based P2P collaborative editor for live coding music and graphics

Source - GitHub - munshkr/flok: Web-based P2P collaborative editor for live coding sounds and images
Preview - https://flok.clic.cf/


Components

react-codemirror - Codemirror Component for React.js

Source - GitHub - JedWatson/react-codemirror: Codemirror Component for React.js
Preview - React Codemirror

react-codemirror2 - Codemirror integrated components for React

Source - GitHub - scniro/react-codemirror2: Codemirror integrated components for React
Preview - react-codemirror2

ngx-codemirror

An Angular component wrapper for CodeMirror that extends ngModel.

Source - GitHub - scttcper/ngx-codemirror: Codemirror Wrapper for Angular
Preview - https://ngx-codemirror.vercel.app/

CodeMirror-SwiftUI

CodeMirror-SwiftUI is a lightweight wrapper of CodeMirror for macOS and iOS packaged for SwiftUI.

Source - GitHub - Pictarine/CodeMirror-SwiftUI: CodeMirror-SwiftUI is a lightweight wrapper of CodeMirror for macOS and iOS packaged for SwiftUI.

ui-codemirror [angular]

This directive allows you to add CodeMirror to your textarea elements.

Source - GitHub - angular-ui/ui-codemirror: This directive allows you to add CodeMirror to your textarea elements.

Contributing my own extensions. I guess @lqv/codemirror would go under Extensions and @lqv/codebooth would go under Components, maybe?

@lqv/codemirror, @lqv/codebooth

These packages allow you to create interactive coding tutorials by recording typing into a CodeMirror editor and then replaying it. @lqv/codemirror is a low-level package that handles recording and replaying. @lqv/codebooth builds on this, providing a family of React components (<Editor>, <FileTabs>, etc.) for building an IDE-like experience.

Source - plugins/packages/codemirror at main · liqvidjs/plugins · GitHub
Source - plugins/packages/codebooth at main · liqvidjs/plugins · GitHub
Preview - New CodeMirror plugins | Liqvid

1 Like

Take a look at this page and let me know if you find anything missing.

2 Likes

Looks great! Thanks :smile:

@marijn would you like the extensions compatible only with older versions of codemirror to also go on that page? If not, where shall we put those?

No. I don’t really want to maintain such a page at this point.