# Open and edit your first DOCX
> Install the browser Editor, open a sample DOCX, and export your first edit.
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 [#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.
**Vanilla — `Terminal`**
```sh
pnpm create vite@latest superdoc-quickstart --template vanilla-ts
cd superdoc-quickstart
pnpm add superdoc
```
**React — `Terminal`**
```sh
pnpm create vite@latest superdoc-quickstart --template react-ts
cd superdoc-quickstart
pnpm add @superdoc/react
```
## 2. Add the sample document [#2-add-the-sample-document]
Download the sample into your project's `public` directory and rename it to `sample.docx`:
[Download the sample document](/fixtures/getting-started.docx): One-page statement of work · DOCX
Vite serves `public/sample.docx` at `/sample.docx`.
## 3. Prepare the page [#3-prepare-the-page]
Replace the generated files below. Vanilla mounts SuperDoc into `#editor`; the React wrapper creates that container
for you.
**Vanilla — `index.html`**
```html
SuperDoc vanilla quickstart
```
**React — `src/main.tsx`**
```tsx
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import './index.css';
const root = document.querySelector('#root');
if (!root) throw new Error('The React root is missing.');
createRoot(root).render(
,
);
```
For React, also replace `src/index.css` so Vite's starter layout does not constrain the Editor:
```css
html,
body,
#root {
min-height: 100%;
margin: 0;
}
```
## 4. Open the document [#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:
**Vanilla — `src/main.ts`**
```ts
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';
const exportButton = document.querySelector('#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;
}
});
```
**React — `src/App.tsx`**
```tsx
import { useRef, useState } from 'react';
import { SuperDocEditor, type SuperDocRef } from '@superdoc/react';
import '@superdoc/react/style.css';
function reportDocumentError({ error }: { error: unknown }) {
console.error('SuperDoc could not open the document.', error);
}
export default function App() {
const editorRef = useRef(null);
const exportingRef = useRef(false);
const [ready, setReady] = useState(false);
const [exporting, setExporting] = useState(false);
async function exportDocument() {
if (exportingRef.current) return;
exportingRef.current = true;
setExporting(true);
try {
await editorRef.current?.getInstance()?.export({ exportType: ['docx'], exportedName: 'sample-edited' });
} catch (error) {
console.error('SuperDoc could not export the document.', error);
} finally {
exportingRef.current = false;
setExporting(false);
}
}
return (
setReady(true)}
ref={editorRef}
/>
);
}
```
Run the project:
```bash
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 [#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](https://go.superdoc.dev/examples/vanilla) and
[React](https://go.superdoc.dev/examples/react).
## Continue to configuration [#continue-to-configuration]
[Configure the Editor](/editor/configuration) to add user information and choose a document mode. Keep this project,
including its export button and `/sample.docx`, for the next guide.