# React wrapper for SuperDoc

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

2026-02-24 · Caio Pizzol

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.

```typescript
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:

```typescript
<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:

```typescript
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

```bash
npm install @superdoc-dev/react
```

Read the [React integration guide]([https://docs.superdoc.dev/guides/react](https://docs.superdoc.dev/guides/react)) or check the [package on npm]([https://www.npmjs.com/package/@superdoc-dev/react](https://www.npmjs.com/package/@superdoc-dev/react)).

&nbsp;