Configuration is passed when creating a SuperDoc instance. Only two fields are required.

​
Quick Start

new SuperDoc({
  selector: '#editor',        // Required: Where to render
  document: 'contract.docx'   // Required: What to load
})

​
Core Parameters

​
selector
string | HTMLElement
required
DOM selector or element where SuperDoc will mount
selector: '#editor'
// or
selector: document.querySelector('.my-editor')
​
document
Document | string | File
required
Document to load
Use documents array for multiple documents instead
​
documents
Document[]
Multiple documents to load (alternative to single document)
documents: [
  { id: 'doc-1', type: 'docx', data: docxBlob },
  { id: 'doc-2', type: 'pdf', url: 'report.pdf' }
]
​
superdocId
string
Unique identifier for this SuperDoc instance
Auto-generated UUID if not provided

​
User & Permissions

​
user
Object
Current user information
​
users
User[]
default:"[]"
All users with document access. Used for @mentions and collaboration.
​
role
string
default:"'editor'"
User permission level
Role overrides documentMode when more restrictive
​
documentMode
string
default:"'editing'"
Initial document mode

​
Modules

​
modules
Object
Configure optional modules

​
Collaboration Module

​
modules.collaboration
Object
Real-time collaboration settings

​
Comments Module

​
modules.comments
Object
Comments system configuration

​
Toolbar Module

​
modules.toolbar
Object
Toolbar configuration

​
Appearance

​
title
string
default:"'SuperDoc'"
Document title for exports and display
​
colors
string[]
Colors for user awareness and highlighting
Built-in palette provided by default
​
pagination
boolean
default:"false"
Enable page-based layout
​
rulers
boolean
default:"false"
Show document rulers
​
toolbar
string | HTMLElement
DOM element for toolbar
Alternative to modules.toolbar.selector

​
Advanced Options

​
editorExtensions
Extension[]
default:"[]"
Additional SuperDoc extensions
Learn how to create your own extensions here.
​
handleImageUpload
function
Custom image upload handler
handleImageUpload: async (file) => {
  const formData = new FormData();
  formData.append('image', file);
  const response = await fetch('/upload', { 
    method: 'POST', 
    body: formData 
  });
  const { url } = await response.json();
  return url;
}
​
telemetry
Object
Telemetry configuration
​
suppressDefaultDocxStyles
boolean
default:"false"
Prevent default DOCX styles from being applied
​
disableContextMenu
boolean
default:"false"
Disable custom context menus
​
cspNonce
string
Content Security Policy nonce

​
Event Handlers

All handlers are optional functions in the configuration:
​
onReady
function
Called when SuperDoc is ready
onReady: ({ superdoc }) => {
  console.log('Ready');
}
​
onEditorCreate
function
Called when editor is created
onEditorCreate: ({ editor }) => {
  editor.focus();
}
​
onEditorUpdate
function
Called on content changes
onEditorUpdate: ({ editor }) => {
  autoSave(editor.getJSON());
}
See Events for complete list.