CodeMirror

What Is CodeMirror?

CodeMirror is an open-source code editor implemented in JavaScript that runs inside the browser. It is the component that powers the text-editing experience in countless web applications: online IDEs, documentation platforms, database consoles, configuration panels, coding playgrounds, and the code-block editors inside many content tools. Rather than being a standalone product you visit, CodeMirror is a library that developers embed into their own web pages to give users a real editor, complete with syntax highlighting, line numbers, code folding, autocompletion, and keyboard shortcuts, for writing and editing code or other structured text.

CodeMirror is free and open source under the permissive MIT license and has been a cornerstone of the web-development ecosystem for many years. It is widely regarded as one of the most established in-browser code editors, alongside the Monaco editor that powers Visual Studio Code on the web and the older Ace editor. Its long track record and broad language support have made it the default choice for embedding an editor wherever a website needs users to work with code-like text.

There are two important eras of the project worth distinguishing. The long-running CodeMirror 5 line uses a traditional API and a recognizable set of CSS classes and DOM structures. The modern CodeMirror 6 is a complete rewrite organized as a collection of modular packages (under the @codemirror/ scope, building on a @lezer/ parser system), designed to be more extensible, more accessible, and better suited to modern build tools. Both are in active use across the web, which matters for detection because they leave somewhat different fingerprints.

CodeMirror is strictly a client-side, in-browser component. It is not a hosted service, not a back-end framework, and not a browser extension; it is JavaScript and CSS that a website ships to the visitor's browser. Because it renders an editor in the DOM and loads recognizable scripts and stylesheets, CodeMirror is generally identifiable from the outside by examining the page's assets and the markup it generates, which is precisely how a technology-detection tool spots it.

How CodeMirror Works

CodeMirror turns a region of a web page into a fully interactive text editor. A developer initializes it on the page, and CodeMirror constructs an editor surface in the DOM, then manages everything about the editing experience: rendering the text, applying syntax highlighting, tracking the cursor and selections, handling keystrokes, and exposing an API for reading and changing the content programmatically.

Syntax highlighting is driven by language support. CodeMirror parses the text according to the active language and applies styling so that keywords, strings, comments, and other tokens are visually distinct. CodeMirror 5 used "mode" files for each language, while CodeMirror 6 uses Lezer-based language packages that produce a syntax tree, enabling more accurate highlighting and features like structural folding and smarter indentation.

Performance through virtualization. A key engineering feature is that CodeMirror only renders the portion of the document currently visible in the viewport (plus a small margin), rather than the entire file. This "viewport rendering" lets it handle very large documents smoothly, which is essential for an in-browser editor that might open files with thousands of lines.

Extensibility is central, especially in CodeMirror 6. The modern version is built from small packages, an editor state package, a view package, language packages, a commands package, and more, that you compose together. Behavior is added through "extensions," composable units that configure everything from keymaps and line numbers to autocompletion, linting, search, and bracket matching. This modular design lets applications include only the features they need, keeping bundles lean. CodeMirror 5 offered similar capabilities through a system of add-ons and configuration options rather than packages.

Theming is handled with CSS. CodeMirror ships base styles and a range of themes, and applications can supply their own. CodeMirror 5 applies a recognizable set of class names prefixed with cm- and wraps the editor in a .CodeMirror container; CodeMirror 6 also uses cm--prefixed classes (such as cm-editor, cm-content, and cm-line) but generates much of its styling dynamically. These class conventions are not just implementation details, they are some of the clearest fingerprints for detecting the library.

A useful way to picture the workflow is to follow what happens on the page. The website loads CodeMirror's JavaScript and CSS, initializes an editor on a chosen element with a configuration (language, theme, and extensions or add-ons), and from that point CodeMirror owns the editing surface. As the user types, CodeMirror updates its internal document state, re-highlights the affected tokens, re-renders only the visible lines, and lets the host application read the current contents whenever it needs to, for example to run the code, save a file, or submit a form. All of this happens entirely in the browser.

How to Tell if a Website Uses CodeMirror

CodeMirror leaves clear front-end fingerprints because it must ship JavaScript and CSS to the browser and because it generates a distinctive DOM structure. StackOptic analyzes a URL from the server side, inspecting the same HTML and asset references you can examine by hand with browser tools, curl, or a detection extension. Since CodeMirror is a client-side library, the strongest signals are its script and stylesheet URLs and the markup of the editor it creates.

The CodeMirror global and class names. In CodeMirror 5, the library exposes a CodeMirror global object on the page and wraps the editor in an element with the class CodeMirror, with many child elements carrying cm--prefixed classes (such as cm-keyword, cm-string, and cm-comment) and a .CodeMirror-lines container. Seeing the CodeMirror class or these cm- classes in the DOM is a strong tell. CodeMirror 6 similarly uses cm-editor, cm-content, cm-line, and related cm- classes, though it does not rely on a single global in the same way.

