Introduction
Scrivr is a canvas-based, paginated document editor built on ProseMirror and Yjs.
Scrivr is currently in beta. APIs may change between releases. We recommend pinning to an exact version and reviewing the changelog before upgrading.
What is Scrivr?
Scrivr is an open-source, canvas-rendered document editor framework. Unlike traditional
DOM-based rich-text editors, Scrivr renders its content directly onto <canvas> elements —
giving you pixel-perfect, paginated layouts with high performance virtual scrolling, without
fighting the browser's layout engine.
It is built upon four distinct architectural layers:
| Layer | Technology | Purpose |
|---|---|---|
| Model | ProseMirror | Immutable document tree, schema validation, and rich-text history. |
| Layout | Custom Engine | Computes pagination, line-breaking, and text measurement independent of the DOM. |
| Renderer | HTML5 Canvas | Paints the document directly onto <canvas> for pixel-perfect visual fidelity. |
| Input | Hidden <textarea> | Bridges browser keyboard and IME events safely to ProseMirror transactions. |
Package Overview
@scrivr/core
The headless engine — Editor orchestrator, ProseMirror schema, custom layout engine, canvas ViewManager, and all built-in extensions.
@scrivr/react
React bindings — useScrivrEditor hook, <Scrivr /> component, and contextual menus.
@scrivr/plugins
Optional extensions — AI Toolkit, Track Changes, and real-time collaboration via Yjs.
@scrivr/export
Export utilities — paginated PDF (via pdf-lib) and Markdown. DOCX coming soon.
@scrivr/vue
Coming Soon Vue 3 bindings — useScrivrEditor composable and <Scrivr /> component.
@scrivr/svelte
Coming Soon Svelte bindings — createScrivrEditor store and <Scrivr /> component.
Key Concepts at a Glance
Canvas rendering, not DOM. Every glyph, cursor, selection highlight, and overlay (ghost text, tracked changes) is drawn directly on an HTMLCanvasElement. The editor owns its own coordinate system — the browser's layout engine is only used for the outer scroll container.
Deterministic layout engine. Scrivr implements its own page and block layout algorithms. It handles word wrapping, font measurement, and pagination natively. Documents are visually identical across all browsers and devices.
Pages as first-class citizens. The document is broken into fixed-size pages (A4 by default). The ViewManager implements virtual scrolling, only painting pages in the viewport. You control page dimensions and margins through a simple PageConfig object.
Extension-first architecture. Almost every feature — headings, lists, links, collaboration — is an Extension. You compose only what you need via StarterKit or by listing extensions explicitly. This keeps bundle sizes lean.
One document model, multiple consumers. The ProseMirror EditorState is the single source of truth. The canvas renderer reads from it; Yjs syncs it across peers; the export layer serializes it. Nothing holds a shadow copy.