# ProseMirror — Toolkit for Building Rich Text Editors

> A modular set of JavaScript packages for building custom rich text editors with a structured document model and collaborative editing support.

## Install

Save as a script file and run:

# ProseMirror — Toolkit for Building Rich Text Editors

## Quick Use
```bash
npm install prosemirror-state prosemirror-view prosemirror-model prosemirror-schema-basic prosemirror-example-setup
```
```javascript
import { EditorState } from "prosemirror-state";
import { EditorView } from "prosemirror-view";
import { schema } from "prosemirror-schema-basic";
import { exampleSetup } from "prosemirror-example-setup";

const state = EditorState.create({
  schema,
  plugins: exampleSetup({ schema })
});
new EditorView(document.querySelector("#editor"), { state });
```

## 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/

---
Source: https://tokrepo.com/en/workflows/asset-a0c434c6
Author: Script Depot