Appearance

npm version

Quick Start ​

Learn how to install and set up SuperDoc, the modern collaborative document editor for the web.

SuperDoc is a powerful document editor that brings Microsoft Word-level capabilities to your web applications. With real-time collaboration, extensive formatting options, and seamless integration capabilities, SuperDoc makes document editing on the web better for everyone.

Introduction ​

SuperDoc is an open source document editor bringing Microsoft Word capabilities to the web with real-time collaboration, extensive formatting options, and easy integration.

Key Features ​

  • Document Compatibility: View and edit DOCX and PDF (view only) documents directly in the browser
  • Microsoft Word Integration: Full support for importing/exporting, advanced formatting, comments, and tracked changes
  • Real-time Collaboration: Built-in multiplayer editing, live updates, commenting, sharing, and revision history
  • Framework Agnostic: Seamlessly integrates with Vue, React, or vanilla JavaScript
  • Extensible Architecture: Modular design makes it easy to extend and customize
  • Dual License: Available under AGPLv3 for community use and Commercial license for enterprise deployments

Installation ​

Package Installation ​

bash
npm install @harbour-enterprises/superdoc

CDN Usage ​

You can also use SuperDoc directly from a CDN:

html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@harbour-enterprises/superdoc/dist/style.css" />
<script
  src="https://cdn.jsdelivr.net/npm/@harbour-enterprises/superdoc/dist/superdoc.es.js"
  type="module"></script>

Basic Usage ​

javascript
import '@harbour-enterprises/superdoc/style.css';
import { SuperDoc } from '@harbour-enterprises/superdoc';

const superdoc = new SuperDoc({
  selector: '#root',
  documents: [
    id: 'pets-123',
    type: 'docx',
    url: 'http://my-document-url.docx',
  ],
  pagination: true,
  licenseKey: 'community-and-eval-agplv3',
  telemetry: { 
    enabled: true,
  } //basic usage metrics and exceptions
})

Configuration Options ​

javascript
const config = {
  // Optional: Give the superdoc an id
  superdocId: 'my-superdoc-id',

  // Optional: SuperDoc title
  title: 'My SuperDoc',

  // Required: A DOM element ID to render superdoc into
  selector: '#superdoc',

  // Optional: Initial document mode: viewing, editing. Defaults to viewing
  documentMode: 'editing',

  // Required: Documents list with one document
  documents: [
    {
      id: 'my-doc-id', // Required: This document's ID. This is also used as the room name in collaboration.
      type: 'docx', // Required: 'pdf', 'docx' or 'html'
      data: fileObject, // Optional: A JS File object of your doc, pdf or html file.
    },
  ],

  // Optional: For enterprise users, set the license key
  licenseKey: 'community-and-eval-agplv3',

  // Optional: Enable telemetry to help us improve SuperDoc
  telemetry: {
    enabled: true,
  },

  // Optional: The current user
  user: {
    name: 'Superdoc User',
    email: 'superdoc@example.com',
    image: 'image-url.jpg',
  },

  // Optional: A DOM element ID to render the toolbar into
  toolbar: 'superdoc-toolbar',

  // Optional: modules
  modules: {
    // The collaboration module
    collaboration: {
      url: 'wss://your-collaboration-server.com', // Required: Path to your collaboration backend
      token: 'your-auth-token', // Required: Your auth token
    },
    
    // Toolbar config, overrides the 'toolbar' key, if provided, above
    toolbar: {
      selector: 'superdoc-toolbar',
    },

    // More coming soon
  },

  // Optional: events - pass in your own functions for each
    onEditorBeforeCreate: () => null,
    onEditorCreate: () => null,
    onEditorDestroy: () => null,
    onContentError: () => null,
    onReady: () => null,
    onPdfDocumentReady: () => null,
    onException: () => null,
};

Project Structure ​

SuperDoc consists of two main packages:

/packages/super-editor  // Core editor component
/packages/superdoc      // Main SuperDoc package

SuperDoc Package ​

This is the main package (published to npm). It includes SuperEditor and provides the complete document editing experience.

bash
cd packages/superdoc
npm install && npm run dev

This will run SuperdocDev.vue, with a Vue 3 based example of how to instantiate SuperDoc.

SuperEditor Package ​

This is the core DOCX editor and renderer (including the toolbar). It is included inside SuperDoc but can be used independently for advanced use cases.

bash
cd packages/super-editor
npm install && npm run dev

Event Handling ​

SuperDoc provides a robust event system to handle various document interactions:

javascript
const superdoc = new SuperDoc({
  selector: '#superdoc',
  documents: [
    /* ... */
  ],
});


// Remove event listeners
superdoc.off('ready', myReadyHandler);

Document Operations ​

javascript
// Export the document as DOCX
await superdoc.export();

// Switch between viewing and editing modes
superdoc.setDocumentMode('viewing');
superdoc.setDocumentMode('editing');

// Get a list of HTML strings (one per DOCX editor)
superdoc.getHTML()

Next Steps ​

  • See Integration for framework-specific integration guides
  • Explore Components for detailed component reference
  • Check out Resources for examples, FAQ, and community resources

© 2025 Harbour Enterprises, Inc. 💙💛