# List of community extensions?
**URL:** https://discuss.codemirror.net/t/list-of-community-extensions/4899
**Category:** v6
**Created:** [August 19, 2022, 8:43am UTC](https://discuss.codemirror.net/t/list-of-community-extensions/4899 "2022-08-19T08:43:13Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@pragy](https://discuss.codemirror.net/u/pragy)
#### Post date: [August 19, 2022, 8:43am UTC](https://discuss.codemirror.net/t/list-of-community-extensions/4899/1 "2022-08-19T08:43:13Z")
This link [List of Extensions](https://codemirror.net/docs/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.](https://uiwjs.github.io/react-codemirror/#/extensions/)
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.
---
### Author:  [@pragy](https://discuss.codemirror.net/u/pragy)
#### Post date: [August 21, 2022, 3:56pm UTC](https://discuss.codemirror.net/t/list-of-community-extensions/4899/2 "2022-08-21T15:56:56Z")
@marijn would you be willing to create an official page to list community extensions - I would love to help you collect the list!
---
### Author:  [@marijn](https://discuss.codemirror.net/u/marijn)
#### Post date: [August 22, 2022, 7:15am UTC](https://discuss.codemirror.net/t/list-of-community-extensions/4899/3 "2022-08-22T07:15:53Z")
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.
---
### Author:  [@pragy](https://discuss.codemirror.net/u/pragy)
#### Post date: [August 22, 2022, 7:52pm UTC](https://discuss.codemirror.net/t/list-of-community-extensions/4899/4 "2022-08-22T19:52:56Z")
> 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
> **[Replit — Betting on CodeMirror](https://blog.replit.com/codemirror)**
>
> At Replit, our mission is to bring the next billion software creators online. In order to achieve that ambitious goal, we need to make sure that the experience of writing, running, and sharing code is as seamless as possible. At the heart of that...
> **[Replit — A New Code Editor for Mobile - CodeMirror 6](https://blog.replit.com/codemirror-mobile)**
>
> Today, we are thrilled to announce CodeMirror as the new code editor on Replit for mobile devices. CodeMirror is a versatile code editor that has been specifically designed with mobile in mind, providing an excellent touchscreen experience. This...
> **[Replit — Comparing Code Editors: Ace, CodeMirror and Monaco](https://blog.replit.com/code-editors)**
>
> We compare and contrast the top code editors that you use in your browser.
# Extensions
## Color Picker [uiwjs]
Source - [react-codemirror/extensions/color at master · uiwjs/react-codemirror · GitHub](https://github.com/uiwjs/react-codemirror/tree/master/extensions/color)
## Relative Line Numbers [uiwjs]
Source -
## Clickable links [uiwjs]
Source - [react-codemirror/extensions/hyper-link at master · uiwjs/react-codemirror · GitHub](https://github.com/uiwjs/react-codemirror/tree/master/extensions/hyper-link)
## Mentions [uiwjs]
Source - [react-codemirror/extensions/mentions at master · uiwjs/react-codemirror · GitHub](https://github.com/uiwjs/react-codemirror/tree/master/extensions/mentions)
## Event Handlers [uiwjs]
Source - [react-codemirror/extensions/events at master · uiwjs/react-codemirror · GitHub](https://github.com/uiwjs/react-codemirror/tree/master/extensions/events)
## Line Wrapping
> [Codemirror 6 line wrapping that preserves indentation · GitHub](https://gist.github.com/dralletje/058fe51415fe7dbac4709a65c615b52e)
* * *
# CodeMirror Components
# React
## `react-codemirror` [uiwjs]
Source - [GitHub - uiwjs/react-codemirror: CodeMirror 6 component for React.](https://github.com/uiwjs/react-codemirror)
Preview - [React CodeMirror - CodeMirror component for React.](https://uiwjs.github.io/react-codemirror)
> 🚀 Quickly and easily configure the API.
> 🌱 Versions after `@uiw/react-codemirror@v4` use [codemirror 6](https://codemirror.net/). [#88](https://github.com/uiwjs/react-codemirror/issues/88#issuecomment-914185563).
> ⚛ 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](https://github.com/uiwjs/react-codemirror/issues/267#issuecomment-1041227592).
> 🌎 There are better [sample previews](https://uiwjs.github.io/react-codemirror).
> 🎨 Support [theme](https://uiwjs.github.io/react-codemirror/#/theme/data/dracula) customization, provide theme [editor](https://uiwjs.github.io/react-codemirror/#/theme/editor).
# Vue
## `vue-codemirror`
Source - [GitHub - surmon-china/vue-codemirror: @codemirror code editor component for @vuejs](https://github.com/surmon-china/vue-codemirror)
Preview - [vue-codemirror | Homepage](https://github.surmon.me/vue-codemirror)
---
### Author:  [@pragy](https://discuss.codemirror.net/u/pragy)
#### Post date: [August 22, 2022, 7:55pm UTC](https://discuss.codemirror.net/t/list-of-community-extensions/4899/5 "2022-08-22T19:55:16Z")
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](https://github.com/chinchang/code-blast-codemirror)
## Codemirror Movie
> A plugin for CodeMirror for code demos
Source - [GitHub - sergeche/codemirror-movie: A plugin for CodeMirror for code demos](https://github.com/sergeche/codemirror-movie)
* * *
# 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.](https://github.com/laobubu/HyperMD)
## Markdown2PDF
> Offline markdown to pdf, choose → edit → transform 🥂
Source - [GitHub - realdennis/md2pdf: Offline markdown to pdf, choose -\> edit -\> transform 🥂](https://github.com/realdennis/md2pdf)
Preview - [https://md2pdf.netlify.app/](https://md2pdf.netlify.app/)
## 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.](https://github.com/daniellmb/JavaScript-Scope-Context-Coloring)
Preview - [JavaScript Scope Context Coloring](https://daniellmb.github.io/JavaScript-Scope-Context-Coloring/example/scope-coloring.html)
## 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.](https://github.com/exuanbo/assembler-simulator)
Preview - [Assembler Simulator](https://exuanbo.xyz/assembler-simulator/)
## PlantUML Editor
Source - [GitHub - kkeisuke/plantuml-editor: PlantUML online demo client](https://github.com/kkeisuke/plantuml-editor)
## 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](https://github.com/Rishabh-malhotraa/caucus)
Preview - [https://caucus.netlify.app/](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](https://github.com/munshkr/flok)
Preview - [https://flok.clic.cf/](https://flok.clic.cf/)
* * *
# Components
## react-codemirror - Codemirror Component for React.js
Source - [https://github.com/JedWatson/react-codemirror](https://github.com/JedWatson/react-codemirror)
Preview - [React Codemirror](http://jedwatson.github.io/react-codemirror/)
## react-codemirror2 - Codemirror integrated components for React
Source - [GitHub - scniro/react-codemirror2: Codemirror integrated components for React](https://github.com/scniro/react-codemirror2)
Preview - [react-codemirror2](https://scniro.github.io/react-codemirror2/)
## ngx-codemirror
> An Angular component wrapper for CodeMirror that extends ngModel.
Source - [GitHub - scttcper/ngx-codemirror: Codemirror Wrapper for Angular](https://github.com/scttcper/ngx-codemirror)
Preview - [https://ngx-codemirror.vercel.app/](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.](https://github.com/Pictarine/CodeMirror-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.](https://github.com/angular-ui/ui-codemirror)
---
### Author:  [@ysulyma](https://discuss.codemirror.net/u/ysulyma)
#### Post date: [August 24, 2022, 5:29pm UTC](https://discuss.codemirror.net/t/list-of-community-extensions/4899/6 "2022-08-24T17:29:05Z")
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 (``, ``, etc.) for building an IDE-like experience.
Source - [plugins/packages/codemirror at main · liqvidjs/plugins · GitHub](https://github.com/liqvidjs/plugins/tree/main/packages/codemirror)
Source - [plugins/packages/codebooth at main · liqvidjs/plugins · GitHub](https://github.com/liqvidjs/plugins/tree/main/packages/codebooth)
Preview - [New CodeMirror plugins | Liqvid](https://liqvidjs.org/blog/2022/08/23/new-plugins/)
---
### Author:  [@marijn](https://discuss.codemirror.net/u/marijn)
#### Post date: [August 25, 2022, 2:13pm UTC](https://discuss.codemirror.net/t/list-of-community-extensions/4899/7 "2022-08-25T14:13:19Z")
Take a look at [this page](https://codemirror.net/docs/community/) and let me know if you find anything missing.
---
### Author:  [@pragy](https://discuss.codemirror.net/u/pragy)
#### Post date: [August 25, 2022, 2:54pm UTC](https://discuss.codemirror.net/t/list-of-community-extensions/4899/8 "2022-08-25T14:54:59Z")
Looks great! Thanks 😄
---
### Author:  [@pragy](https://discuss.codemirror.net/u/pragy)
#### Post date: [August 25, 2022, 3:56pm UTC](https://discuss.codemirror.net/t/list-of-community-extensions/4899/9 "2022-08-25T15:56:02Z")
@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?
---
### Author:  [@marijn](https://discuss.codemirror.net/u/marijn)
#### Post date: [August 25, 2022, 6:09pm UTC](https://discuss.codemirror.net/t/list-of-community-extensions/4899/10 "2022-08-25T18:09:59Z")
> [@pragy](#):
>
> would you like the extensions compatible only with older versions of codemirror to also go on that page?
No. I don’t really want to maintain such a page at this point.