Methods

Methods are functions you call on the SuperDoc instance to perform actions.

Document operations

export

Export the document with various options.

options · Object

Export configuration

Hide properties

exportType · string[] · default: "['docx']"

Export formats

isFinalDoc · boolean · default: "false"

Replace fields with values

commentsType · string · default: "'external'"

Comment handling: ‘external’, ‘clean’, or custom

exportedName · string · default: "'document'"

Base filename

triggerDownload · boolean · default: "true"

Automatically trigger a browser file download. Set to false to get a Blob back without downloading.

fieldsHighlightColor · string · default: "'#FFFF00'"

Field highlight color

Returns: Promise<Blob> - Document blob

Usage

const blob = await superdoc.export({
  isFinalDoc: true,
  commentsType: 'clean',
});

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: async (superdoc) => {
    const blob = await superdoc.export({
      isFinalDoc: true,
      commentsType: 'clean',
    });
  },
});

save

Save document if in collaboration mode.

Returns: Promise<void>

Usage

await superdoc.save();

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: async (superdoc) => {
    await superdoc.save();
  },
});

getHTML

Get HTML content of all editors.

options · Object

HTML options

Show properties

unflattenLists · boolean · default: "false"

Preserve nested list structure

Returns: string[] - Array of HTML strings, one per editor

Usage

const htmlArray = superdoc.getHTML();

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const htmlArray = superdoc.getHTML();
    console.log(htmlArray);
  },
});

Mode control

setDocumentMode

Change the document mode.

mode · string · required

New document mode

Show Available modes

• 'viewing' - Read-only
• 'suggesting' - Track changes
• 'editing' - Normal editing

Usage

superdoc.setDocumentMode('suggesting');

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    superdoc.setDocumentMode('suggesting');
  },
});

lockSuperdoc

Lock or unlock the document.

isLocked · boolean · required

Lock state

lockedBy · User

User who locked the document

Usage

superdoc.lockSuperdoc(true, currentUser);

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    superdoc.lockSuperdoc(true, {
      name: 'Jane Smith',
      email: '[e-mail]',
    });
  },
});

setHighContrastMode

Enable/disable high contrast mode.

enabled · boolean · required

High contrast state

Usage

superdoc.setHighContrastMode(true);

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    superdoc.setHighContrastMode(true);
  },
});

UI methods

setActiveEditor

Set which editor is currently active. Useful when working with multiple documents.

editor · Editor · required

Editor instance to set as active

Usage

superdoc.setActiveEditor(editor);

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  documents: [doc1, doc2],
  onReady: (superdoc) => {
    // Switch to the second editor
    const editors = superdoc.state.documents;
    superdoc.setActiveEditor(editors[1].editor);
  },
});

setDisableContextMenu

Toggle the custom context menu at runtime.

disabled · boolean · default: "true"

Whether to disable the context menu

Usage

superdoc.setDisableContextMenu(true);

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    superdoc.setDisableContextMenu(true);
  },
});

setTrackedChangesPreferences

Override how tracked changes are rendered in the layout engine.

preferences · Object

Hide properties

mode · string

Rendering mode: 'review', 'original', 'final', or 'off'

enabled · boolean

Whether tracked change metadata is included

Usage

superdoc.setTrackedChangesPreferences({ mode: 'final' });

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    superdoc.setTrackedChangesPreferences({ mode: 'final' });
  },
});

toggleRuler

Toggle ruler visibility.

Usage

superdoc.toggleRuler();

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    superdoc.toggleRuler();
  },
});

togglePagination · string · deprecated

Removed in v1.0 — Pagination is now handled by the layout engine. Use viewOptions.layout in configuration instead.

getZoom

Get the current zoom level as a percentage.

Returns: number - Current zoom level (e.g., 100, 150, 200). Defaults to 100.

Usage

const zoom = superdoc.getZoom();

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const zoom = superdoc.getZoom();
    console.log(`Current zoom: ${zoom}%`);
  },
});

setZoom

Set the zoom level for all documents. Propagates to all presentation editors, PDF viewers, and whiteboard layers.

percent · number · required

Zoom level as a percentage (e.g., 100, 150, 200). Must be a positive finite number.

Usage

superdoc.setZoom(150);

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    superdoc.setZoom(150);

    superdoc.on('zoomChange', ({ zoom }) => {
      console.log(`Zoom changed to ${zoom}%`);
    });
  },
});

focus

Focus the active editor or first available.

Usage

superdoc.focus();

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    superdoc.focus();
  },
});

Search methods

search

