@codemirror/view

@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.

Similar packages

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.