> ## Documentation Index
> Fetch the complete documentation index at: https://superdoc-caio-pizzol-docs-ai-core-preset.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Methods

## Document lifecycle

### `open`

Open a document from a file, URL, or buffer.

<ParamField path="source" type="string | File | Blob | Buffer">
  Document source. Omit for a blank document.
</ParamField>

<ParamField path="options" type="OpenOptions">
  <Expandable title="properties">
    <ParamField path="mode" type="string" default="'docx'">
      `'docx'`, `'text'`, or `'html'`
    </ParamField>

    <ParamField path="html" type="string">
      HTML content (for text/html mode)
    </ParamField>

    <ParamField path="markdown" type="string">
      Markdown content
    </ParamField>

    <ParamField path="json" type="Object">
      ProseMirror JSON to use instead of DOCX parsing
    </ParamField>
  </Expandable>
</ParamField>

<CodeGroup>
  ```javascript Usage theme={null}
  await editor.open(docxFile);
  await editor.open(null, { mode: 'html', html: '<p>Hello</p>' });
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  await editor.open(docxFile);
  await editor.open(null, { mode: 'html', html: '<p>Hello</p>' });
  ```
</CodeGroup>

<Note>
  This is the instance method. For one-liner creation, use the static `Editor.open()` factory — see [Configuration](/advanced/supereditor/configuration).
</Note>

### `close`

Close the current document. The editor instance stays alive for reuse.

<CodeGroup>
  ```javascript Usage theme={null}
  editor.close();
  await editor.open(anotherFile);
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  editor.close();
  await editor.open(anotherFile);
  ```
</CodeGroup>

### `save`

Save back to the original source path (Node.js only).

<ParamField path="options" type="SaveOptions">
  <Expandable title="properties">
    <ParamField path="isFinalDoc" type="boolean" default="false">
      Replace fields with values
    </ParamField>

    <ParamField path="commentsType" type="string" default="'external'">
      Comment handling
    </ParamField>

    <ParamField path="comments" type="Array">
      Comments to include
    </ParamField>

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

<CodeGroup>
  ```javascript Usage theme={null}
  await editor.save();
  await editor.save({ isFinalDoc: true });
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  await editor.save();
  await editor.save({ isFinalDoc: true });
  ```
</CodeGroup>

<Warning>Throws if the editor was opened from a Blob/Buffer instead of a file path. Use `saveTo()` or `exportDocument()` instead.</Warning>

### `saveTo`

Save to a specific path (Node.js only).

<ParamField path="path" type="string" required>
  File path
</ParamField>

<CodeGroup>
  ```javascript Usage theme={null}
  await editor.saveTo('/path/to/output.docx');
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  await editor.saveTo('/path/to/output.docx');
  ```
</CodeGroup>

### `exportDocument`

Export as a Blob (browser) or Buffer (Node.js).

<CodeGroup>
  ```javascript Usage theme={null}
  const blob = await editor.exportDocument();
  const blob = await editor.exportDocument({ isFinalDoc: true });
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  const blob = await editor.exportDocument();
  const blob = await editor.exportDocument({ isFinalDoc: true });
  ```
</CodeGroup>

### `exportDocx`

Lower-level export with additional control.

**Returns:** `Promise<Blob>` in the browser, `Promise<Buffer>` in headless/Node.js mode.

