> ## Documentation Index
> Fetch the complete documentation index at: https://superdoc-nick-sd-2070-add-content-controls-namespace-to-doc.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Methods

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

## Document operations

### `export`

Export the document with various options.

<ParamField path="options" type="Object">
  Export configuration

  <Expandable title="properties" defaultOpen>
    <ParamField path="exportType" type="string[]" default="['docx']">
      Export formats
    </ParamField>

    <ParamField path="isFinalDoc" type="boolean" default="false">
      Replace fields with values
    </ParamField>

    <ParamField path="commentsType" type="string" default="'external'">
      Comment handling: 'external', 'clean', or custom
    </ParamField>

    <ParamField path="exportedName" type="string" default="'document'">
      Base filename
    </ParamField>

    <ParamField path="triggerDownload" type="boolean" default="true">
      Automatically trigger a browser file download. Set to `false` to get a `Blob` back without downloading.
    </ParamField>

    <ParamField path="fieldsHighlightColor" type="string" default="'#FFFF00'">
      Field highlight color
    </ParamField>
  </Expandable>
</ParamField>

**Returns:** `Promise<Blob>` - Document blob

<CodeGroup>
  ```javascript Usage theme={null}
  const blob = await superdoc.export({
    isFinalDoc: true,
    commentsType: 'clean',
  });
  ```

  ```javascript Full Example theme={null}
  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',
      });
    },
  });
  ```
</CodeGroup>

### `save`

Save document if in collaboration mode.

**Returns:** `Promise<void>`

<CodeGroup>
  ```javascript Usage theme={null}
  await superdoc.save();
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

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

### `getHTML`

Get HTML content of all editors.

<ParamField path="options" type="Object">
  HTML options

  <Expandable title="properties">
    <ParamField path="unflattenLists" type="boolean" default="false">
      Preserve nested list structure
    </ParamField>
  </Expandable>
</ParamField>

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

<CodeGroup>
  ```javascript Usage theme={null}
  const htmlArray = superdoc.getHTML();
  ```

  ```javascript Full Example theme={null}
  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);
    },
  });
  ```
</CodeGroup>

## Mode control

### `setDocumentMode`

Change the document mode.

<ParamField path="mode" type="string" required>
  New document mode

  <Expandable title="Available modes">
    * `'viewing'` - Read-only
    * `'suggesting'` - Track changes
    * `'editing'` - Normal editing
  </Expandable>
</ParamField>

<CodeGroup>
  ```javascript Usage theme={null}
  superdoc.setDocumentMode('suggesting');
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

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

### `lockSuperdoc`

Lock or unlock the document.

<ParamField path="isLocked" type="boolean" required>
  Lock state
</ParamField>

<ParamField path="lockedBy" type="User">
  User who locked the document
</ParamField>

<CodeGroup>
  ```javascript Usage theme={null}
  superdoc.lockSuperdoc(true, currentUser);
  ```

  ```javascript Full Example theme={null}
  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: 'jane@example.com',
      });
    },
  });
  ```
</CodeGroup>

### `setHighContrastMode`

Enable/disable high contrast mode.

<ParamField path="enabled" type="boolean" required>
  High contrast state
</ParamField>

<CodeGroup>
  ```javascript Usage theme={null}
  superdoc.setHighContrastMode(true);
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

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

## UI methods

### `setActiveEditor`

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

<ParamField path="editor" type="Editor" required>
  Editor instance to set as active
</ParamField>

<CodeGroup>
  ```javascript Usage theme={null}
  superdoc.setActiveEditor(editor);
  ```

  ```javascript Full Example theme={null}
  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);
    },
  });
  ```
</CodeGroup>

### `setDisableContextMenu`

Toggle the custom context menu at runtime.

<ParamField path="disabled" type="boolean" default="true">
  Whether to disable the context menu
</ParamField>

<CodeGroup>
  ```javascript Usage theme={null}
  superdoc.setDisableContextMenu(true);
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

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

### `setTrackedChangesPreferences`

Override how tracked changes are rendered in the layout engine.

<ParamField path="preferences" type="Object">
  <Expandable title="properties" defaultOpen>
    <ParamField path="mode" type="string">
      Rendering mode: `'review'`, `'original'`, `'final'`, or `'off'`
    </ParamField>

    <ParamField path="enabled" type="boolean">
      Whether tracked change metadata is included
    </ParamField>
  </Expandable>
</ParamField>

<CodeGroup>
  ```javascript Usage theme={null}
  superdoc.setTrackedChangesPreferences({ mode: 'final' });
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

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

### `toggleRuler`

Toggle ruler visibility.

<CodeGroup>
  ```javascript Usage theme={null}
  superdoc.toggleRuler();
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

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

<ParamField path="togglePagination" type="string" deprecated>
  <Warning>**Removed in v1.0** — Pagination is now handled by the layout engine. Use `viewOptions.layout` in [configuration](/core/superdoc/configuration) instead.</Warning>
</ParamField>

### `getZoom`

Get the current zoom level as a percentage.

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

