CodeMirror — Versatile Code Editor Component for the Browser

Introduction

CodeMirror is a code editor library for the web. Version 6 is a ground-up rewrite that uses a modular, functional extension system. It supports mobile editing, screen readers, and bidirectional text while remaining small enough to bundle in any web application.

What CodeMirror Does

• Provides syntax highlighting via language-specific grammar packages
• Supports autocompletion, lint integration, and bracket matching through extensions
• Handles mobile touch input and virtual keyboards natively
• Offers accessible editing with ARIA roles and screen reader announcements
• Manages undo history, search and replace, and code folding out of the box

Architecture Overview

CodeMirror 6 is built around an immutable state model. The EditorState holds the document, selection, and extension-provided fields. Changes produce new state objects via transactions, and the EditorView reconciles the DOM to match. Extensions are composed as facets and state fields, making the system tree-shakeable and avoiding global mutable state.

Self-Hosting & Configuration

• Install the core package and any desired language or theme packages from npm
• Use basicSetup for a sensible default configuration or compose extensions manually
• Add language support by importing grammar packages like @codemirror/lang-python
• Create custom themes using the EditorView.theme facet with CSS-in-JS style specs
• Deploy as a standard ES module; no special bundler plugin is required

Key Features

• Fully modular: include only the features you need to minimize bundle size
• First-class mobile support with touch selection and virtual keyboard handling
• Incremental parsing via Lezer grammars for fast, fault-tolerant syntax highlighting
• Collaborative editing support through the @codemirror/collab package
• Bidirectional text and right-to-left script support

Comparison with Similar Tools

• Monaco Editor — heavier with richer built-in IntelliSense; CodeMirror is more modular and mobile-friendly
• Ace Editor — long-standing editor with a monolithic design; CodeMirror 6 offers better extensibility
• Prism.js — syntax highlighting only; CodeMirror is a full interactive editor
• Highlight.js — static code highlighting; CodeMirror provides live editing capabilities

FAQ

Q: Is CodeMirror 6 backward compatible with version 5? A: No. Version 6 is a complete rewrite with a new API. A migration guide is available in the documentation.

Q: Can I use CodeMirror with React or Vue? A: Yes. Community wrappers exist for React, Vue, Angular, and Svelte, or you can mount the EditorView directly.

Q: How does CodeMirror handle large files? A: The view only renders visible lines, and the incremental parser processes syntax on demand, keeping performance consistent.

Q: Is CodeMirror free to use commercially? A: Yes. CodeMirror is released under the MIT license.

Sources

• https://github.com/codemirror/dev
• https://codemirror.net/