Configuration

All props are passed directly to the <SuperDocEditor> component. Only document is required.

Quick start

<SuperDocEditor
  document={file}
  documentMode="editing"
  user={{ name: 'Jane', email: '[e-mail]' }}
  onReady={({ superdoc }) => console.log('Ready', superdoc)}
/>

Document props

document · File | Blob | string | object · required

Document to load. Accepts a File, Blob, URL string, or config object.

Show Config object format

{
  "id": "doc-123",
  "type": "docx",
  "data": File,
  "url": "https://example.com/doc.docx"
}

Use data for local files and url for remote files.

documentMode · 'editing' | 'viewing' | 'suggesting' · default: "'editing'"

Initial editing mode.

Mode	Description
editing	Full editing capabilities
viewing	Read-only presentation
suggesting	Track changes mode

Changing documentMode via props is efficient — the component calls setDocumentMode() internally without rebuilding.

role · 'editor' | 'viewer' | 'suggester' · default: "'editor'"

User’s permission level.

Role	Can Edit	Can Suggest	Can View
editor	Yes	Yes	Yes
suggester	No	Yes	Yes
viewer	No	No	Yes

User props

user · { name: string, email: string, image?: string }

Current user information.

users · Array<{ name: string, email: string, image?: string }>

All users (used for @-mentions).

UI props

id · string

Custom container ID. Auto-generated if not provided.

hideToolbar · boolean · default: "false"

Hide the toolbar.

rulers · boolean

Show or hide rulers. Uses SuperDoc default if not set.

className · string

CSS class for the wrapper element.

style · CSSProperties

Inline styles for the wrapper element.

renderLoading · () => ReactNode

Custom loading UI rendered while SuperDoc initializes.

<SuperDocEditor
  document={file}
  renderLoading={() => <div className="spinner">Loading...</div>}
/>

Event callbacks

onReady · ({ superdoc }) => void

Fires when the editor is initialized and ready.

onEditorCreate · ({ editor }) => void

Fires when the ProseMirror editor instance is created.

onEditorDestroy · () => void

Fires when the editor is destroyed.

onEditorUpdate · ({ editor }) => void

Fires when the document content changes.

onContentError · ({ error, editor, documentId, file }) => void

Fires on document parsing errors.

onException · ({ error }) => void

Fires on runtime errors.

Advanced props

modules · object

Configure collaboration, AI, comments, PDF, whiteboard, and other modules.

<SuperDocEditor
  document={file}
  modules={{
    collaboration: { ydoc, provider },
    whiteboard: { enabled: true },
  }}
/>

The component extends SuperDocConfig — any option from the core configuration can be passed as a prop.

Props that trigger rebuild

These props trigger a full instance rebuild when changed:

Prop	Reason
document	New document to load
user	User identity changed
users	Users list changed
modules	Module configuration changed
role	Permission level changed
hideToolbar	Toolbar visibility changed

Other props like documentMode and callbacks are handled efficiently without rebuild.