@scrivr/core
The headless engine — Editor orchestrator, ProseMirror schema, layout engine, canvas ViewManager, and all built-in extensions.
@scrivr/core is the foundation of every Scrivr editor. It contains the headless Editor class,
the custom layout engine, the canvas ViewManager, and all built-in document extensions.
It has no React dependency and can be used in any JavaScript environment.
Installation
pnpm add @scrivr/corenpm install @scrivr/coreyarn add @scrivr/coreEditor
The Editor class is the central orchestrator. It owns the ProseMirror EditorState, drives the layout engine,
and exposes a commands API for document mutations.
import { Editor, StarterKit } from '@scrivr/core';
const editor = new Editor({
extensions: [StarterKit],
onChange: (state) => console.log('state changed', state),
});
// Attach to a DOM container
editor.mount(document.getElementById('editor')!);
// Tear down on unmount
editor.destroy();See the full Editor API reference.
StarterKit
StarterKit is a convenience extension that bundles every commonly needed node and mark:
| Included | Type |
|---|---|
Paragraph | Block node |
Heading (levels 1–6) | Block node |
BulletList, OrderedList, ListItem | Block nodes |
HardBreak | Inline node |
Bold, Italic, Underline, Strikethrough | Marks |
Highlight | Mark |
Color | Mark |
FontSize | Mark |
FontFamily | Mark |
Link | Mark |
CodeBlock | Block node |
Image | Inline node |
HorizontalRule | Block node |
Alignment | Extension |
History (undo/redo) | Extension |
Pagination | Extension |
Typography | Extension |
TrailingNode | Extension |
import { Editor, StarterKit } from '@scrivr/core';
const editor = new Editor({ extensions: [StarterKit] });You can also use StarterKit with options to disable individual pieces:
StarterKit.configure({
heading: { levels: [1, 2, 3] },
codeBlock: false,
})Extensions
Every feature in Scrivr is an Extension. You can compose only what you need:
import { Editor, Paragraph, Heading, Bold, History } from '@scrivr/core';
const editor = new Editor({
extensions: [
Paragraph,
Heading.configure({ levels: [1, 2] }),
Bold,
History,
],
});See Built-in Nodes and Custom Extensions for a complete reference.
PageConfig
Control page dimensions and margins via pageConfig. All values are in pixels at 96 dpi.
const editor = new Editor({
extensions: [StarterKit],
pageConfig: {
pageWidth: 794, // A4 width (~210 mm)
pageHeight: 1123, // A4 height (~297 mm)
margins: { top: 72, right: 72, bottom: 72, left: 72 }, // ¾-inch margins
},
});| Property | Default | Description |
|---|---|---|
pageWidth | 794 | Page width in px |
pageHeight | 1123 | Page height in px |
margins.top | 72 | Top margin in px |
margins.right | 72 | Right margin in px |
margins.bottom | 72 | Bottom margin in px |
margins.left | 72 | Left margin in px |
Commands
editor.commands is the primary way to mutate the document:
editor.commands.toggleBold();
editor.commands.setHeading2();
editor.commands.undo();
editor.commands.redo();ViewManager
ViewManager is the canvas renderer. In React you will never construct it directly — <Scrivr /> handles
that. In headless contexts (tests, SSR pre-rendering) you can instantiate it directly:
import { ViewManager } from '@scrivr/core';
const vm = new ViewManager(editor, containerElement);
vm.destroy();See the full ViewManager reference.