> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superdoc.dev/llms.txt
> Use this file to discover all available pages before exploring further.

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

<Info>
  **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](/getting-started/ai) for the full path picker.
</Info>

## 1. Install

<Tabs>
  <Tab title="npm">
    ```bash theme={null}
    npm install superdoc @superdoc-dev/fonts
    ```
  </Tab>

  <Tab title="React">
    ```bash theme={null}
    npm install @superdoc-dev/react @superdoc-dev/fonts
    ```
  </Tab>

  <Tab title="CDN">
    ```html theme={null}
    <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.
  </Tab>
</Tabs>

<Info>
  `@superdoc-dev/fonts` serves SuperDoc's bundled fallback fonts so Word fonts render without copying assets. It's optional. See [Font support](/getting-started/fonts).
</Info>

## 2. Render the editor

<Tabs>
  <Tab title="JavaScript">
    ```html theme={null}
    <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>
    ```
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    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} />;
    }
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="URL">
    ```javascript theme={null}
    new SuperDoc({
      selector: '#editor',
      document: '/files/contract.docx',
    });
    ```
  </Tab>

  <Tab title="File input">
    ```javascript theme={null}
    document.getElementById('file-input').addEventListener('change', (e) => {
      new SuperDoc({
        selector: '#editor',
        document: e.target.files[0],
      });
    });
    ```
  </Tab>

  <Tab title="Fetch">
    ```javascript theme={null}
    const response = await fetch('/api/documents/123');
    const blob = await response.blob();

    new SuperDoc({
      selector: '#editor',
      document: new File([blob], 'document.docx'),
    });
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="Download">
    ```javascript theme={null}
    await superdoc.export();
    ```
  </Tab>

  <Tab title="Upload to backend">
    ```javascript theme={null}
    const blob = await superdoc.export({ triggerDownload: false });
    await fetch('/api/save', { method: 'POST', body: blob });
    ```
  </Tab>
</Tabs>

For HTML, JSON, or Markdown output, see [Import and export](/getting-started/import-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](/editor/custom-ui/overview)                                     |
| Use SuperDoc's built-in toolbar/comments | [Built-in UI](/editor/built-in-ui/overview)                                 |
| Edit DOCX from backend code              | [Document Engine SDK](/document-engine/sdks) or [CLI](/document-engine/cli) |
| Let Claude/Cursor edit DOCX files        | [AI > MCP](/ai/mcp/overview)                                                |
| Add real-time collaborative editing      | [Collaboration](/editor/collaboration/overview)                             |

## What's next

<CardGroup cols={2}>
  <Card title="Custom UI" icon="layout-dashboard" href="/editor/custom-ui/overview">
    Build your own React toolbar, comments sidebar, and review panel
  </Card>

  <Card title="Document Engine" icon="wrench" href="/document-engine/overview">
    Programmatic DOCX editing from Node, Python, CLI, or AI agents
  </Card>

  <Card title="Framework guides" icon="code" href="/getting-started/frameworks/react">
    React, Vue, Nuxt, Angular, Laravel, Vanilla JS
  </Card>

  <Card title="Examples" icon="external-link" href="https://github.com/superdoc-dev/superdoc/tree/main/examples">
    Working demos on GitHub
  </Card>
</CardGroup>