# codemirror/dev

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/codemirror-dev).**

7,820 stars · 474 forks · JavaScript · NOASSERTION · archived

## Links

- GitHub: https://github.com/codemirror/dev
- Homepage: https://codemirror.net/
- awesome-repositories: https://awesome-repositories.com/repository/codemirror-dev.md

## Description

CodeMirror is a browser-based code editor framework and modular extension system used to embed full-featured text editors into web pages. It functions as a syntax tree parsing engine and a language server protocol client, enabling structural language analysis and deep integration with external programming language services.

The project is distinguished by its modular architecture, which uses a system of extensions and compartments for dynamic reconfiguration at runtime. It supports real-time collaborative editing and state synchronization through an operational transformation framework, allowing multiple users to edit documents simultaneously with conflict resolution.

The framework covers a broad range of editor capabilities, including immutable state management, advanced text manipulation with multiple cursors, and a comprehensive visual layer for document decorations and gutters. It provides extensive language support through syntax highlighting and linting, alongside accessibility features for screen readers and bidirectional text support for internationalization.

A local development server is included to automate bundling and support rapid iteration during development.

## Tags

### Software Engineering & Architecture

- [Modular Extension Systems](https://awesome-repositories.com/f/software-engineering-architecture/modular-extension-systems.md) — Built as a minimal core with all features delivered through a highly flexible modular extension system.
- [Abstract Syntax Tree Parsing](https://awesome-repositories.com/f/software-engineering-architecture/abstract-syntax-tree-parsing.md) — Generates structural parse trees to enable deep language features like indentation, folding, and highlighting. ([source](https://codemirror.net/))
- [Atomic Transactional State Commits](https://awesome-repositories.com/f/software-engineering-architecture/atomic-transactional-state-commits.md) — Processes all document changes as discrete, immutable transactions to ensure a consistent state and reliable undo/redo.
- [Immutable State Transactions](https://awesome-repositories.com/f/software-engineering-architecture/immutable-state-transactions.md) — Updates document content through transactions that replace text ranges or merge changes to maintain an immutable state. ([source](https://codemirror.net/6/docs/ref))
- [Structural Analysis](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/extensibility/plugin-architectures/domain-specific/language-support-definitions/language-parsing-rules/structural-analysis.md) — Generates detailed parse trees for structural language analysis to enable deep integration of language-specific features. ([source](https://codemirror.net/6/))
- [Operational Transformation](https://awesome-repositories.com/f/software-engineering-architecture/operational-transformation.md) — Implements operational transformation to resolve conflicts during real-time collaborative editing.
- [Syntax Parsing Engines](https://awesome-repositories.com/f/software-engineering-architecture/syntax-parsing-engines.md) — Functions as a syntax tree parsing engine to enable structural language analysis and advanced editing features.
- [Code Folding](https://awesome-repositories.com/f/software-engineering-architecture/code-edit-formats/structural-folding/code-folding.md) — Enables collapsing and expanding blocks of code to improve navigation and overview of large files. ([source](https://codemirror.net/))
- [Smart Newline Indentation](https://awesome-repositories.com/f/software-engineering-architecture/indentation-engines/typing-time-auto-indenters/smart-newline-indentation.md) — Replaces the selection with a newline and automatically indents the new line based on context. ([source](https://codemirror.net/6/docs/ref))
- [State Facets](https://awesome-repositories.com/f/software-engineering-architecture/state-facets.md) — Combines multiple extension inputs into a single computed value for global editor settings.
- [Symbol Renamers](https://awesome-repositories.com/f/software-engineering-architecture/symbol-renamers.md) — Provides safe, project-wide identifier renaming by requesting updates from a language server. ([source](https://codemirror.net/6/docs/ref))

### Web Development

- [Browser-Based Editors](https://awesome-repositories.com/f/web-development/browser-based-editors.md) — Provides a full-featured, browser-based code editor with syntax highlighting, multiple cursors, and customizable themes.
- [Extension Systems](https://awesome-repositories.com/f/web-development/extension-systems.md) — Implements a modular extension architecture that allows third-party modules to add specialized behavior to the editor core. ([source](https://codemirror.net/6/))
- [Editor Frameworks](https://awesome-repositories.com/f/web-development/browser-based-editors/editor-frameworks.md) — Offers a modular framework and extension system for building highly customizable browser-based text editors.
- [Collaborative Editing Frameworks](https://awesome-repositories.com/f/web-development/collaborative-editing-frameworks.md) — Provides a framework for implementing real-time multi-user text editing with synchronization and conflict resolution.
- [Language Server Integrations](https://awesome-repositories.com/f/web-development/language-server-integrations.md) — Maintains a persistent connection to language servers to synchronize document changes and receive diagnostics. ([source](https://codemirror.net/6/docs/ref))
- [Editor State Fields](https://awesome-repositories.com/f/web-development/editor-state-update-handlers/editor-state-fields.md) — Stores metadata in the editor state and defines precise update logic for that data during document transactions. ([source](https://codemirror.net/6/docs/ref))
- [Undo-Redo History](https://awesome-repositories.com/f/web-development/history-management/undo-redo-history.md) — Provides a history of state changes to enable both local and collaborative undo and redo operations. ([source](https://codemirror.net/))

### Business & Productivity Software

- [Collaborative Editors](https://awesome-repositories.com/f/business-productivity-software/team-collaboration-events/collaboration-communication-tools/collaboration-software/collaborative-editors.md) — Enables real-time multi-user synchronization and collaborative editing using an operational transformation framework.

### Data & Databases

- [Immutable State Containers](https://awesome-repositories.com/f/data-databases/data-management/state-context-management/immutable-state-containers.md) — Implements an immutable data structure for the document and selection to ensure consistent state transitions. ([source](https://codemirror.net/6/docs/ref))
- [Dynamic Configuration Compartments](https://awesome-repositories.com/f/data-databases/dynamic-extension-loading/runtime-extension-registrations/dynamic-configuration-compartments.md) — Uses a compartment-based system to allow replacing and updating editor extensions at runtime via transactions. ([source](https://codemirror.net/6/docs/ref))
- [Text Search and Replace](https://awesome-repositories.com/f/data-databases/text-pattern-matching/text-search-and-replace.md) — Implements search and replace functionality using plain text or regular expressions. ([source](https://codemirror.net/))

### Development Tools & Productivity

- [Language Server Protocol Clients](https://awesome-repositories.com/f/development-tools-productivity/code-editors-ides/extension-ecosystems-management/editor-ide-extensions/language-server-protocol-clients.md) — Integrates with language servers to provide IDE-like features such as autocompletion, diagnostics, and symbol navigation.
- [Language Server Integrations](https://awesome-repositories.com/f/development-tools-productivity/language-server-integrations.md) — Integrates with the Language Server Protocol to provide advanced intelligence like symbol renaming and navigation. ([source](https://codemirror.net/6/docs/ref))
- [Language Server Protocol Integrations](https://awesome-repositories.com/f/development-tools-productivity/language-server-protocol-integrations.md) — Integrates with Language Server Protocol servers to provide advanced features like autocompletion, go-to-definition, and real-time diagnostics.
- [Symbol Navigation](https://awesome-repositories.com/f/development-tools-productivity/symbol-navigation.md) — Allows users to jump directly to the declaration or reference of a symbol using language server lookups. ([source](https://codemirror.net/6/docs/ref))
- [Code Editors](https://awesome-repositories.com/f/development-tools-productivity/terminal-syntax-highlighting-engines/in-browser-code-editing/code-editors.md) — Allows embedding a full-featured code editor with syntax highlighting and autocompletion directly into web pages. ([source](https://codemirror.net/))
- [Context-Aware Suggestions](https://awesome-repositories.com/f/development-tools-productivity/type-aware-autocompletion/context-aware-suggestions.md) — Displays context-aware coding suggestions as the user types to improve development speed. ([source](https://codemirror.net/6/docs/ref))
- [Auto-closing Brackets](https://awesome-repositories.com/f/development-tools-productivity/auto-closing-brackets.md) — Automatically inserts matching closing brackets, parentheses, and quotes during typing. ([source](https://codemirror.net/))
- [Automated Code Formatters](https://awesome-repositories.com/f/development-tools-productivity/automated-code-formatters.md) — Reformats the entire document based on language server rules to ensure consistent code styling. ([source](https://codemirror.net/6/docs/ref))
- [Basic Text Deletion](https://awesome-repositories.com/f/development-tools-productivity/basic-text-deletion.md) — Removes the character before or after the cursor or deletes a whole word. ([source](https://codemirror.net/6/docs/ref))
- [Undo-Redo State History](https://awesome-repositories.com/f/development-tools-productivity/change-tracking/state-tracking-utilities/action-based-state-tracking/undo-redo-state-history.md) — Provides a sequence of state transitions to support reversing and reapplying document changes. ([source](https://codemirror.net/6/docs/ref))
- [Cursor Navigation](https://awesome-repositories.com/f/development-tools-productivity/cursor-navigation.md) — Provides mechanisms for navigating the editor cursor using keyboard shortcuts and arrow keys. ([source](https://codemirror.net/6/docs/ref))
- [General Editor Behavior Customizations](https://awesome-repositories.com/f/development-tools-productivity/editor-extensions/editor-behavior-customizations/explorer-behavior-customizations/general-editor-behavior-customizations.md) — Provides a modular system to extend or replace keymaps and rendering pipelines to customize editor behavior. ([source](https://cdn.jsdelivr.net/gh/codemirror/dev@main/README.md))
- [Automatic Signature Help Displays](https://awesome-repositories.com/f/development-tools-productivity/function-signature-overlays/automatic-signature-help-displays.md) — Automatically displays function parameter hints and return types at the cursor position. ([source](https://codemirror.net/6/docs/ref))
- [In-Editor Linting](https://awesome-repositories.com/f/development-tools-productivity/in-editor-linting.md) — Displays real-time error and warning messages directly within the editor to highlight problematic code patterns. ([source](https://codemirror.net/6/))
- [Indentation Adjustment](https://awesome-repositories.com/f/development-tools-productivity/indentation-adjustment.md) — Adds or removes a unit of indentation from all selected lines. ([source](https://codemirror.net/6/docs/ref))
- [Indentation Rules](https://awesome-repositories.com/f/development-tools-productivity/indentation-rules.md) — Computes and applies code indentation based on structural syntax tree properties. ([source](https://codemirror.net/6/docs/ref))
- [Command Key Bindings](https://awesome-repositories.com/f/development-tools-productivity/input-binding-libraries/command-key-bindings.md) — Associates keyboard shortcuts with internal command functions across different platforms and modifier combinations. ([source](https://codemirror.net/6/docs/ref))
- [Line Deletion](https://awesome-repositories.com/f/development-tools-productivity/line-deletion.md) — Removes the lines containing the current selection from the document. ([source](https://codemirror.net/6/docs/ref))
- [Newline Insertion](https://awesome-repositories.com/f/development-tools-productivity/newline-insertion.md) — Replaces the current selection with a newline character. ([source](https://codemirror.net/6/docs/ref))
- [Hover Information Displays](https://awesome-repositories.com/f/development-tools-productivity/symbol-navigation/hover-information-displays.md) — Shows detailed symbol types, signatures, and documentation in popups when hovering over code. ([source](https://codemirror.net/6/docs/ref))
- [Default Editor Bundles](https://awesome-repositories.com/f/development-tools-productivity/text-editing-utilities/editor-configurations/default-editor-selection/default-editor-bundles.md) — Ships pre-configured bundles of common extensions like keymaps and line numbers to create a functional editor quickly. ([source](https://codemirror.net/6/docs/ref))
- [Snippet Insertions](https://awesome-repositories.com/f/development-tools-productivity/text-snippet-managers/snippet-insertions.md) — Injects text templates with tab-stops to allow jumping between placeholders. ([source](https://codemirror.net/6/docs/ref))

### User Interface & Experience

- [Code Editor Components](https://awesome-repositories.com/f/user-interface-experience/code-editor-components.md) — Provides a complete code editor UI component featuring syntax highlighting, key bindings, and undo history. ([source](https://cdn.jsdelivr.net/gh/codemirror/dev@main/README.md))
- [Editor Extension Frameworks](https://awesome-repositories.com/f/user-interface-experience/editor-extension-frameworks.md) — Offers a modular framework for building custom code editing features through a minimal core and an extensive plugin system.
- [Real-Time Collaborative Editing](https://awesome-repositories.com/f/user-interface-experience/real-time-collaborative-editing.md) — Provides a robust system for multiple users to edit the same document simultaneously with real-time synchronization. ([source](https://codemirror.net/))
- [Syntax Highlighters](https://awesome-repositories.com/f/user-interface-experience/syntax-highlighters.md) — Applies visual syntax highlighting by coloring code tokens based on the programming language grammar. ([source](https://codemirror.net/))
- [Screen Reader Optimizations](https://awesome-repositories.com/f/user-interface-experience/accessible-interface-design/screen-reader-optimizations.md) — Implements specialized focus and announcement management to ensure the editor is accessible via screen readers. ([source](https://codemirror.net/))
- [Document Range Mapping](https://awesome-repositories.com/f/user-interface-experience/cursor-position-mapping/document-range-mapping.md) — Updates document positions and ranges across changes to keep markers and selections synchronized. ([source](https://codemirror.net/6/docs/ref))
- [Editor Appearance Customization](https://awesome-repositories.com/f/user-interface-experience/editor-customization-tools/editor-appearance-customization.md) — Allows customization of the editor's visual environment through themes, color schemes, and font styles. ([source](https://codemirror.net/))
- [Editor Tooltips](https://awesome-repositories.com/f/user-interface-experience/editor-tooltips.md) — Positions floating DOM elements such as tooltips and panels near the cursor to provide contextual information. ([source](https://codemirror.net/6/docs/ref))
- [Web Accessibility Compliance](https://awesome-repositories.com/f/user-interface-experience/graphical-user-interfaces/accessibility/web-accessibility-compliance.md) — Implements inclusive web standards supporting screen readers, keyboard-only navigation, and bidirectional text.
- [Search Panels](https://awesome-repositories.com/f/user-interface-experience/search-panels.md) — Provides a dedicated search panel for finding occurrences of text or regular expressions. ([source](https://codemirror.net/6/docs/ref))
- [Non-Destructive Text Decorations](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/non-destructive-text-decorations.md) — Applies visual marks and inline widgets to text ranges without modifying the actual document content.
- [Theme Management](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/theme-management.md) — Provides tools and utilities for managing, switching, and importing visual themes to change the editor's appearance. ([source](https://codemirror.net/))
- [Editor Text Decorators](https://awesome-repositories.com/f/user-interface-experience/text-highlighting/editor-text-decorators.md) — Applies visual marks and inline widgets to specific text ranges to provide contextual feedback. ([source](https://codemirror.net/6/docs/ref))
- [Multiple Cursors](https://awesome-repositories.com/f/user-interface-experience/text-selection-control/multiple-cursors.md) — Supports simultaneous editing across multiple non-contiguous text selections using multiple cursors. ([source](https://codemirror.net/))
- [Rectangular Text Selections](https://awesome-repositories.com/f/user-interface-experience/visual-node-editors/area-selection/rectangular-text-selections.md) — Enables selection of text in rectangular block regions across multiple lines using modifier keys. ([source](https://codemirror.net/6/docs/ref))

### System Administration & Monitoring

- [Runtime Extension Reconfiguration](https://awesome-repositories.com/f/system-administration-monitoring/hot-reconfigurations/runtime-extension-reconfiguration.md) — Uses compartments to allow extensions to be updated or replaced at runtime without resetting the editor.