SuperEditor configuration gives you low-level control over the DOCX engine.

​
Quick Start

new SuperEditor({
  selector: '#editor',
  fileSource: docxFile,
  documentId: 'doc-123',
  options: { /* configuration */ }
})

​
Core Parameters

​
selector
string | HTMLElement
required
DOM selector or element where the editor will mount
selector: '#editor'
// or
selector: document.querySelector('.my-editor')
​
fileSource
File | Blob | string | ArrayBuffer
required
The DOCX file to load
​
documentId
string
required
Unique identifier for this document instance. Used for collaboration and storage.
​
options
Object
Configuration options object

​
Options Configuration

​
Modes & Permissions

​
options.mode
string
default:"'docx'"
Editor rendering mode
​
options.documentMode
string
default:"'editing'"
Current editing state
​
options.role
string
default:"'editor'"
User permission level. Overrides documentMode when more restrictive.
Role always wins over documentMode in permission conflicts
​
options.editable
boolean
default:"true"
Whether the editor accepts input

​
User & Collaboration

​
options.user
Object
Current user information
​
options.users
Array<User>
default:"[]"
All users with document access. Used for @mentions and awareness.
​
options.ydoc
Y.Doc
Yjs document for real-time collaboration
​
options.collaborationProvider
HocuspocusProvider
Provider instance for collaboration sync

​
Content Initialization

​
options.content
string | Object
default:"''"
XML content string or JSON for initialization
​
options.html
string
Initialize with HTML content (overrides DOCX)
​
options.markdown
string
Initialize with Markdown (converts to document)
​
options.jsonOverride
Object
Use JSON content instead of DOCX parsing
See full JSON schema here.
​
options.loadFromSchema
boolean
default:"false"
Load content directly from schema JSON
​
options.isNewFile
boolean
default:"false"
Whether this is a newly created document

​
Extensions & Plugins

​
options.extensions
Array<Extension>
default:"[]"
SuperDoc extensions to load
Default extensions include all DOCX features.
​
options.externalExtensions
Array<Extension>
default:"[]"
Additional external extensions to register
Learn how to create your own extensions here.
​
options.editorProps
Object
default:"{}"
Direct ProseMirror EditorProps configuration
​
options.parseOptions
Object
default:"{}"
ProseMirror parse options
​
options.coreExtensionOptions
Object
default:"{}"
Options for built-in extensions
​
options.enableInputRules
boolean
default:"true"
Enable input rules (auto-formatting)

​
Features

​
options.isCommentsEnabled
boolean
default:"false"
Enable comments system
​
options.annotations
boolean
default:"false"
Enable field annotations
​
options.pagination
boolean
default:"false"
Enable page-based layout
​
options.isHeaderOrFooter
boolean
default:"false"
Whether this is a header/footer editor
​
options.isChildEditor
boolean
default:"false"
Whether this is a child editor instance

​
Styling

​
options.colors
Array<string>
default:"[]"
Available colors for highlighting and formatting
​
options.fonts
Object
default:"{}"
Font configuration and embedded fonts
​
options.suppressDefaultDocxStyles
boolean
default:"false"
Prevent default DOCX styles from being applied
​
options.scale
number
default:"1"
Editor zoom/scale factor

​
Advanced Options

​
options.isHeadless
boolean
default:"false"
Run without DOM (server-side processing)
​
options.handleImageUpload
function
Custom image upload handler
handleImageUpload: async (file) => {
  const url = await uploadToS3(file);
  return url;
}
​
options.converter
SuperConverter
Pre-configured converter instance
​
options.initialState
EditorState
Initial ProseMirror state
​
options.media
Object
default:"{}"
Media file mappings
​
options.mediaFiles
Object
default:"{}"
Media blob data
​
options.telemetry
Object
Telemetry configuration for usage tracking
​
options.numbering
Object
default:"{}"
List numbering configuration

​
Configuration Patterns

​
Headless Processing

new SuperEditor({
  selector: document.createElement('div'),
  fileSource: docxBlob,
  documentId: 'processing',
  options: {
    isHeadless: true,
    onCreate: ({ editor }) => {
      const html = editor.getHTML();
      // Process document...
      editor.destroy();
    }
  }
})

​
Custom Collaboration

new SuperEditor({
  selector: '#editor',
  fileSource: docxFile,
  documentId: roomId,
  options: {
    ydoc: new Y.Doc(),
    collaborationProvider: new HocuspocusProvider({
      url: 'wss://collab.example.com',
      name: roomId
    }),
    user: currentUser,
    users: roomUsers
  }
})

​
Track Changes Mode

new SuperEditor({
  selector: '#editor',
  fileSource: docxFile,
  documentId: 'review-doc',
  options: {
    documentMode: 'suggesting',
    user: reviewer,
    onCreate: ({ editor }) => {
      editor.commands.enableTrackChanges();
    }
  }
})

​
Custom Extensions

new SuperEditor({
  selector: '#editor',
  fileSource: docxFile,
  documentId: 'doc-123',
  options: {
    extensions: [
      Bold.configure({ HTMLAttributes: { class: 'custom-bold' } }),
      MyCustomExtension
    ],
    editorProps: {
      attributes: {
        class: 'prose max-w-none'
      }
    }
  }
})