Sourcify
Effortlessly find and manage open-source dependencies for your projects.

The modular, accessible, and high-performance code editor for the modern web.

CodeMirror is a foundational, component-based code editor library for the web, re-engineered in its version 6 to prioritize modularity, accessibility, and mobile support. Unlike traditional monolithic editors, CodeMirror 6 is built as a collection of separate modules, allowing developers to include only the specific functionality required, thereby optimizing bundle sizes for production environments. Technically, it utilizes the Lezer incremental parsing system, which provides efficient syntax highlighting and indentation by only re-parsing changed sections of the code. Its state management is based on a functional approach where the editor state is immutable, and updates are processed via transactions, making it highly compatible with modern reactive frameworks like React, Vue, and Svelte. By 2026, CodeMirror has solidified its position as the engine of choice for LLM-driven code interfaces, technical documentation sites, and embeddable IDEs due to its compliance with WCAG accessibility standards and its native touch-screen compatibility. Its extensibility allows for advanced features like collaborative editing via CRDTs and deep integration with Language Server Protocol (LSP) clients.
CodeMirror is a foundational, component-based code editor library for the web, re-engineered in its version 6 to prioritize modularity, accessibility, and mobile support.
Explore all tools that specialize in syntax highlighting. This domain focus ensures CodeMirror delivers optimized results for this specific requirement.
Explore all tools that specialize in highlight code syntax. This domain focus ensures CodeMirror delivers optimized results for this specific requirement.
Explore all tools that specialize in suggest code completions. This domain focus ensures CodeMirror delivers optimized results for this specific requirement.
Uses a system of tree-sitter-like incremental parsers that maintain a syntax tree for the document and update only what is necessary on change.
Editor state is treated as an immutable value; changes are applied by dispatching transactions that produce a new state.
Engineered to be fully navigable by keyboard and screen readers, utilizing ARIA roles and proper focus management.
Provides first-class support for versioning and re-basing changes, facilitating the implementation of OT or CRDT synchronization.
The view component handles touch events and virtual keyboards natively rather than emulating input.
Extensions available to connect the editor to backend LSPs for rich IDE features like 'Go to Definition'.
Architecture allows for tree-shaking, ensuring only used code is bundled into the final application.
Install the core package via npm: npm install @codemirror/state @codemirror/view.
Install required language extensions, such as @codemirror/lang-javascript.
Import the basic setup or create a custom extension set.
Define the initial EditorState with the desired configuration and document content.
Instantiate the EditorView by providing the state and a parent DOM element.
Configure event listeners using the 'update' listener extension to track document changes.
Implement custom themes using the EditorView.theme helper.
Integrate a linter or autocompletion source via the @codemirror/lint or @codemirror/autocomplete packages.
Enable collaborative editing by setting up a socket-based authority and the @codemirror/collab extension.
Deploy the component and verify accessibility compliance with screen readers.
All Set
Ready to go
Verified feedback from other users.
"Highly praised for its performance and modularity, though some users find the version 6 API change to be a significant learning curve."
Post questions, share tips, and help other users.
Effortlessly find and manage open-source dependencies for your projects.

End-to-end typesafe APIs made easy.

Page speed monitoring with Lighthouse, focusing on user experience metrics and data visualization.

Topcoder is a pioneer in crowdsourcing, connecting businesses with a global talent network to solve technical challenges.

Explore millions of Discord Bots and Discord Apps.

Build internal tools 10x faster with an open-source low-code platform.

Open-source RAG evaluation tool for assessing accuracy, context quality, and latency of RAG systems.

AI-powered synthetic data generation for software and AI development, ensuring compliance and accelerating engineering velocity.