React Integration

SuperDoc provides @superdoc-dev/react: a first-party wrapper with lifecycle management, SSR safety, and React Strict Mode compatibility.

Install

npm install @superdoc-dev/react

superdoc is included as a dependency: no need to install it separately.

Quick start

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

function App() {
  return (
    <SuperDocEditor
      document={file}
      documentMode="editing"
      onReady={() => console.log('Editor ready!')}
    />
  );
}

Core concepts

Document modes

Mode	Description
editing	Full editing capabilities
viewing	Read-only presentation
suggesting	Track changes mode

<SuperDocEditor document={file} documentMode="editing" />

User roles

Role	Can Edit	Can Suggest	Can View
editor	Yes	Yes	Yes
suggester	No	Yes	Yes
viewer	No	No	Yes

<SuperDocEditor document={file} role="editor" />

Responsive zoom

Pass zoom with mode: 'fit-width' to keep the document fitted to its container as it resizes. SuperDoc observes the container for you; no resize listeners needed. Calling setZoom() (or the user picking a percentage in the toolbar) switches back to manual mode.

<SuperDocEditor
  document={file}
  zoom={{
    mode: 'fit-width',
    fitWidth: { min: 35, max: 100, padding: 24 },
  }}
  onZoomChange={({ zoom, mode }) => console.log(`Zoom: ${zoom}% (${mode})`)}
/>

For custom behavior, listen to onViewportChange instead and apply your own zoom with getInstance().setZoom(). See zoom configuration.

Handle file uploads

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

function FileEditor() {
  const [file, setFile] = useState(null);

  const handleFileChange = (e) => {
    const selected = e.target.files?.[0];
    if (selected) setFile(selected);
  };

  return (
    <div>
      <input type="file" accept=".docx" onChange={handleFileChange} />
      {file && (
        <SuperDocEditor
          document={file}
          user={{ name: 'User', email: '[e-mail]' }}
        />
      )}
    </div>
  );
}

Next steps

React API Reference

Props, ref API, TypeScript types, and patterns

Custom UI

Build custom toolbar, comments sidebar, and review panel with typed React hooks

Configuration

Full SuperDoc configuration options

Collaboration

Real-time collaboration setup

React Example

React + TypeScript example

Next.js Example

Next.js SSR integration