Asset filenames and CDN paths. CodeMirror is frequently loaded from a CDN, and the URLs are recognizable. CodeMirror 5 assets often appear as codemirror.js and codemirror.css (commonly served from a codemirror/ path on jsDelivr or cdnjs), along with mode and add-on files. CodeMirror 6 is shipped as bundled @codemirror/ packages, so you may see those package names in bundled source maps or module URLs. Requests to a codemirror/ path, or references to @codemirror/, are reliable indicators.

The editor DOM structure. CodeMirror builds a characteristic structure: a wrapper element, a scrollable area, a gutter for line numbers, and lines composed of styled token spans. Inspecting an on-page editor in DevTools and finding this nested cm- structure confirms the library even if asset URLs are bundled and obscured.

Bundled and self-hosted cases. Many modern sites bundle CodeMirror 6 into their application JavaScript, so there may be no neat codemirror.js request. In that case the rendered DOM classes (cm-editor, cm-content, cm-line) remain the dependable signal, since they appear in the live page regardless of how the code was bundled.

Here is how to check each signal yourself:

Method	What to do	What CodeMirror reveals
View Source	"View Page Source"	Links to codemirror.css/codemirror.js or a codemirror/ CDN path
Browser DevTools (Elements)	Inspect the editor element	The .CodeMirror wrapper (v5) or cm-editor/cm-content/cm-line classes (v6)
Browser DevTools (Console)	Type CodeMirror and press Enter	A defined CodeMirror global indicates CodeMirror 5
Browser DevTools (Network)	Filter requests for "codemirror"	Script/stylesheet requests to CodeMirror assets or packages
Wappalyzer / BuiltWith	Run on the page / look up the domain	Often reports "CodeMirror" under JavaScript libraries / editors

A quick console check is to type CodeMirror in DevTools: if it returns a function or object rather than an error, the page is running CodeMirror 5. To find assets, filter the Network tab for "codemirror." For the broader approach to spotting front-end libraries, see our guides on how to check what JavaScript libraries a website uses and how to find out what technology a website uses. Because an embedded editor usually signals a developer-facing application, pairing this with how to find out what programming language a website uses helps round out the picture of the back-end stack.

A note on reliability across versions improves detection. Because CodeMirror 6 is modular and usually bundled, the old trick of checking for a global CodeMirror object will not always work, and there may be no standalone codemirror.js file to spot in the Network tab. The DOM class names are the great equalizer here: both major versions render cm--prefixed classes, and v6's cm-editor and cm-content are present in the live page no matter how the JavaScript was packaged. The most dependable method is therefore to inspect an actual editor element on the page rather than to rely solely on asset URLs. Server-side analysis complements this by reading the raw HTML and asset references directly, and when an editor is only mounted after user interaction, combining the static asset signals with the rendered DOM classes yields a confident verdict.

Key Features

• Rich code editing in the browser. Syntax highlighting, line numbers, code folding, multiple selections, and configurable keyboard shortcuts.
• Broad language support. Highlighting and language intelligence for a very large number of programming and markup languages, via modes (v5) or Lezer language packages (v6).
• High performance on large documents. Viewport-based rendering means only visible lines are drawn, so large files stay responsive.
• Deep extensibility. A composable extension/add-on system for autocompletion, linting, search, bracket matching, and custom behavior.
• Theming. Built-in and custom CSS themes, with cm--prefixed classes that make styling predictable.
• Accessibility focus (v6). The CodeMirror 6 rewrite emphasizes accessibility, screen-reader support, and robust input handling.
• Modular packages (v6). Small @codemirror/ packages let applications bundle only the features they use, keeping payloads lean.

Pros and Cons

Pros

• A mature, battle-tested editor used across a huge range of web applications.
• Excellent performance even with very large documents thanks to viewport rendering.
• Highly extensible and themeable, with broad language coverage.
• Free and MIT-licensed, with no runtime fees and a strong community.

Cons

• The split between CodeMirror 5 and the rewritten CodeMirror 6 means two different APIs and migration effort for older projects.
• CodeMirror 6's modular design is powerful but has a steeper initial learning curve than a single drop-in script.
• For very heavy IDE-style features, some teams prefer the Monaco editor that powers VS Code.
• As a front-end library it adds JavaScript weight, so it must be bundled thoughtfully for performance-sensitive pages.

CodeMirror vs Alternatives

CodeMirror competes with other in-browser code editors. The table below clarifies its niche.

