Community Packages

This page lists CodeMirror-related packages maintained by the wider community. Note that the CodeMirror maintainers make no claims about the quality or fitness-for-purpose of any of these. See below for instructions on helping maintain this page.

Key Bindings

Name	Package
Emacs	@replit/codemirror-emacs
Vim	@replit/codemirror-vim
VS Code	@replit/codemirror-vscode-keymap

Language Support

Language	Package
Clojure	clojure-mode
Elixir	codemirror-lang-elixir
GolfScript	codemirror-lang-golfscript
GraphQL	cm6-graphql
Graphviz	cm-lang-dot or @viz-js/lang-dot
Handlebars	@xiechao/codemirror-lang-handlebars
HCL	codemirror-lang-hcl
HTTP	codemirror-lang-http
J	codemirror-lang-j
Janet	codemirror-lang-janet
JSON Schema	codemirror-json-schema
Julia	@plutojl/lang-julia
Liquid	codemirror-lang-liquid
Nix	@replit/codemirror-lang-nix
R	codemirror-lang-r
Solidity	@replit/codemirror-lang-solidarity
Sparql	codemirror-lang-sparql
Svelte	@replit/codemirror-lang-svelte
WGSL	codemirror-lang-wgsl

Themes

thememirror: Large collection of editor themes. With theme editor.
@ddietr/codemirror-themes: A collection (material, solarized, dracula, github, aura) of themes.
@codemirror/theme-one-dark: One-dark theme. Also suitable as an example for writing a new theme.

Editor Extensions

@uiw/codemirror-extensions-color: Pops up an interactive color picker over color codes in the document.
@uiw/codemirror-extensions-hyper-link: Make links inside the editor followable.
@replit/codemirror-indentation-markers: Displays indentation guides/markers on indented lines.
codemirror-languageserver: Integrate the editor with an LSP server over a web socket.
@uiw/codemirror-extensions-line-numbers-relative: Count line numbers relative to the line that has the cursor.
@lqv/codemirror: CodeMirror plugin for the Liqvid web-based video format. See also @lqv/codebooth.
@uiw/codemirror-extensions-mentions: Add completable @-mentions in CodeMirror.
@emmetio/codemirror6-plugin: Emmet HTML and CSS expansion.
y-codemirror.next: Yjs-based collaborative editing plugin.

@A99US/codemirror-6-snippetbuilder

Convert snippets from other app (like this one) to be used in CodeMirror 6.

Wrappers and Framework Integration

prosemirror-codemirror-block: Editor code blocks in a ProseMirror editor using CodeMirror.
@uiw/react-codemirror: React component wrapping an editor view.
@remirror/extension-codemirror6: Integration of CodeMirror into the Remirror rich text editor.
solid-codemirror: CodeMirror integration for SolidJS.
svelte-codemirror-editor: Svelte component for CodeMirror.
vue-codemirror: Vue 3 component for CodeMirror.
@A99US/CM6-Browser-Wrapper: Utility for loading CodeMirror without bundling, as a separate <script> tag.
@acrodata/code-editor: Angular component for CodeMirror 6.

Contributing to this Page

If you spot a problem or want to add a link to this page, please open a pull request on GitHub updating this HTML document.

Welcome additions are open source packages that implement some non-trivial functionality around CodeMirror 6 and that are maintained and fully implemented. If you have some hot new half-baked idea, please let it mature a bit before submitting here.

Note that this page sets a noindex/nofollow meta tag so submitting links in the hope of improving your search rankings is futile.