Skip to main content
@superdoc-dev/react is a first-party React wrapper for SuperDoc. It handles lifecycle management, SSR safety, and React Strict Mode compatibility so you can drop a DOCX editor into any React app. Building your own toolbar, comments sidebar, or review panel? Pair <SuperDocEditor> with superdoc/ui/react. See Custom UI.

​
Installation

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!')}
    />
  );
}

​
What the component handles

  • Mounting: Creates a SuperDoc instance when the component mounts
  • Updates: Rebuilds automatically when the document prop changes
  • Cleanup: Destroys the instance on unmount
  • SSR: Renders container structure on server, initializes SuperDoc after hydration
  • Strict Mode: Internal cleanup flag prevents issues from React 18 double-invocation

​
Requirements

RequirementVersion
React16.8.0+
Node.js16+

​
API structure

  • Configuration: All props reference
  • Methods: Ref API, instance methods, and patterns
  • Types: TypeScript types, framework integration, troubleshooting