Extensible Code Editor
======================
CodeMirror is a code editor component for the web. It can be used in websites to implement a text input field with support for many editing features, and has a rich programming interface to allow further extension.
9
1
2
3
›
⌄
function hello(who = "world") {
console.log(\`Hello, ${who}!\`)
}
This is a CodeMirror field, configured for editing JavaScript code.
Features
--------
* ### Accessibility
Works well with screen readers and keyboard-only users.
* ### Mobile Support
Use the platform's native selection and editing features on phones.
* [
### Bidirectional Text
Support mixing of right-to-left and left-to-right text.
](docs/ref/#view.EditorView.bidiSpans)
* [
### Syntax Highlighting
Color code to reflect syntactic structure.
](examples/lang-package/)
* [
### Line Numbers
Display gutters with line numbers or other information next to the code.
](docs/ref/#view.lineNumbers)
* [
### Autocompletion
Provide language-specific completion hints in the editor.
](examples/autocompletion/)
* [
### Code Folding
Temporarily hide parts of the document.
](docs/ref/#language.foldCode)
* [
### Search/Replace
Editor-specific search, regexp search, and replace functionality.
](docs/ref/#search)
* [
### Full Parsing
Detailed parse trees allow many types of language integration.
](docs/ref/#language.syntaxTree)
* [
### Extension Interface
Robustly implement demanding editor extensions.
](docs/guide/#extension)
* [
### Modularity
Most features are implemented on top of a generic public API.
](docs/guide/#modularity)
* [
### Speed
Remains responsive even on huge documents and long lines.
](examples/million/)
* [
### Bracket Closing
Automatically insert matching brackets during typing.
](docs/ref/#autocomplete.closeBrackets)
* [
### Linting
Show error and warning messages in the editor.
](docs/ref/#lint)
* [
### Flexible Styling
Mix font styles and sizes, add widgets in the content.
](examples/decoration/)
* [
### Theming
Import or create custom visual editor styles.
](examples/styling/#themes)
* [
### Collaborative Editing
Allow multiple users to edit the same document.
](examples/collab/)
* [
### Undo History
Undo and redo functionality with collab editing support.
](docs/ref/#commands.history)
* [
### Multiple Selections
Select and edit multiple ranges of the document at once.
](docs/ref/#state.EditorState^allowMultipleSelections)
* [
### Internationalization
Provide custom text to display or announce to the user.
](examples/translate/)
* [
### ...and more
Find a full description of the library's features in the docs.
](docs/)
About
-----
CodeMirror is open source under a permissive license ([MIT](https://github.com/codemirror/dev/blob/master/LICENSE)). It is being developed on [GitHub](https://github.com/codemirror/dev). Contributions are welcome.
**If you are using CodeMirror commercially, there is a social (but no legal) expectation that you help fund its maintenance. [Start here](http://marijnhaverbeke.nl/fund/)**.
The library supports browsers up from Internet Explorer 11 (with [some polyfills](examples/ie11/)).
Discussing the project, or asking questions, is best done on the [forum](https://discuss.codemirror.net/). Bugs should be reported through the [issue tracker](https://github.com/codemirror/dev/issues). We aim to be an inclusive, welcoming community. To make that explicit, we have a [code of conduct](http://contributor-covenant.org/version/1/1/0/) that applies to communication around the project.
Language Support
----------------
A full parser package, often with language-specific integration and extension code, exists for the following languages:
* [**Angular**](https://github.com/codemirror/lang-angular)
* [**CSS**](https://github.com/codemirror/lang-css)
* [**C++**](https://github.com/codemirror/lang-cpp)
* [**Go**](https://github.com/codemirror/lang-go)
* [**HTML**](https://github.com/codemirror/lang-html)
* [**Java**](https://github.com/codemirror/lang-java)
* [**JavaScript**](https://github.com/codemirror/lang-javascript)
* [**JSON**](https://github.com/codemirror/lang-json)
* [**Liquid**](https://github.com/codemirror/lang-liquid)
* [**Markdown**](https://github.com/codemirror/lang-markdown)
* [**PHP**](https://github.com/codemirror/lang-php)
* [**Python**](https://github.com/codemirror/lang-python)
* [**Rust**](https://github.com/codemirror/lang-rust)
* [**Sass**](https://github.com/codemirror/lang-sass)
* [**SQL**](https://github.com/codemirror/lang-sql)
* [**Vue**](https://github.com/codemirror/lang-vue)
* [**WAST**](https://github.com/codemirror/lang-wast)
* [**XML**](https://github.com/codemirror/lang-xml)
* [**YAML**](https://github.com/codemirror/lang-yaml)
There is also a collection of [CodeMirror 5 modes](https://github.com/codemirror/legacy-modes) that can be used, and a list of [community-maintained language packages](docs/community#language). If your language is not listed above, you may still find a solution there.
Sponsors
--------
These wonderful companies and organizations help fund development and maintenance of CodeMirror.
### Gold
[](https://codecrafters.io/)[](https://www.desmos.com/)[Holmusk](https://holmusk.com/)[](https://repl.it/)[](https://about.sourcegraph.com/)
### Silver
[](https://cargo.site/)[](https://codepen.io/)[](https://www.lbware.com/)[](https://www.overleaf.com/)[](https://www.prisma.io)[](https://4me.com)
### Bronze
[Amplenote](https://www.amplenote.com/) [](https://anvil.works)[ARTCOMPILER](https://www.artcompiler.com)[](https://blacksmith.sh/)[](https://www.executeprogram.com)[](https://obsidian.md)[](https://resources.co)[](https://route4me.com/)[](https://www.systeminit.com/)[](https://uibakery.io)[](https://val.town)