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

# SuperEditor API

SuperEditor is the low-level DOCX editing engine that powers SuperDoc. Most apps reach for one of the higher layers first; this page documents what's underneath when you need it.

## Pick the right layer

**Use SuperDoc + Custom UI for custom React UI.** `<SuperDocEditor>` (or `new SuperDoc(...)`) plus `superdoc/ui/react` gives you typed hooks for toolbar, comments, tracked changes, selection, and document control. See [Custom UI](/editor/custom-ui/overview).

**Use the Document API for document mutations.** [`editor.doc.*`](/document-api/overview) is the stable, request/response surface that's identical on server, client, and AI agents. It's the recommended path for any insert / replace / format / comment / tracked-change operation.

**Use SuperDoc with built-in modules** when the standard look is fine. See the [Modules](/editor/built-in-ui/overview) section.

**Reach for SuperEditor directly when:**

* You're integrating with a framework SuperDoc doesn't yet wrap.
* You need [headless/server-side processing](/advanced/supereditor/configuration#headless-converter-nodejs).
* You're building a custom extension that taps into ProseMirror plugins or schemas.
* You explicitly need engine internals the higher layers don't surface.

For a typical React DOCX editor with a custom UI, you don't need this page — start at [Custom UI](/editor/custom-ui/overview).

## Quick start

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

// Open a DOCX file in the browser
const response = await fetch("/document.docx");
const file = await response.blob();

const editor = await Editor.open(file, {
  element: document.getElementById("editor"),
  documentMode: "editing",
});
```

## Key initialization steps

1. **Import styles and the Editor class**
2. **Call `Editor.open()`** - Pass a file source and options. The editor handles parsing, extensions, and mounting automatically.

## Components

The `SuperEditor` Vue component wraps the `Editor` class with reactive props and events. Use it in Vue apps for automatic lifecycle management. For other frameworks, use `Editor.open()` directly.

## API structure

* **[Configuration](/advanced/supereditor/configuration)** - Initialization options
* **[Methods](/advanced/supereditor/methods)** - Control the editor and access properties
* **[Events](/advanced/supereditor/events)** - React to changes