<ParamField path="options" type="Object">
  <Expandable title="properties">
    <ParamField path="isFinalDoc" type="boolean" default="false">
      Replace fields with values
    </ParamField>

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

    <ParamField path="comments" type="Array">
      Comments to include — [data structure](/editor/built-in-ui/comments#comment-data-structure)
    </ParamField>

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

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

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  const blob = await editor.exportDocx({
    isFinalDoc: true,
    commentsType: 'clean'
  });
  ```
</CodeGroup>

### `replaceFile`

Replace the current DOCX with a new file.

<CodeGroup>
  ```javascript Usage theme={null}
  await editor.replaceFile(newDocxFile);
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  await editor.replaceFile(newDocxFile);
  ```
</CodeGroup>

## Content

### `getHTML`

<CodeGroup>
  ```javascript Usage theme={null}
  const html = editor.getHTML();
  const html = editor.getHTML({ unflattenLists: true });
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  const html = editor.getHTML();
  const html = editor.getHTML({ unflattenLists: true });
  ```
</CodeGroup>

### `getJSON`

<CodeGroup>
  ```javascript Usage theme={null}
  const json = editor.getJSON();
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  const json = editor.getJSON();
  ```
</CodeGroup>

### `getMarkdown`

<CodeGroup>
  ```javascript Usage theme={null}
  const md = await editor.getMarkdown();
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  const md = await editor.getMarkdown();
  ```
</CodeGroup>

### `replaceContent`

Replace the entire document content.

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

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  editor.replaceContent(proseMirrorJson);
  ```
</CodeGroup>

### `replaceNodeWithHTML`

Replace a specific node with HTML.

<CodeGroup>
  ```javascript Usage theme={null}
  const table = editor.getNodesOfType('table')[0];
  editor.replaceNodeWithHTML(table, '<table>...</table>');
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  const table = editor.getNodesOfType('table')[0];
  editor.replaceNodeWithHTML(table, '<table>...</table>');
  ```
</CodeGroup>

## Editor control

### `mount` / `unmount`

<CodeGroup>
  ```javascript Usage theme={null}
  editor.mount(document.querySelector('#editor'));
  editor.unmount(); // Keeps instance alive
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  editor.mount(document.querySelector('#editor'));
  editor.unmount(); // Keeps instance alive
  ```
</CodeGroup>

### `destroy`

Permanently destroy the editor.

<Warning>Irreversible. The instance cannot be used after this.</Warning>

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

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  editor.destroy();
  ```
</CodeGroup>

### `focus` / `blur`

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

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  editor.focus();
  editor.blur();
  ```
</CodeGroup>

### `setEditable`

<CodeGroup>
  ```javascript Usage theme={null}
  editor.setEditable(false); // Read-only
  editor.setEditable(true);  // Editable
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  editor.setEditable(false); // Read-only
  editor.setEditable(true);  // Editable
  ```
</CodeGroup>

### `setDocumentMode`

<CodeGroup>
  ```javascript Usage theme={null}
  editor.setDocumentMode('editing');    // Full editing
  editor.setDocumentMode('suggesting'); // Track changes
  editor.setDocumentMode('viewing');    // Read-only
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  editor.setDocumentMode('editing');    // Full editing
  editor.setDocumentMode('suggesting'); // Track changes
  editor.setDocumentMode('viewing');    // Read-only
  ```
</CodeGroup>

## Commands

<Warning>
  **Deprecated.** Editor commands (`editor.commands`) will be removed in a future version. Use the [Document API](/document-api/overview) (`editor.doc`) for programmatic document operations. See [available operations](/document-api/available-operations) for the full list.
</Warning>

All commands are accessed via `editor.commands`:

<CodeGroup>
  ```javascript Usage theme={null}
  // Formatting
  editor.commands.toggleBold();
  editor.commands.toggleItalic();
  editor.commands.toggleUnderline();

  // Tables
  editor.commands.insertTable({ rows: 3, cols: 3 });

  // Selection
  editor.commands.setTextSelection({ from: 10, to: 20 });
  editor.commands.selectAll();
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  // Formatting
  editor.commands.toggleBold();
  editor.commands.toggleItalic();
  editor.commands.toggleUnderline();

  // Tables
  editor.commands.insertTable({ rows: 3, cols: 3 });

  // Selection
  editor.commands.setTextSelection({ from: 10, to: 20 });
  editor.commands.selectAll();
  ```
</CodeGroup>

### `insertContent`

Insert content with automatic format detection.

<ParamField path="content" type="string | Object" required>
  Content to insert
</ParamField>

<ParamField path="options" type="Object">
  <Expandable title="properties">
    <ParamField path="contentType" type="string">
      `'html'`, `'markdown'`, `'text'`, or `'schema'`
    </ParamField>

    <ParamField path="position" type="number | Object">
      Insert position (defaults to cursor)
    </ParamField>

    <ParamField path="onUnsupportedContent" type="function">
      Callback for HTML elements dropped during parsing. Receives `{ tagName, outerHTML, count }[]`. Falls back to the editor-level option if not set.
    </ParamField>

    <ParamField path="warnOnUnsupportedContent" type="boolean" default="false">
      Log dropped elements via `console.warn`. Falls back to the editor-level option if not set.
    </ParamField>
  </Expandable>
</ParamField>

<CodeGroup>
  ```javascript Usage theme={null}
  editor.commands.insertContent(htmlContent, { contentType: 'html' });
  editor.commands.insertContent(markdownText, { contentType: 'markdown' });
  editor.commands.insertContent('Plain text', { contentType: 'text' });
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  editor.commands.insertContent(htmlContent, { contentType: 'html' });
  editor.commands.insertContent(markdownText, { contentType: 'markdown' });
  editor.commands.insertContent('Plain text', { contentType: 'text' });
  ```
</CodeGroup>

<Note>HTML and Markdown inline styles are stripped on import to ensure Word compatibility.</Note>

## Document metadata

### `getMetadata`

<CodeGroup>
  ```javascript Usage theme={null}
  const { documentGuid, isModified, version } = editor.getMetadata();
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  const { documentGuid, isModified, version } = editor.getMetadata();
  ```
</CodeGroup>

### `getDocumentIdentifier`

Get a stable identifier (GUID or content hash).

<CodeGroup>
  ```javascript Usage theme={null}
  const id = await editor.getDocumentIdentifier();
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  const id = await editor.getDocumentIdentifier();
  ```
</CodeGroup>

### `isDocumentModified`

<CodeGroup>
  ```javascript Usage theme={null}
  if (editor.isDocumentModified()) {
    // Prompt user to save
  }
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  if (editor.isDocumentModified()) {
    // Prompt user to save
  }
  ```
</CodeGroup>

## Schema

### `getSchemaSummaryJSON`

Generate a summary of the document schema. Useful for AI agents that need to understand the document structure.

<CodeGroup>
  ```javascript Usage theme={null}
  const summary = await editor.getSchemaSummaryJSON();
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  const summary = await editor.getSchemaSummaryJSON();
  ```
</CodeGroup>

## Position & coordinates

### `getElementAtPos`

Get the DOM element at a document position.

<ParamField path="pos" type="number" required>
  Document position
</ParamField>

<CodeGroup>
  ```javascript Usage theme={null}
  const element = editor.getElementAtPos(42);
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  const element = editor.getElementAtPos(42);
  ```
</CodeGroup>

### `getNodesOfType`

Get all nodes of a specific type.

<CodeGroup>
  ```javascript Usage theme={null}
  const tables = editor.getNodesOfType('table');
  const paragraphs = editor.getNodesOfType('paragraph');
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  const tables = editor.getNodesOfType('table');
  const paragraphs = editor.getNodesOfType('paragraph');
  ```
</CodeGroup>

### `isActive`

Check if a node or mark is active.

<CodeGroup>
  ```javascript Usage theme={null}
  editor.isActive('bold');
  editor.isActive('heading', { level: 2 });
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  editor.isActive('bold');
  editor.isActive('heading', { level: 2 });
  ```
</CodeGroup>

### `getAttributes`

Get attributes of the active node or mark.

<CodeGroup>
  ```javascript Usage theme={null}
  const attrs = editor.getAttributes('link');
  console.log(attrs.href);
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  const attrs = editor.getAttributes('link');
  console.log(attrs.href);
  ```
</CodeGroup>

## Page & layout

### `getPageStyles`

<CodeGroup>
  ```javascript Usage theme={null}
  const styles = editor.getPageStyles();
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  const styles = editor.getPageStyles();
  ```
</CodeGroup>

### `updatePageStyle`

<CodeGroup>
  ```javascript Usage theme={null}
  editor.updatePageStyle({
    pageMargins: { top: '1in', bottom: '1in', left: '1in', right: '1in' }
  });
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  editor.updatePageStyle({
    pageMargins: { top: '1in', bottom: '1in', left: '1in', right: '1in' }
  });
  ```
</CodeGroup>

## Search

<CodeGroup>
  ```javascript Usage theme={null}
  const results = editor.commands.search('hello');
  const results = editor.commands.search(/\d{3}-\d{4}/gi);

  editor.commands.goToSearchResult(results[0]);
  ```

  ```javascript Full Example theme={null}
  import { Editor } from 'superdoc/super-editor';
  import 'superdoc/style.css';

  const editor = await Editor.open(yourFile, {
    element: document.getElementById('editor'),
  });

  const results = editor.commands.search('hello');
  const results = editor.commands.search(/\d{3}-\d{4}/gi);

  editor.commands.goToSearchResult(results[0]);
  ```
</CodeGroup>

## Properties

| Property            | Type                  | Description                                                                                                                         |
| ------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| `lifecycleState`    | `string`              | `'initialized'`, `'documentLoading'`, `'ready'`, `'saving'`, `'closed'`, `'destroyed'`                                              |
| `isEditable`        | `boolean`             | Whether editor accepts input                                                                                                        |
| `isDestroyed`       | `boolean`             | Whether editor has been destroyed                                                                                                   |
| `isFocused`         | `boolean`             | Whether editor has focus                                                                                                            |
| `docChanged`        | `boolean`             | Whether any edits have been made                                                                                                    |
| `currentTotalPages` | `number \| undefined` | Page count after the first layout completes. `undefined` until then. Use the `pagination-update` event to know when it's available. |
| `sourcePath`        | `string \| null`      | Source file path (null if opened from Blob)                                                                                         |