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
React
CDN

npm install superdoc @superdoc-dev/fonts

npm install @superdoc-dev/react @superdoc-dev/fonts

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

@superdoc-dev/fonts serves SuperDoc’s bundled fallback fonts so Word fonts render without copying assets. It’s optional. See Font support.

2. Render the editor

JavaScript
React

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

<script type="module">
  import { SuperDoc } from 'superdoc';
  import { superdocFonts } from '@superdoc-dev/fonts';
  import 'superdoc/style.css';

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

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

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

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
File input
Fetch

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

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

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
Upload to backend

await superdoc.export();

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

Getting Started

Editor

Document Engine

AI

Solutions

Resources

1. Install

2. Render the editor

3. Load a document

4. Export it

What are you building?

What’s next

Custom UI

Document Engine

Framework guides

Examples

​1. Install

​2. Render the editor

​3. Load a document

​4. Export it

​What are you building?

​What’s next

Custom UI

Document Engine

Framework guides

Examples

1. Install

2. Render the editor

3. Load a document

4. Export it

What are you building?

What’s next