<CodeGroup>
  ```javascript Usage theme={null}
  const zoom = superdoc.getZoom();
  ```

  ```javascript Full Example theme={null}
  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}%`);
    },
  });
  ```
</CodeGroup>

### `setZoom`

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

<ParamField path="percent" type="number" required>
  Zoom level as a percentage (e.g., `100`, `150`, `200`). Must be a positive finite number.
</ParamField>

<CodeGroup>
  ```javascript Usage theme={null}
  superdoc.setZoom(150);
  ```

  ```javascript Full Example theme={null}
  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}%`);
      });
    },
  });
  ```
</CodeGroup>

### `focus`

Focus the active editor or first available.

<CodeGroup>
  ```javascript Usage theme={null}
  superdoc.focus();
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

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

## Search methods

### `search`

Search for text or regex in active editor.

<ParamField path="query" type="string | RegExp" required>
  Search query
</ParamField>

**Returns:** `Array<SearchResult>` - Search matches

<CodeGroup>
  ```javascript Usage theme={null}
  const results = superdoc.search('contract');
  const regexResults = superdoc.search(/section \d+/gi);
  ```

  ```javascript Full Example theme={null}
  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);
    },
  });
  ```
</CodeGroup>

### `goToSearchResult`

Navigate to a search result.

<ParamField path="match" type="SearchResult" required>
  Search result to navigate to
</ParamField>

<CodeGroup>
  ```javascript Usage theme={null}
  superdoc.goToSearchResult(results[0]);
  ```

  ```javascript Full Example theme={null}
  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]);
      }
    },
  });
  ```
</CodeGroup>

## Comments methods

### `addCommentsList`

Add a comments list to the specified element.

<ParamField path="element" type="string | HTMLElement" required>
  Container for comments list
</ParamField>

<CodeGroup>
  ```javascript Usage theme={null}
  superdoc.addCommentsList('#comments-sidebar');
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

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

### `removeCommentsList`

Remove the comments list.

<CodeGroup>
  ```javascript Usage theme={null}
  superdoc.removeCommentsList();
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

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

## User management

### `addSharedUser`

Add a user to the shared users list.

<ParamField path="user" type="User" required>
  User to add

  <Expandable title="User properties">
    <ParamField path="name" type="string" required>
      Display name
    </ParamField>

    <ParamField path="email" type="string" required>
      Email address
    </ParamField>
  </Expandable>
</ParamField>

<CodeGroup>
  ```javascript Usage theme={null}
  superdoc.addSharedUser({
    name: 'Jane Smith',
    email: 'jane@example.com',
  });
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      superdoc.addSharedUser({
        name: 'Jane Smith',
        email: 'jane@example.com',
      });
    },
  });
  ```
</CodeGroup>

### `removeSharedUser`

Remove a user from shared users.

<ParamField path="email" type="string" required>
  Email of user to remove
</ParamField>

<CodeGroup>
  ```javascript Usage theme={null}
  superdoc.removeSharedUser('jane@example.com');
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
    document: yourFile,
    onReady: (superdoc) => {
      superdoc.removeSharedUser('jane@example.com');
    },
  });
  ```
</CodeGroup>

## Lifecycle

### `destroy`

Completely destroy the SuperDoc instance.

<Warning>This is irreversible. Cleans up all resources, events, and DOM.</Warning>

<CodeGroup>
  ```javascript Usage theme={null}
  superdoc.destroy();
  ```

  ```javascript Full Example theme={null}
  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();
  ```
</CodeGroup>

## Event methods

### `on`

Subscribe to an event.

<CodeGroup>
  ```javascript Usage theme={null}
  superdoc.on('ready', ({ superdoc }) => {
    console.log('SuperDoc ready');
  });
  ```

  ```javascript Full Example theme={null}
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

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

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

### `once`

Subscribe to an event once.

<CodeGroup>
  ```javascript Usage theme={null}
  superdoc.once('ready', () => {
    // Only called once
  });
  ```

  ```javascript Full Example theme={null}
  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)');
  });
  ```
</CodeGroup>

### `off`

Unsubscribe from an event.

<CodeGroup>
  ```javascript Usage theme={null}
  superdoc.off('ready', handler);
  ```

  ```javascript Full Example theme={null}
  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);
  ```
</CodeGroup>

## Schema introspection

### `getSchemaIntrospection`

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

```javascript theme={null}
import { getSchemaIntrospection } from 'superdoc';

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

<ParamField path="options" type="Object">
  <Expandable title="properties">
    <ParamField path="editor" type="Editor">
      Existing Editor instance to introspect. If provided, uses this instead of creating a temporary editor.
    </ParamField>

    <ParamField path="extensions" type="Array">
      Custom extensions to use when building the schema.
    </ParamField>

    <ParamField path="mode" type="string" default="'docx'">
      Editor mode: `'docx'`, `'html'`, or `'text'`
    </ParamField>
  </Expandable>
</ParamField>

## TypeScript types

SuperDoc exports TypeScript interfaces for all node and mark types:

```typescript theme={null}
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.

<CodeGroup>
  ```javascript Usage theme={null}
  if (superdoc.activeEditor) {
    superdoc.activeEditor.commands.toggleBold();
  }
  ```

  ```javascript Full Example theme={null}
  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();
      }
    },
  });
  ```
</CodeGroup>

<Warning>Always check for `null` before accessing.</Warning>

| 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      |