React wrapper for SuperDoc

Ship a full document editor in your React app with five lines of code.

Five lines of code. That's all it takes to ship a full Word document editor in your React app.

The problem

If you wanted SuperDoc in a React project, you had to write your own wrapper: mount the instance manually, sync props with lifecycle methods, and clean up on unmount. It worked, but it was boilerplate that every React team ended up writing from scratch.

SuperDoc React package

The new @superdoc-dev/react package gives you a single <SuperDocEditor /> component with typed props, lifecycle callbacks, and bundled styles. Install, import, render.

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

export function Editor({ file }) {
  return <SuperDocEditor document={file} documentMode="editing" />;
}

Props you'll use

The component accepts the same configuration you'd pass to the vanilla SuperDoc constructor, but as typed React props:

<SuperDocEditor
  document={file}
  documentMode="editing"
  modules={{
    toolbar: true,
    comments: true,
    trackChanges: true,
  }}
  onReady={(event) => console.log('Editor ready', event)}
  onEditorUpdate={(event) => saveToBackend(event)}
/>

TypeScript autocompletion covers every prop. No guessing, no docs tab-switching.

Direct instance access

For advanced use cases — programmatic insertions, custom toolbar actions, or AI-driven edits — use a ref to access the SuperDoc instance directly:

import { useRef } from 'react';
import { SuperDocEditor, type SuperDocRef } from '@superdoc-dev/react';

export function AdvancedEditor({ file }) {
  const ref = useRef<SuperDocRef>(null);

  const handleExport = () => {
    const instance = ref.current?.getInstance();
    instance?.export();
  };

  const toggleMode = () => {
    const instance = ref.current?.getInstance();
    instance?.setDocumentMode('suggesting');
  };

  return (
    <>
      <button onClick={handleExport}>Export</button>
      <button onClick={toggleMode}>Switch to suggesting</button>
      <SuperDocEditor ref={ref} document={file} documentMode="editing" />
    </>
  );
}

You get the convenience of a React component for 90% of use cases and full imperative control for the rest.

Get started

npm install @superdoc-dev/react

Read the React integration guide or check the package on npm.