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 mountselector: '#editor'
// or
selector: document.querySelector('.my-editor')
document
Document | string | File
required
Document to load
Object - With id, type, data properties (data must be File, not Blob)string - URL to fetchFile - From file input
Use documents array for multiple documents instead
Blob objects are not supported. You must convert Blobs to File objects first.
Multiple documents to load (alternative to single document)documents: [
{ id: 'doc-1', type: 'docx', data: fileObject },
{ id: 'doc-2', type: 'pdf', url: 'report.pdf' }
]
File - From file input (e.g., from <input type="file">)string (URL) - To fetch the document
Unique identifier for this SuperDoc instanceAuto-generated UUID if not provided
User & Permissions
All users with document access. Used for @mentions and collaboration.
User permission level
editor - Full editing capabilitiesviewer - Read-only accesssuggester - Can only suggest changes
Role overrides documentMode when more restrictive
documentMode
string
default:"'editing'"
Initial document mode
editing - Normal editingviewing - Read-only displaysuggesting - Track changes enabled
Modules
Configure optional modules
Collaboration Module
Real-time collaboration settings
providerType
string
default:"'hocuspocus'"
Provider implementation
Additional connection parameters
Comments system configuration
DOM element for comments list
Toolbar configuration
groups
string[]
default:"['left', 'center', 'right']"
Layout groups
Container-based responsive sizing
Appearance
title
string
default:"'SuperDoc'"
Document title for exports and display
Colors for user awareness and highlightingBuilt-in palette provided by default
DOM element for toolbarAlternative to modules.toolbar.selector
Advanced Options
Additional SuperDoc extensions
Learn how to create your own extensions
here.
Custom image upload handlerhandleImageUpload: 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;
}
suppressDefaultDocxStyles
Prevent default DOCX styles from being applied
Disable custom context menus
Content Security Policy nonce
Event Handlers
All handlers are optional functions in the configuration:
Called when SuperDoc is readyonReady: ({ superdoc }) => {
console.log('Ready');
}
Called when editor is createdonEditorCreate: ({ editor }) => {
editor.focus();
}
Called on content changesonEditorUpdate: ({ editor }) => {
autoSave(editor.getJSON());
}
