Methods

Use a ref to access the SuperDoc instance and call methods programmatically.

Ref API

import { useRef } from 'react';
import { SuperDocEditor } from '@superdoc-dev/react';
import '@superdoc-dev/react/style.css';

function App() {
  const editorRef = useRef(null);

  const handleExport = async () => {
    await editorRef.current?.getInstance()?.export({ triggerDownload: true });
  };

  return (
    <>
      <button onClick={handleExport}>Download DOCX</button>
      <SuperDocEditor
        ref={editorRef}
        document={file}
        onReady={({ superdoc }) => console.log('Ready', superdoc)}
      />
    </>
  );
}

getInstance()

Returns the underlying SuperDoc instance, or null before the editor is ready.

const instance = editorRef.current?.getInstance();

Use optional chaining (?.) for safe access — getInstance() returns null until onReady fires.

Available instance methods

Once you have the SuperDoc instance, you can call any SuperDoc method:

Method	Returns	Description
setDocumentMode(mode)	void	Change mode without rebuild
export(options?)	Promise<Blob | void>	Export document as DOCX
getHTML(options?)	string[]	Get document as HTML
focus()	void	Focus the editor
search(text)	SearchResult[]	Search document content
goToSearchResult(match)	void	Navigate to a search result
setLocked(locked)	void	Lock/unlock editing
toggleRuler()	void	Toggle ruler visibility
save()	Promise<void[]>	Save (in collaboration mode)

Common patterns

PDF setup

Use pdfjs-dist with modules.pdf for predictable PDF rendering.

import { useMemo } from 'react';
import { SuperDocEditor } from '@superdoc-dev/react';
import '@superdoc-dev/react/style.css';
import * as pdfjsLib from 'pdfjs-dist/build/pdf.mjs';

const workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();

function PdfEditor({ document }) {
  const modules = useMemo(
    () => ({
      pdf: {
        pdfLib: pdfjsLib,
        setWorker: true,
        workerSrc,
        textLayer: true,
      },
    }),
    [],
  );

  return (
    <SuperDocEditor
      document={document}
      modules={modules}
      onPdfDocumentReady={() => console.log('PDF ready')}
    />
  );
}

Use document.data for local File/Blob and document.url for remote URLs.

Whiteboard stickers (PDF)

Register stickers when the whiteboard instance is available and pass the sticker id via application/sticker.

const STICKERS = [
  { id: 'cite-source', src: '/stickers/cite-source.svg', width: 52, height: 52 },
];

const onStickerDragStart = (event, stickerId) => {
  event.dataTransfer.setData('application/sticker', stickerId);
  event.dataTransfer.setData('text/plain', '');
};

<SuperDocEditor
  document={file}
  modules={{ whiteboard: { enabled: true } }}
  onReady={({ superdoc }) => {
    const register = (whiteboard) => whiteboard?.register('stickers', STICKERS);
    superdoc.on('whiteboard:init', ({ whiteboard }) => register(whiteboard));
    register(superdoc.whiteboard);
  }}
/>

For drop placement, switch whiteboard to select mode before dragging stickers.

Search and navigate

const editorRef = useRef(null);

const handleSearch = (query) => {
  const instance = editorRef.current?.getInstance();
  const results = instance?.search(query);
  if (results?.length) {
    instance?.goToSearchResult(results[0]);
  }
};

Export to HTML

const editorRef = useRef(null);

const getHtmlContent = () => {
  const htmlArray = editorRef.current?.getInstance()?.getHTML();
  console.log(htmlArray); // Array of HTML strings per section
};

Real-time collaboration

import * as Y from 'yjs';
import { WebsocketProvider } from 'y-websocket';

function CollaborativeEditor() {
  const ydoc = useMemo(() => new Y.Doc(), []);
  const provider = useMemo(
    () => new WebsocketProvider('wss://your-server.com', 'doc-id', ydoc),
    [ydoc]
  );

  return (
    <SuperDocEditor
      document={file}
      modules={{
        collaboration: {
          ydoc,
          provider,
        },
      }}
    />
  );
}

Collaboration guide

Full setup for real-time collaboration