<ReviseEditor />
Every prop on the editor component.
These docs are for version 2.3.x. See the latest version.
import ReviseEditor from "@reviseio/editor";
import "@reviseio/editor/style.css";Documents#
initialDocumentsreadonly ReviseDocumentInput[]Documents to open on mount. Each needs a host-owned id and a source:
DOCX, ODT, RTF, Markdown, plain text, or HTML (see input
formats). docx is accepted as the older name
for the same field. A document joining an
established collaborative room needs no
source.
activeDocumentIdstring | nullControlled active document. Pair with onActiveDocumentChange.
defaultActiveDocumentIdstring | nullInitial active document for uncontrolled use. Defaults to the first document.
Behavior#
currentUserEditorUserIdentity | nullIdentity attached to comments and suggestions the user authors.
role"editor" | "suggester" | "viewer"default: "editor"What this participant may do in every open document. Override per document
with ReviseDocumentInput.role. Unlike defaultDocumentMode, this is a
limit, not a starting point: a suggester cannot switch to editing mode, and
agent tool calls that would edit directly are refused.
See roles.
settingsReviseEditorSettingsBehavior settings. settings.trackedChanges.markupStyle: "word" switches
the canvas to classic Word-style redlines (all revisions in red, insertions
underlined, deletions struck through, no background tint);
settings.trackedChanges.showRemovalsInReview: true starts review with
deleted text visible inline. See tracked changes.
agentReviseAgentConfigBackend, credentials, model, or a custom transport for the delegated agent. See delegating to the Revise agent.
defaultDocumentMode"editing" | "suggesting" | "viewing"default: "editing"The mode each document opens in. This is not a controlled prop. Use
view.setDocumentMode() to change an open document.
defaultZoomnumber | 'fit-width'default: fit-widthInitial zoom.
defaultCommentsOpenbooleandefault: trueWhether the comments panel starts open.
autoFocusbooleandefault: trueTake keyboard focus when a document becomes active. Set false when the
editor sits inside a larger page and should wait for a click.
wasmHotPathsbooleandefault: falseOpt in to the Rust/WASM accelerations for word diff, agent text matching, and document statistics. The TypeScript implementations remain the fallback, so this changes speed only, not behavior.
fontsreadonly ReviseFontDefinition[]Fonts added to the native picker. Your app loads the font files.
onImageUpload(file: File, documentId: string) => Promise<string>Store an image the user inserts, pastes, or drops, and resolve to the URL the
document should reference — your CDN or object storage. Without it, images
are embedded in the document as data URLs, which export into the .docx like
any other image but make the document larger. A rejection shows the user a
notice and reaches onError. Files over 10 MB are refused before upload.
onImportFile(file: File, documentId: string) => voidShows Import before Export in the ribbon, with a file picker for DOCX, ODT, RTF, Markdown, HTML, text, and XML, and accepts a document file dropped anywhere on the editor, with a "Drop to import" overlay. Image drops still insert images. The editor only collects the file: what importing means, such as opening it as a new document, is up to you.
Chrome#
toolbarMode"native" | "compact" | "floating" | "none"default: "native""native" renders the full Revise ribbon. "compact" renders the
everyday-formatting subset, centered, for narrow fixed-width hosts (about
760px). "floating" renders the full ribbon as a centered card over the
canvas, as in the Revise app. "none" renders no toolbar.
showTitleBarbooleandefault: trueThe bar above the ribbon: editable title, optional mode toggle, Review.
showTabsbooleandefault: falseBuilt-in tab strip, one tab per open document.
findShortcut"editor" | "browser"default: "editor"Who handles Cmd/Ctrl+F. "editor" opens the built-in find-and-replace
panel. "browser" leaves the shortcut to the browser's native find. Use
"browser" when the editor is embedded in a longer page.
showDocumentModeTogglebooleandefault: falseShow the Editing/Suggesting toggle in the title bar.
onNewTab() => voidAdds a "+" button to the tab strip. Without it, no button renders.
Appearance#
theme"light" | "dark"Scoped to this editor. Defaults to the host page's theme.
canvasBackgroundstringThe area behind the page. Any CSS background.
pageBackgroundstringThe paper itself. Any CSS color.
pageBorderColorstringThe outline around each page. Any CSS color.
classNamestringstyleReact.CSSPropertiesCallbacks#
onReady(editor: ReviseEditorHandle) => voidFires once the editor is mounted. Store the handle here.
onDocumentReady(document: ReviseDocumentHandle) => voidFires once per document, after it has parsed and is ready to read or edit.
onChange(documentId: string, document: ReviseDocument) => voidFires on any content change, from the user, your UI, or an agent. Debounce before saving.
onDocumentsChange(state: ReviseDocumentCollectionState) => voidFires when the set of open documents changes.
onActiveDocumentChange(documentId: string | null) => voidonDocumentTitleChange(documentId: string, title: string) => voidonDocumentModeChange(documentId: string, mode: ReviseDocumentMode) => voidonZoomChange(documentId: string, zoom: ReviseZoom) => voidonAgentEvent(documentId: string, event: ReviseAgentEvent) => voidonAnalyticsEvent(event: string, properties?) => voidThe editor's internal instrumentation (tool invocations, exports, review interactions), delivered to your own analytics. These events leave the page only through this callback. Names and property shapes are internal and may change between versions.
telemetrybooleandefault: trueOnce per page load, the SDK sends Revise one anonymous ping with its version.
The browser adds your site's origin. From localhost and other
development hosts, only a daily count per version is kept, never the origin.
The ping contains no cookies, user data, or document content. Set false to turn it off. See
license. The ping is the SDK's only report to Revise.
It still downloads assets from https://revise.io when first needed (math
fonts, PDF export fonts, the PDF import worker); setAssetBaseUrl() points
it at your own mirror. An agent, if you
configure one, talks only to the backend you chose.
onError(error: Error, documentId?: string) => voidParse failures and runtime errors. A document that fails to open also shows
status: "error" in the collection state.
Helpers#
createEmptyDocx()Promise<Blob>Returns a blank DOCX. Use it for "New document" actions.
import { createEmptyDocx } from "@reviseio/editor";