> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superdoc.dev/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.

**source** `string | File | Blob | Buffer`

Document source. Omit for a blank document.

**options** `OpenOptions`

**properties**

**mode** `string` (default: 'docx')

`'docx'`, `'text'`, or `'html'`

**html** `string`

HTML content (for text/html mode)

**markdown** `string`

Markdown content

**json** `Object`

ProseMirror JSON to use instead of DOCX parsing

```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>' });
```

> [!NOTE]
>
> This is the instance method. For one-liner creation, use the static `Editor.open()` factory — see [Configuration](https://docs.superdoc.dev/advanced/supereditor/configuration).

### `close`

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

```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);
```

### `save`

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

**options** `SaveOptions`

**properties**

**isFinalDoc** `boolean` (default: false)

Replace fields with values

**commentsType** `string` (default: 'external')

Comment handling

**comments** `Array`

Comments to include

**fieldsHighlightColor** `string` (default: '#FFFF00')

Field highlight color

```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 });
```

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

### `saveTo`

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

**path** `string` *required*

File path

```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');
```

### `exportDocument`

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

```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 });
```

### `exportDocx`

Lower-level export with additional control.

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

**options** `Object`

**properties**

**isFinalDoc** `boolean` (default: false)

Replace fields with values

**commentsType** `string` (default: 'external')

`'external'`, `'clean'`, or custom

**comments** `Array`

Comments to include — [data structure](https://docs.superdoc.dev/editor/built-in-ui/comments.md#comment-data-structure)

**fieldsHighlightColor** `string` (default: '#FFFF00')

Field highlight color

```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'
});
```

### `replaceFile`

Replace the current DOCX with a new file.

```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);
```

## Content

### `getHTML`

```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 });
```

### `getJSON`

```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();
```

### `getMarkdown`

```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();
```

### `replaceContent`

Replace the entire document content.

```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);
```

### `replaceNodeWithHTML`

Replace a specific node with HTML.

```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>');
```

## Editor control

### `mount` / `unmount`

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

### `destroy`

Permanently destroy the editor.

> [!WARNING]
>
> Irreversible. The instance cannot be used after this.

```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();
```

### `focus` / `blur`

```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();
```

### `setEditable`

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

### `setDocumentMode`

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

## Commands

> [!WARNING]
>
> **Deprecated.** Editor commands (`editor.commands`) will be removed in a future version. Use the [Document API](https://docs.superdoc.dev/document-api/overview.md) (`editor.doc`) for programmatic document operations. See [available operations](https://docs.superdoc.dev/document-api/available-operations.md) for the full list.

All commands are accessed via `editor.commands`:

```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();
```

### `insertContent`

Insert content with automatic format detection.

**content** `string | Object` *required*

Content to insert

**options** `Object`

**properties**

**contentType** `string`

`'html'`, `'markdown'`, `'text'`, or `'schema'`

**position** `number | Object`

Insert position (defaults to cursor)

**onUnsupportedContent** `function`

Callback for HTML elements dropped during parsing. Receives `{ tagName, outerHTML, count }[]`. Falls back to the editor-level option if not set.

**warnOnUnsupportedContent** `boolean` (default: false)

Log dropped elements via `console.warn`. Falls back to the editor-level option if not set.

```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' });
```

> [!NOTE]
>
> HTML and Markdown inline styles are stripped on import to ensure Word compatibility.

## Document metadata

### `getMetadata`

```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();
```

### `getDocumentIdentifier`

Get a stable identifier (GUID or content hash).

```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();
```

### `isDocumentModified`

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

## Schema

### `getSchemaSummaryJSON`

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

```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();
```

## Position & coordinates

### `getElementAtPos`

Get the DOM element at a document position.

**pos** `number` *required*

Document position

```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);
```

### `getNodesOfType`

Get all nodes of a specific type.

```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');
```

### `isActive`

Check if a node or mark is active.

```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 });
```

### `getAttributes`

Get attributes of the active node or mark.

```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);
```

## Page & layout

### `getPageStyles`

```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();
```

### `updatePageStyle`

```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' }
});
```

## Search

```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]);
```

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


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.