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.
@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.
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
Color Picker [uiwjs]
Source - react-codemirror/extensions/color at master · uiwjs/react-codemirror · GitHub
Relative Line Numbers [uiwjs]
Clickable links [uiwjs]
Source - react-codemirror/extensions/hyper-link at master · uiwjs/react-codemirror · GitHub
Source - react-codemirror/extensions/mentions at master · uiwjs/react-codemirror · GitHub
Event Handlers [uiwjs]
Source - react-codemirror/extensions/events at master · uiwjs/react-codemirror · GitHub
Codemirror 6 line wrapping that preserves indentation · GitHub
Source - GitHub - uiwjs/react-codemirror: CodeMirror 6 component for React.
Preview - React CodeMirror - CodeMirror component for React.
Quickly and easily configure the API.
@uiw/react-codemirror@v4 use codemirror 6. #88.
Support the features of React Hook(requires React 16.8+).
Use Typescript to write, better code hints.
The bundled version supports use directly in the browser #267.
There are better sample previews.
Support theme customization, provide theme editor.
Source - GitHub - surmon-china/vue-codemirror: @codemirror code editor component for @vuejs
Preview - vue-codemirror | Homepage
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.
Source - GitHub - chinchang/code-blast-codemirror: ✨Particles blasts while typing in Codemirror
A plugin for CodeMirror for code demos
Source - GitHub - sergeche/codemirror-movie: A plugin for CodeMirror for code demos
Tools based on Codemirror
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.
Offline markdown to pdf, choose → edit → transform
Source - GitHub - realdennis/md2pdf: Offline markdown to pdf, choose -> edit -> transform 🥂
Preview - https://md2pdf.netlify.app/
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: A simulator of 8-bit CPU using the "Samphire" Microprocessor Simulator instruction set.
Preview - Assembler Simulator
Source - GitHub - kkeisuke/plantuml-editor: PlantUML online demo client
Autosaving sticky note with support for multiple notes without needing multiple windows.
Realtime Collaborate Editor with Embedded Compiler
Source - GitHub - Rishabh-malhotraa/caucus: Realtime Collaborate Editor with Embedded Compiler
Preview - https://caucus.netlify.app/
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/
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
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 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.
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?
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 (
<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
Take a look at this page and let me know if you find anything missing.
@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.