Open and edit your first DOCX
Install the browser Editor, open a sample DOCX, and export your first edit.
Choose Vanilla or React below. Your choice stays active for every code example on this page.
1. Create a project
Create a Vite project, enter it, and install SuperDoc:
pnpm create vite@latest superdoc-quickstart --template vanilla-ts
cd superdoc-quickstart
pnpm add superdoc
2. Add the sample document
Download the sample and save it as public/sample.docx:
Vite serves public/sample.docx at /sample.docx.
3. Add the page
Add the application surface. Vanilla mounts SuperDoc into #editor; the React wrapper creates that container for you.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SuperDoc vanilla quickstart</title>
</head>
<body>
<button id="export-docx" type="button" disabled>Export DOCX</button>
<div id="editor"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
4. Open the document
Add the Editor and enable export after the document opens:
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';
const exportButton = document.querySelector<HTMLButtonElement>('#export-docx');
if (!exportButton) throw new Error('The export button is missing.');
const superdoc = new SuperDoc({
selector: '#editor',
document: '/sample.docx',
onReady: () => {
exportButton.disabled = false;
},
onContentError: ({ error }) => {
console.error('SuperDoc could not open the document.', error);
},
onException: ({ error }) => {
console.error('SuperDoc could not open the document.', error);
},
});
exportButton.addEventListener('click', async () => {
exportButton.disabled = true;
try {
await superdoc.export({ exportType: ['docx'], exportedName: 'sample-edited' });
} catch (error) {
console.error('SuperDoc could not export the document.', error);
} finally {
exportButton.disabled = false;
}
});
Run the project:
pnpm devOpen the printed URL. When the statement of work appears, Export DOCX becomes enabled. onReady keeps the button
disabled until the document is open.
5. Make an edit and export
Change the effective date from September 1, 2026 to October 1, 2026. Then select Export DOCX. The browser
downloads sample-edited.docx.
What just happened
selectormounted the Vanilla Editor; the React wrapper owned its container.documentgave the browser a DOCX URL to open.onReadymarked the first safe moment to enable document actions.export()created the edited DOCX and triggered the download.
If the document does not appear, check the onContentError or onException message in the browser console. They
report import and startup failures instead of leaving an unexplained empty mount point.
The complete projects are available for Vanilla and React.
Continue to configuration
Configure the Editor to add user information, choose a document mode, and handle startup
errors while keeping the same /sample.docx project.