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

Show 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

Usage

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

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

This is the instance method. For one-liner creation, use the static Editor.open() factory — see Configuration.

close

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

Usage

editor.close();
await editor.open(anotherFile);

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

Show 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

Usage

await editor.save();
await editor.save({ isFinalDoc: true });

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

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

Usage

await editor.saveTo('/path/to/output.docx');

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

Usage

const blob = await editor.exportDocument();
const blob = await editor.exportDocument({ isFinalDoc: true });

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

Show properties

isFinalDoc · boolean · default: "false"

Replace fields with values

commentsType · string · default: "'external'"

'external', 'clean', or custom

comments · Array

Comments to include — data structure

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

Field highlight color

Usage

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

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.

Usage

await editor.replaceFile(newDocxFile);

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

Usage

const html = editor.getHTML();
const html = editor.getHTML({ unflattenLists: true });

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

Usage

const json = editor.getJSON();

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

Usage

const md = await editor.getMarkdown();

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.

Usage

editor.replaceContent(proseMirrorJson);

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.

Usage

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

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

Usage

editor.mount(document.querySelector('#editor'));
editor.unmount(); // Keeps instance alive

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.

Irreversible. The instance cannot be used after this.

Usage

editor.destroy();

import { Editor } from 'superdoc/super-editor';
import 'superdoc/style.css';

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

editor.destroy();

focus / blur

Usage

editor.focus();
editor.blur();

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

Usage

editor.setEditable(false); // Read-only
editor.setEditable(true);  // Editable

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

Usage

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

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

Deprecated. Editor commands (editor.commands) will be removed in a future version. Use the Document API (editor.doc) for programmatic document operations. See available operations for the full list.

All commands are accessed via editor.commands:

Usage

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

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

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

Usage

editor.commands.insertContent(htmlContent, { contentType: 'html' });
editor.commands.insertContent(markdownText, { contentType: 'markdown' });
editor.commands.insertContent('Plain text', { contentType: 'text' });

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

HTML and Markdown inline styles are stripped on import to ensure Word compatibility.

Document metadata

getMetadata

Usage

const { documentGuid, isModified, version } = editor.getMetadata();

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

Usage

const id = await editor.getDocumentIdentifier();

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

Usage

if (editor.isDocumentModified()) {
  // Prompt user to save
}

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.

Usage

const summary = await editor.getSchemaSummaryJSON();

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

Usage

const element = editor.getElementAtPos(42);

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.

Usage

const tables = editor.getNodesOfType('table');
const paragraphs = editor.getNodesOfType('paragraph');

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.

Usage

editor.isActive('bold');
editor.isActive('heading', { level: 2 });

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.

Usage

const attrs = editor.getAttributes('link');
console.log(attrs.href);

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

Usage

const styles = editor.getPageStyles();

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

Usage

editor.updatePageStyle({
  pageMargins: { top: '1in', bottom: '1in', left: '1in', right: '1in' }
});

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

Usage

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

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

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)