ProseMirror — Toolkit for Building Rich Text Editors

Introduction

ProseMirror is a toolkit for building rich text editors on the web. Rather than providing a ready-made editor, it gives developers a set of low-level modules for document modeling, state management, view rendering, and collaborative editing. This approach allows full control over the editing experience while handling the hard problems of contenteditable.

What ProseMirror Does

• Defines documents as structured trees of typed nodes with explicit schemas
• Manages editor state as an immutable value updated through transactions
• Renders the document to the DOM and maps user input back to model operations
• Supports real-time collaborative editing through operational transformation
• Provides a plugin system for extending behavior with keymaps, decorations, and input rules

Architecture Overview

ProseMirror separates concerns into independent packages. prosemirror-model defines the document schema and node types. prosemirror-state holds the current document, selection, and plugin states as an immutable value. prosemirror-view handles DOM rendering and user input. prosemirror-transform provides the step-based transformation system that enables undo/redo and collaboration. Each package can be used independently, and custom schemas can enforce any document structure.

Self-Hosting & Configuration

• Install individual prosemirror packages from npm based on the features you need
• Define a custom schema to control which node and mark types your editor supports
• Use prosemirror-example-setup for a quick starting point with common plugins
• Add keybindings, input rules, and menu items through the plugin API
• No server-side component required for basic single-user editing

Key Features

• Schema-driven document model that validates structure at edit time
• Immutable state with a transaction system that makes changes predictable
• Collaborative editing via the prosemirror-collab module with operational transformation
• Decoration system for adding widgets, inline highlights, and node-level UI
• Used as the foundation for TipTap, Remirror, and BlockNote editors

Comparison with Similar Tools

• TipTap — Opinionated wrapper around ProseMirror with extensions and Vue/React support; ProseMirror is the lower-level toolkit underneath
• Slate — React-based editor framework with a different data model; ProseMirror is framework-agnostic and uses its own rendering
• Lexical — Meta's editor framework optimized for React; ProseMirror predates it and has a larger ecosystem of plugins
• Draft.js — Facebook's earlier React editor; ProseMirror offers stronger schema enforcement and collaboration primitives

FAQ

Q: Is ProseMirror an editor or a framework? A: It is a toolkit. You assemble an editor from its modules, choosing exactly which features to include and how the UI works.

Q: How does collaborative editing work? A: The prosemirror-collab module tracks local and remote steps. A central authority server rebases concurrent changes using operational transformation.

Q: Can I use ProseMirror with React? A: Yes. You can mount the EditorView inside a React component. Libraries like TipTap and Remirror provide React-specific abstractions on top.

Q: Why are there so many packages? A: ProseMirror follows a modular design. Each package handles one concern (model, state, view, commands, history, etc.) so you only include what you need.

Sources

• https://github.com/ProseMirror/prosemirror
• https://prosemirror.net/docs/guide/