Search for text or regex in active editor.

query · string | RegExp · required

Search query

Returns: Array<SearchResult> - Search matches

Usage

const results = superdoc.search('contract');
const regexResults = superdoc.search(/section \d+/gi);

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const results = superdoc.search('contract');
    console.log(`Found ${results.length} matches`);

    const regexResults = superdoc.search(/section \d+/gi);
  },
});

goToSearchResult

Navigate to a search result.

match · SearchResult · required

Search result to navigate to

Usage

superdoc.goToSearchResult(results[0]);

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const results = superdoc.search('contract');
    if (results.length) {
      superdoc.goToSearchResult(results[0]);
    }
  },
});

Comments methods

addCommentsList

Add a comments list to the specified element.

element · string | HTMLElement · required

Container for comments list

Usage

superdoc.addCommentsList('#comments-sidebar');

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    superdoc.addCommentsList('#comments-sidebar');
  },
});

removeCommentsList

Remove the comments list.

Usage

superdoc.removeCommentsList();

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    superdoc.removeCommentsList();
  },
});

User management

addSharedUser

Add a user to the shared users list.

user · User · required

User to add

Show User properties

name · string · required

Display name

email · string · required

Email address

Usage

superdoc.addSharedUser({
  name: 'Jane Smith',
  email: '[e-mail]',
});

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    superdoc.addSharedUser({
      name: 'Jane Smith',
      email: '[e-mail]',
    });
  },
});

removeSharedUser

Remove a user from shared users.

email · string · required

Email of user to remove

Usage

superdoc.removeSharedUser('[e-mail]');

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    superdoc.removeSharedUser('[e-mail]');
  },
});

Lifecycle

destroy

Completely destroy the SuperDoc instance.

This is irreversible. Cleans up all resources, events, and DOM.

Usage

superdoc.destroy();

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
});

// Later, when you're done with the editor:
superdoc.destroy();

Event methods

on

Subscribe to an event.

Usage

superdoc.on('ready', ({ superdoc }) => {
  console.log('SuperDoc ready');
});

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
});

superdoc.on('ready', ({ superdoc }) => {
  console.log('SuperDoc ready');
});

once

Subscribe to an event once.

Usage

superdoc.once('ready', () => {
  // Only called once
});

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
});

superdoc.once('ready', () => {
  console.log('SuperDoc ready (one-time)');
});

off

Unsubscribe from an event.

Usage

superdoc.off('ready', handler);

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
});

const handler = ({ superdoc }) => {
  console.log('SuperDoc ready');
};

superdoc.on('ready', handler);

// Later, unsubscribe:
superdoc.off('ready', handler);

Schema introspection

getSchemaIntrospection

Returns a JSON schema summary with all nodes, marks, and their attributes. Useful for AI agents that need schema context.

import { getSchemaIntrospection } from 'superdoc';

const schema = await getSchemaIntrospection({ mode: 'docx' });
// Returns: { version, nodes: [...], marks: [...] }

options · Object

Show properties

editor · Editor

Existing Editor instance to introspect. If provided, uses this instead of creating a temporary editor.

extensions · Array

Custom extensions to use when building the schema.

mode · string · default: "'docx'"

Editor mode: 'docx', 'html', or 'text'

TypeScript types

SuperDoc exports TypeScript interfaces for all node and mark types:

import type { NodeName, NodeAttrs, ParagraphAttrs } from 'superdoc/types';

// NodeName shows all 39 node types in autocomplete
type Test = NodeAttrs<'paragraph'>; // Resolves to ParagraphAttrs

Available types: NodeName, NodeAttrs<N>, MarkName, MarkAttrs<M>, and specific interfaces like ParagraphAttrs, TableAttrs, ImageAttrs, etc.

Properties

activeEditor

Currently active editor instance. Returns null before the ready event.

Usage

if (superdoc.activeEditor) {
  superdoc.activeEditor.commands.toggleBold();
}

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    if (superdoc.activeEditor) {
      superdoc.activeEditor.commands.toggleBold();
    }
  },
});

Always check for null before accessing.

Property	Type	Description
superdocId	string	Unique identifier for this instance
version	string	SuperDoc version number
activeEditor	Editor | null	Currently active editor
element	HTMLElement | null	Container DOM element
state	{ documents, users }	Current state snapshot
isLocked	boolean	Whether the document is locked
lockedBy	User | null	User who locked the document
isCollaborative	boolean	Whether collaboration is enabled
user	User	Current user information
users	User[]	All users with document access
toolbar	Toolbar | null	Toolbar instance if configured