Quick start

Using an AI coding agent?

Run this first. It generates an AGENTS.md that teaches your agent how to use SuperDoc.

npx @superdoc-dev/create

Then set up the MCP server so your agent can edit DOCX files directly:

Claude Code

claude mcp add superdoc -- npx @superdoc-dev/mcp

Cursor

Add to ~/.cursor/mcp.json:

{
  "mcpServers": {
    "superdoc": {
      "command": "npx",
      "args": ["@superdoc-dev/mcp"]
    }
  }
}

Windsurf

Add to ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "superdoc": {
      "command": "npx",
      "args": ["@superdoc-dev/mcp"]
    }
  }
}

Done. Ask your agent to open a .docx file and make an edit.

MCP setup guide → · LLM tools →

---

Edit DOCX from backend code

Node.js

npm install @superdoc-dev/sdk

import { SuperDocClient } from '@superdoc-dev/sdk';

const client = new SuperDocClient({ defaultChangeMode: 'tracked' });
const doc = await client.open({ doc: './contract.docx' });

// query, edit, format, comment, track changes...

await doc.save();
await doc.close();

Python

pip install superdoc-sdk

from superdoc import SuperDocClient

client = SuperDocClient(default_change_mode="tracked")
doc = client.open({"doc": "./contract.docx"})

# query, edit, format, comment, track changes...

doc.save()
doc.close()

CLI

npm install -g @superdoc-dev/cli

superdoc open contract.docx
superdoc find --type text --pattern "ACME Corp"
superdoc replace --target-json '...' --text "NewCo Inc." --change-mode tracked
superdoc save && superdoc close

SDK docs → · CLI docs →

---

Embed a DOCX editor

1. Install

   npm

   npm install superdoc
   

   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. Mount the editor

   npm

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

   CDN

   <div id="editor" style="height: 100vh"></div>
   
   <script>
     const superdoc = new SuperDoc({
       selector: '#editor',
     });
   </script>
   

   That’s a blank editor. Now give it a file.

3. Load a document

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

   URL

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

   File input

   <input type="file" accept=".docx" id="file-input" />
   <div id="editor" style="height: 100vh"></div>
   
   <script type="module">
     import { SuperDoc } from 'superdoc';
     import 'superdoc/style.css';
   
     document.getElementById('file-input').addEventListener('change', (e) => {
       new SuperDoc({
         selector: '#editor',
         document: e.target.files[0],
       });
     });
   </script>
   

   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.

Using React?

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

function App() {
  return <SuperDocEditor document={file} />;
}

Install with npm install @superdoc-dev/react. Full React guide →

---

What’s next

Document Engine

Architecture and how to choose a surface

LLM tools

Build custom AI agents with the SDK

Framework guides

React, Vue, Angular, Vanilla JS

Examples

Working demos on GitHub