# CodeMirror — Versatile Code Editor Component for the Browser

> A code editor library for the web, with a modular extension system, mobile support, accessibility features, and language packages for dozens of syntaxes.

## Install

Save as a script file and run:

# CodeMirror — Versatile Code Editor Component for the Browser

## Quick Use
```bash
npm install codemirror @codemirror/lang-javascript
```
```javascript
import { EditorView, basicSetup } from 'codemirror';
import { javascript } from '@codemirror/lang-javascript';
new EditorView({
  extensions: [basicSetup, javascript()],
  parent: document.getElementById('editor')
});
```

## 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/

---
Source: https://tokrepo.com/en/workflows/38859990-4361-11f1-9bc6-00163e2b0d79
Author: Script Depot