Editor	Origin/model	Strength	Best for
CodeMirror	Modular JS editor (v5 classic, v6 packages)	Lean, extensible, great for embedding	Editors inside web apps, playgrounds, docs
Monaco	The editor extracted from VS Code	Rich IDE features (IntelliSense-style)	Full IDE-like experiences in the browser
Ace	Long-standing in-browser editor	Stable, simple to embed	Established projects needing a solid editor
Textarea + highlighter	Plain field plus a highlight library	Minimal footprint	Simple snippets where full editing is unnecessary
Prism/Highlight.js	Read-only syntax highlighting	Lightweight display of code	Showing code, not editing it

If a page turns out to use a different editor or merely a highlighter, the same techniques identify it. Detecting CodeMirror is closely related to spotting other front-end dependencies, and pairing it with a check for a library like jQuery often reveals the broader front-end stack. Our guide on how to check what JavaScript libraries a website uses covers the full methodology.

Use Cases

CodeMirror appears wherever a website needs users to read or write code-like text in the browser. Online coding playgrounds and sandboxes use it as the core editing surface where users type HTML, CSS, JavaScript, or other languages and see results live. Web-based IDEs and cloud development environments embed it (or its peers) to provide a real editing experience without installing a desktop tool.

It is also pervasive in developer-facing dashboards and consoles: database query editors, API explorers, infrastructure and configuration panels (editing JSON, YAML, or SQL), and logging tools all rely on an embedded editor for syntax-aware input. Documentation platforms and technical blogs use it for editable, runnable code examples. Many content and CMS tools embed CodeMirror in their custom-HTML or custom-CSS fields so authors can edit snippets with highlighting. Education platforms that teach programming use it to let learners write and run code directly on the lesson page.

Consider a few concrete scenarios. A SaaS analytics product might embed CodeMirror so customers can write SQL queries against their data with syntax highlighting and autocompletion. A learn-to-code platform might give each exercise its own CodeMirror instance, checking the learner's submission in the browser. A documentation site for an API might present live, editable request bodies in CodeMirror so readers can experiment before copying the snippet. In every case the common thread is the need for a genuine, syntax-aware editing surface that runs entirely client-side.

From a technology-research standpoint, detecting CodeMirror on a site is a telling signal. It strongly indicates a developer-oriented or technically sophisticated product, an online tool, a coding platform, a data or DevOps console, rather than a simple brochure site. For vendors selling to developer-tool companies or analysts mapping the dev-tools landscape, that is valuable context, and identifying it automatically across many domains, instead of inspecting each page by hand, is exactly what a detection tool is designed to do.

Frequently Asked Questions

Is CodeMirror free to use?

Yes. CodeMirror is free and open source under the permissive MIT license, for both personal and commercial projects, with no runtime fees. Both the long-running CodeMirror 5 line and the modern CodeMirror 6 packages are openly licensed. This is a major reason it is so widely embedded across the web: developers can ship it inside commercial products without licensing concerns.

What is the difference between CodeMirror 5 and CodeMirror 6?

CodeMirror 5 is the original, long-running version with a traditional API, a global CodeMirror object, language "modes," and an add-on system. CodeMirror 6 is a ground-up rewrite delivered as small, composable @codemirror/ packages built on the Lezer parser system, with a stronger focus on extensibility, accessibility, and modern build tooling. They are not API-compatible, so migrating from 5 to 6 is a deliberate effort, and both versions remain in active use, which is why detection has to account for each.

How do I detect CodeMirror on a web page?

Open DevTools and inspect the editor element: CodeMirror 5 wraps it in a .CodeMirror element with cm--prefixed token classes, while CodeMirror 6 uses cm-editor, cm-content, and cm-line classes. In the Console, typing CodeMirror will return an object if the page runs CodeMirror 5. You can also filter the Network tab for "codemirror" to spot codemirror.js/codemirror.css or @codemirror/ packages. Tools like Wappalyzer and BuiltWith often report it under JavaScript libraries.

Is CodeMirror the same as the editor in VS Code?

No. The editor in Visual Studio Code, and in VS Code for the Web, is Monaco, a separate open-source project. CodeMirror is an independent, lighter-weight editor that predates Monaco's public release and is often chosen for embedding when a leaner, highly modular editor is preferable to Monaco's heavier, IDE-grade feature set. The two are competitors in the in-browser editor space, but they are distinct codebases.

Does CodeMirror work on mobile and touch devices?

CodeMirror 6 was rewritten with a strong emphasis on robust input handling, accessibility, and better support for touch devices and on-screen keyboards, improving the experience on phones and tablets compared with the older line. Code editing on small touchscreens is inherently challenging, but the modern version handles selection, scrolling, and input far more gracefully. Many responsive web apps embed CodeMirror precisely because it adapts to a range of devices.

Want to detect CodeMirror and the rest of a site's front-end stack instantly? Run any URL through StackOptic at https://stackoptic.com.