# codemirror/codemirror5

**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-codemirror5).**

27,247 stars · 4,944 forks · JavaScript · MIT · archived

## Links

- GitHub: https://github.com/codemirror/codemirror5
- Homepage: http://codemirror.net/5/
- awesome-repositories: https://awesome-repositories.com/repository/codemirror-codemirror5.md

## Description

CodeMirror 5 is a browser-based code editor and extensible UI component. It functions as a syntax highlighting engine and a programmable text surface, providing a professional coding experience embedded within web pages.

The project is distinguished by its ability to act as a collaborative text editor, synchronizing document changes across multiple users in real time. It also includes a dedicated Vim emulation layer that implements modal keyboard interactions, motions, and operators.

The system covers broad capability areas including language support for autocompletion and error analysis, content management for multi-cursor editing and block folding, and UI enhancements such as gutter markers and line widgets. It also provides tools for search and replace, undo history management, and user interface localization.

## Tags

### User Interface & Experience

- [Syntax Highlighters](https://awesome-repositories.com/f/user-interface-experience/syntax-highlighters.md) — Provides a high-performance syntax highlighting engine that applies semantic coloring and indentation to source code. ([source](https://codemirror.net/5/doc/manual.html))
- [Text Editor Rendering](https://awesome-repositories.com/f/user-interface-experience/text-editor-rendering.md) — Renders a professional text editing surface in the browser with customizable themes and line separators. ([source](https://codemirror.net/5/doc/manual.html))
- [Code Autocomplete Engines](https://awesome-repositories.com/f/user-interface-experience/autocomplete-suggestion-engines/code-autocomplete-engines.md) — Offers language-specific completion hints and suggestions to the user while they are typing. ([source](https://codemirror.net/))
- [Component Extension Interfaces](https://awesome-repositories.com/f/user-interface-experience/component-extension-interfaces.md) — Provides an extensibility interface to build and integrate custom features directly into the core editor system. ([source](https://codemirror.net/))
- [CSS Class-Based](https://awesome-repositories.com/f/user-interface-experience/syntax-highlighters/css-class-based.md) — Uses a tokenizer to apply CSS classes to text for flexible, themeable semantic coloring.
- [Syntax Highlighting Integrations](https://awesome-repositories.com/f/user-interface-experience/syntax-highlighting-integrations.md) — Integrates language-specific coloring and formatting to improve source code readability in the browser.
- [Content Model Abstractions](https://awesome-repositories.com/f/user-interface-experience/text-editing-components/content-model-abstractions.md) — Decouples the abstract text data model from its visual HTML rendering to ensure efficient document manipulation.
- [Document Style Overrides](https://awesome-repositories.com/f/user-interface-experience/css-styling/document-style-overrides.md) — Provides mechanisms to override default CSS classes to customize the appearance of cursors, selections, and line numbers. ([source](https://codemirror.net/5/doc/manual.html))
- [Custom Text Marks](https://awesome-repositories.com/f/user-interface-experience/custom-text-marks.md) — Enables the assignment of custom CSS classes or inline DOM widgets to specific ranges of text. ([source](https://codemirror.net/5/doc/manual.html))
- [Custom Editor Frameworks](https://awesome-repositories.com/f/user-interface-experience/editor-customization-tools/custom-editor-frameworks.md) — Provides the framework for building specialized editing environments with custom themes, gutters, and widgets.
- [Editor Gutter Components](https://awesome-repositories.com/f/user-interface-experience/editor-gutter-components.md) — Provides UI components in the editor margins to display line-specific status indicators and metadata. ([source](https://codemirror.net/5/doc/manual.html))
- [Event Handling](https://awesome-repositories.com/f/user-interface-experience/event-handling.md) — Registers callbacks to react to editor events such as content changes, cursor movement, and viewport updates. ([source](https://codemirror.net/5/doc/manual.html))
- [Keymap Action Dispatchers](https://awesome-repositories.com/f/user-interface-experience/keymap-action-dispatchers.md) — Implements a system to map keyboard shortcuts and API calls to internal editor functions.
- [Real-Time Collaborative Editing](https://awesome-repositories.com/f/user-interface-experience/real-time-collaborative-editing.md) — Enables real-time collaborative editing by synchronizing document state across multiple users. ([source](https://codemirror.net/))
- [Operational Transformation Protocols](https://awesome-repositories.com/f/user-interface-experience/real-time-collaborative-editing/operational-transformation-protocols.md) — Synchronizes document edits across multiple users using operational transformation to resolve conflicts in real time.
- [Selection Management APIs](https://awesome-repositories.com/f/user-interface-experience/selection-management-apis.md) — Provides APIs for programmatically controlling cursor positions and selection ranges. ([source](https://codemirror.net/5/doc/manual.html))
- [Token Metadata Retrieval](https://awesome-repositories.com/f/user-interface-experience/token-metadata-retrieval.md) — Allows the editor to retrieve detailed type and style information for tokens at specific cursor positions. ([source](https://codemirror.net/5/doc/manual.html))
- [Virtual Editor Lines](https://awesome-repositories.com/f/user-interface-experience/virtual-editor-lines.md) — Allows the insertion of non-editable, full-width DOM elements above or below specific lines of code. ([source](https://codemirror.net/5/doc/manual.html))
- [Visual Style Customization](https://awesome-repositories.com/f/user-interface-experience/visual-style-customization.md) — Supports the application of custom themes, font styles, and embedded widgets to modify the editor's overall appearance. ([source](https://codemirror.net/))

### Web Development

- [Browser-Based Editors](https://awesome-repositories.com/f/web-development/browser-based-editors.md) — Provides a full-featured, browser-based code editing interface with syntax highlighting and language intelligence.
- [Undo-Redo History](https://awesome-repositories.com/f/web-development/history-management/undo-redo-history.md) — Maintains a detailed history of document changes to enable robust undo and redo operations. ([source](https://codemirror.net/5/doc/manual.html))

### Business & Productivity Software

- [Document Content Manipulation](https://awesome-repositories.com/f/business-productivity-software/document-content-manipulation.md) — Enables programmatic reading, writing, and replacement of text ranges within the document. ([source](https://codemirror.net/5/doc/manual.html))
- [Collaborative Editors](https://awesome-repositories.com/f/business-productivity-software/team-collaboration-events/collaboration-communication-tools/collaboration-software/collaborative-editors.md) — Implements a shared editing environment that synchronizes document changes across multiple users in real time.

### Development Tools & Productivity

- [Code Intelligence](https://awesome-repositories.com/f/development-tools-productivity/code-quality-analysis/static-analysis-engines/static-analysis-tools/code-intelligence.md) — Provides contextual code suggestions, linting, and bracket matching to assist users in writing correct code.
- [In-Editor Linting](https://awesome-repositories.com/f/development-tools-productivity/in-editor-linting.md) — Displays linting warnings and error messages directly within the interface for immediate correction. ([source](https://codemirror.net/))
- [Extensible UI Components](https://awesome-repositories.com/f/development-tools-productivity/neovim-plugins/ui-framework-components/extensible-ui-components.md) — Provides a programmable text surface that supports the integration of custom gutters, inline widgets, and editor commands.
- [Syntax Highlighting Engines](https://awesome-repositories.com/f/development-tools-productivity/syntax-highlighting-engines.md) — Features a lexing and tokenizing engine to apply semantic coloring and indentation for various programming languages.
- [In-Browser Code Editing](https://awesome-repositories.com/f/development-tools-productivity/terminal-syntax-highlighting-engines/in-browser-code-editing.md) — Provides a full-featured, programmable code editing experience embedded directly within web pages.
- [Vim Emulation Layers](https://awesome-repositories.com/f/development-tools-productivity/vim-emulation-layers.md) — Implements a dedicated Vim emulation layer for modal keyboard interactions and navigation within the browser editor.
- [Auto-closing Brackets](https://awesome-repositories.com/f/development-tools-productivity/auto-closing-brackets.md) — Automatically inserts the corresponding closing bracket when a user types an opening one. ([source](https://codemirror.net/))
- [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) — Maintains a state-based history stack to allow users to undo and redo document changes.
- [Editor Configurations](https://awesome-repositories.com/f/development-tools-productivity/editor-configurations.md) — Allows programmatic adjustment of editor behavior such as indentation, tab size, and text direction. ([source](https://codemirror.net/5/doc/manual.html))
- [Editor Workspace Managers](https://awesome-repositories.com/f/development-tools-productivity/editor-workspace-managers.md) — Provides advanced workspace management including split views and programmable UI extensions. ([source](https://codemirror.net/5/))
- [Command Key Bindings](https://awesome-repositories.com/f/development-tools-productivity/input-binding-libraries/command-key-bindings.md) — Associates keyboard shortcuts and mouse buttons with specific functions or predefined editor commands. ([source](https://codemirror.net/5/doc/manual.html))
- [Multi-Cursor Editing](https://awesome-repositories.com/f/development-tools-productivity/multi-cursor-editing.md) — Allows users to select and modify multiple non-contiguous text ranges simultaneously. ([source](https://codemirror.net/))
- [Multi-Cursor Editing Systems](https://awesome-repositories.com/f/development-tools-productivity/multi-cursor-editing-systems.md) — Manages multiple independent selection ranges to enable simultaneous editing across non-contiguous text blocks.
- [Internal Action Dispatchers](https://awesome-repositories.com/f/development-tools-productivity/slash-command-interfaces/editor-command-menus/internal-action-dispatchers.md) — Triggers parameter-less internal actions like selecting all text or deleting lines through a command system. ([source](https://codemirror.net/5/doc/manual.html))
- [Emulated Motion Definitions](https://awesome-repositories.com/f/development-tools-productivity/vim-plugins/emulated-motion-definitions.md) — Allows the definition of custom motions, operators, and commands to expand the behavior of the Vim emulation layer. ([source](https://codemirror.net/5/doc/manual.html))

### Software Engineering & Architecture

- [Language Support Definitions](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/extensibility/plugin-architectures/domain-specific/language-support-definitions.md) — Provides a framework for defining custom lexers and tokenizers to enable syntax highlighting for various programming languages. ([source](https://codemirror.net/5/doc/manual.html))
- [Abstract Syntax Tree Generation](https://awesome-repositories.com/f/software-engineering-architecture/integration-extensibility/extensibility/plugin-architectures/domain-specific/language-support-definitions/language-parsing-rules/abstract-syntax-tree-generation.md) — Implements detailed parse tree generation to enable advanced language integration and structural code analysis. ([source](https://codemirror.net/))
- [Viewport-Based Renderers](https://awesome-repositories.com/f/software-engineering-architecture/item-visibility-control/viewport-based-renderers.md) — Optimizes performance by rendering only the visible portion of the document within the browser viewport.
- [Hook-Based Plugin Systems](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/plugin-module-systems/modular-plugin-architectures/plugin-based-architectures/hook-based-plugin-systems.md) — Provides a hook-based system to inject custom behavior and logic into the editor lifecycle.
- [Operation Batching](https://awesome-repositories.com/f/software-engineering-architecture/batch-document-processing/operation-batching.md) — Buffers multiple document changes into a single view update to optimize rendering performance and prevent screen flicker. ([source](https://codemirror.net/5/doc/manual.html))

### Data & Databases

- [In-Document Text Search](https://awesome-repositories.com/f/data-databases/full-text-search/in-document-text-search.md) — Provides a cursor-based mechanism to iterate through and find all matching strings within the current document. ([source](https://codemirror.net/5/doc/manual.html))
- [Text Search and Replace](https://awesome-repositories.com/f/data-databases/text-pattern-matching/text-search-and-replace.md) — Implements a comprehensive search and replace interface supporting plain text and regular expressions. ([source](https://codemirror.net/))