Open and edit your first DOCX

Open a sample document, change its effective date, and download the edited DOCX. This example runs in the browser without a backend.

1. Create a project

With Node.js 22.12 or newer and pnpm installed, create a Vite project and install SuperDoc:

Choose Vanilla or React. Use the same framework for the remaining steps.

Terminal

pnpm create vite@latest superdoc-quickstart --template vanilla-ts
cd superdoc-quickstart
pnpm add superdoc

2. Add the sample document

Download the sample into your project's public directory and rename it to sample.docx:

Download the sample documentOne-page statement of workDOCX

Vite serves public/sample.docx at /sample.docx.

3. Prepare the page

Replace the generated files below. Vanilla mounts SuperDoc into #editor; the React wrapper creates that container for you.

index.html

<!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>

For React, also replace src/index.css so Vite's starter layout does not constrain the Editor:

html,
body,
#root {
  min-height: 100%;
  margin: 0;
}

4. Open the document

Replace src/main.ts in Vanilla or src/App.tsx in React with the matching code below. It opens the document and enables export when the Editor is ready:

src/main.ts

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 dev

Open the local URL printed in the terminal. You should see the statement of work. onReady enables Export DOCX after the document opens, so the button cannot export before the Editor is ready.

If the document does not appear, check that /sample.docx opens at the same local address. The example also logs document-opening errors to the browser console through onContentError and onException.

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.

Open sample-edited.docx in Word or another DOCX editor. Confirm that the effective date is October 1, 2026 and that the title, service list, milestone table, and signatures keep their formatting.

export() downloads a new file. It does not overwrite public/sample.docx or save changes to a server. Reloading this example opens the original sample again.

The complete projects are available for Vanilla and React.

Continue to configuration

Configure the Editor to add user information and choose a document mode. Keep this project, including its export button and /sample.docx, for the next guide.