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" />

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

Configuration

Full SuperDoc configuration options

Collaboration

Real-time collaboration setup

React Example

React + TypeScript example

Next.js Example

Next.js SSR integration