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: 'user@company.com' }}
/>
)}
</div>
);
}
Next steps
