SuperDoc needs just two things to work:
new SuperDoc({
selector: '#editor', // Where to render
document: 'contract.docx' // What to load
})
Common configurations
Basic editing
new SuperDoc({
selector: '#editor',
document: 'contract.docx',
toolbar: '#toolbar',
user: {
name: 'John Smith',
email: '[email protected]'
}
})
Collaboration setup
new SuperDoc({
selector: '#editor',
document: 'proposal.docx',
user: {
name: 'Jane Doe',
email: '[email protected]'
},
modules: {
collaboration: {
url: 'wss://server.com'
},
comments: {
allowResolve: true
}
}
})
Review workflow
new SuperDoc({
selector: '#editor',
document: 'contract.docx',
documentMode: 'suggesting', // Track all changes
modules: {
comments: { allowResolve: false },
toolbar: {
groups: {
center: ['acceptChange', 'rejectChange']
}
}
}
})
Read-only viewer
new SuperDoc({
selector: '#viewer',
document: 'report.docx',
role: 'viewer',
toolbar: false
})
Configuration concepts
Document modes vs roles
Role = what user can do (permanent)
Mode = current editing state (changeable)
role: 'editor' // User CAN edit
documentMode: 'viewing' // Currently NOT editing
// Role always wins:
role: 'viewer' // User CANNOT edit
documentMode: 'editing' // Ignored - still view-only
Loading documents
// From URL
document: '/api/docs/123.docx'
// From file upload
document: fileInput.files[0]
// From blob (requires conversion)
const blob = await fetch('/api/doc').then(r => r.blob())
const file = new File([blob], 'document.docx', { type: blob.type })
document: file
// With metadata
document: {
id: 'doc-123',
type: 'docx',
data: fileObject // File or Blob
}
Modules
Modules add features. Enable only what you need:
modules: {
collaboration: { /* settings */ }, // Real-time editing
comments: { /* settings */ }, // Discussions
toolbar: { /* settings */ } // UI controls
}
Track Changes is controlled by documentMode (set to 'suggesting').
Learn about modules →
Full reference
Complete configuration API →