Bring your own editor

Use SuperDoc as the document engine behind your own editor experience.

SuperDoc can now sit underneath the editor your product already designed.

Three weeks ago, the Headless Toolbar shipped that idea for buttons. Today it covers the rest: comments, tracked changes, selection, document mode, custom commands. Same provider, same hook shape, in your own React components.

The Headless Toolbar still ships and stays supported. If you're already on it for a non-React app, keep it. superdoc/ui/react is the recommended path for React apps because it covers the full editor surface, not just the toolbar.

What ships

The toolbar piece carries over from the Headless Toolbar. Five new slices ship alongside it:

Same routed-editor model as before: state and commands follow the active surface across body, header, and footer.

Wire it once

Wrap your app in <SuperDocUIProvider>, mount <SuperDocEditor>, and pass the ready SuperDoc instance into the provider.

import { SuperDocEditor } from '@superdoc-dev/react';
import '@superdoc-dev/react/style.css';
import { SuperDocUIProvider, useSetSuperDoc } from 'superdoc/ui/react';

import { Toolbar } from './Toolbar';
import { ActivitySidebar } from './ActivitySidebar';

export function App() {
  return (
    <SuperDocUIProvider>
      <Toolbar />
      <EditorMount />
      <ActivitySidebar />
    </SuperDocUIProvider>
  );
}

function EditorMount() {
  const setSuperDoc = useSetSuperDoc();

  return (
    <SuperDocEditor
      document="/contract.docx"
      hideToolbar
      contained
      modules={{ comments: false }}
      onReady={({ superdoc }) => setSuperDoc(superdoc)}
    />
  );
}

hideToolbar turns off the built-in toolbar. modules.comments: false turns off the built-in comments UI. Document data still works. Comments still import and export. Tracked changes still round-trip through Word.

Comments keep their anchor

The hardest part of building a custom comments sidebar is keeping the selection alive across focus changes. The user selects text, clicks Comment, clicks into a textarea — and the original selection is gone the moment focus moves.

ui.selection.capture() returns a portable snapshot that survives focus changes. The composer creates the comment from the snapshot, not from the live selection.

// Capture the selection before focus moves to the textarea.
const capture = ui.selection.capture();

// Later, when the user posts:
ui.comments.createFromCapture(capture, { text });

The comments slice stays live through useSuperDocComments(). Resolve, reopen, delete, and reply route through the same Document API that powers DOCX import and export. Full composer pattern in the docs.

Review panels and custom commands

Tracked changes work the same way. useSuperDocTrackChanges() returns the items in document order. ui.trackChanges.accept(id) and ui.trackChanges.reject(id) resolve them. Merge them with comments into one Activity panel, or keep them separate — the slices stay independent so apps decide their own ordering and grouping.

Custom commands register on the same surface as built-ins. ui.commands.register({ id, getState, execute }) adds an action; useSuperDocCommand(id) reads its live state in your buttons. The execute callback receives the routed editor, so a command runs against whatever surface (body, header, footer) the user is in.

See Custom UI > Track changes and Custom commands for the full patterns.

What you can build

• A contract editor that looks like the rest of your CLM product
• A review workspace with comments and tracked changes in one Activity panel
• A domain-specific toolbar with only the actions your users need
• An AI-assisted editor where rewrite, summarize, and clause actions live beside normal document controls
• An internal approval workflow where document actions follow your permission model

The document stays a real .docx file. Comments and tracked changes round-trip through Word.

Get started

npm install superdoc @superdoc-dev/react

• Custom UI overview — concepts and the full surface
• React setup — provider, hooks, SSR notes
• API reference — every hook, every option
• Reference workspace — clone, run, copy

Same engine. Your UI.