Quick start

By the end of this page you’ll have a working DOCX editor in your app: load a Word file, edit it, export it back as .docx.

Using an AI coding agent? Run npx @superdoc-dev/create in your project. It writes an AGENTS.md with SuperDoc-specific instructions and MCP setup. Then see Use SuperDoc with AI for the full path picker.

1. Install

npm

npm install superdoc

React

npm install @superdoc-dev/react

CDN

<link href="https://cdn.jsdelivr.net/npm/superdoc/dist/style.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/superdoc/dist/superdoc.min.js"></script>

SuperDoc becomes a global: use new SuperDoc({...}) directly.

2. Render the editor

JavaScript

<div id="editor" style="height: 100vh"></div>

<script type="module">
  import { SuperDoc } from 'superdoc';
  import 'superdoc/style.css';

  const superdoc = new SuperDoc({
    selector: '#editor',
  });
</script>

React

import { SuperDocEditor } from '@superdoc-dev/react';
import '@superdoc-dev/react/style.css';

export default function App() {
  return <SuperDocEditor />;
}

That’s a blank editor. Give it a document.

3. Load a document

Pass a URL, a File from an input, or a Blob from your API to document.

URL

new SuperDoc({
  selector: '#editor',
  document: '/files/contract.docx',
});

File input

document.getElementById('file-input').addEventListener('change', (e) => {
  new SuperDoc({
    selector: '#editor',
    document: e.target.files[0],
  });
});

Fetch

const response = await fetch('/api/documents/123');
const blob = await response.blob();

new SuperDoc({
  selector: '#editor',
  document: new File([blob], 'document.docx'),
});

Tracked changes, tables, images, headers/footers: all working.

4. Export it

Default superdoc.export() triggers a browser download. To upload to your backend instead, ask for the raw Blob:

Download

await superdoc.export();

Upload to backend

const blob = await superdoc.export({ triggerDownload: false });
await fetch('/api/save', { method: 'POST', body: blob });

For HTML, JSON, or Markdown output, see Import and export.

What are you building?

You want to…	Start here
Embed Word editing in a web app	This page (already done)
Build a custom toolbar/sidebar	Custom UI
Use SuperDoc’s built-in toolbar/comments	Built-in UI
Edit DOCX from backend code	Document Engine SDK or CLI
Let Claude/Cursor edit DOCX files	AI > MCP
Add real-time collaborative editing	Collaboration

What’s next

Custom UI

Build your own React toolbar, comments sidebar, and review panel

Document Engine

Programmatic DOCX editing from Node, Python, CLI, or AI agents

Framework guides

React, Vue, Nuxt, Angular, Laravel, Vanilla JS

Examples

Working demos on GitHub