@codemirror/view

What is @codemirror/view?

The @codemirror/view package is a part of the CodeMirror 6 code editor ecosystem. It provides the view layer for the editor, which is responsible for rendering the document and handling user interactions. It is designed to be extensible and customizable, allowing developers to create sophisticated code editing interfaces.

What are @codemirror/view's main functionalities?

Editor View Creation

This feature allows you to create a new editor view and attach it to the DOM. The 'parent' option specifies the DOM element to which the editor should be appended.

import { EditorView } from '@codemirror/view';

const view = new EditorView({
  parent: document.body
});

Customizing the Appearance

This feature enables customization of the editor's appearance using decorations and extensions, such as highlighting special characters, drawing selections, and showing a drop cursor.

import { EditorView, highlightSpecialChars, drawSelection, dropCursor } from '@codemirror/view';

const view = new EditorView({
  parent: document.body,
  decorations: EditorView.decorations.of(highlightSpecialChars()),
  extensions: [drawSelection(), dropCursor()]
});

Handling User Input

This feature involves handling user input through keymaps, which define how keyboard events are handled. The 'defaultKeymap' provides a set of standard key bindings for common editor actions.

import { EditorView, keymap } from '@codemirror/view';
import { defaultKeymap } from '@codemirror/commands';

const view = new EditorView({
  parent: document.body,
  extensions: [keymap.of(defaultKeymap)]
});

Other packages similar to @codemirror/view

monaco-editor

Monaco Editor is the code editor that powers VS Code. It offers rich IntelliSense, validation, and advanced editing features. Compared to @codemirror/view, Monaco is a full-featured editor with a larger bundle size and is less modular.

ace

Ace is a standalone code editor written in JavaScript. It provides syntax highlighting, themes, and extensions. While Ace is also extensible and customizable, @codemirror/view is part of a newer generation of editors with a more modern and modular architecture.

codemirror

CodeMirror (version 5 and below) is the predecessor to @codemirror/view. It is a versatile text editor implemented in JavaScript for the browser. Compared to @codemirror/view, it is less modular and not as optimized for performance and extensibility in modern web applications.

README

@codemirror/view

[ WEBSITE | DOCS | ISSUES | FORUM | CHANGELOG ]

This package implements the DOM view component for the CodeMirror code editor.

The project page has more information, a number of examples and the documentation.

This code is released under an MIT license.

We aim to be an inclusive, welcoming community. To make that explicit, we have a code of conduct that applies to communication around the project.

Usage

import {EditorView} from "@codemirror/view"
import {basicSetup} from "codemirror"

const view = new EditorView({
  parent: document.querySelector("#some-node"),
  doc: "Content text",
  extensions: [basicSetup /* ... */]
})

Add additional extensions, such as a language mode, to configure the editor. Call view.dispatch to update the editor's state.

Changelog

6.36.2 (2025-01-09)

Bug fixes

Fix an issue where some kinds of relayouts could put the editor in a state where it believed it wasn't in window, preventing relayout, though it in fact was.

Make sure macOS double-space-to-period conversions are properly suppressed.

Fix an issue where native selection changes, such as mobile spacebar-drag, weren't being picked up in edit context mode.