Import/Export

SuperDoc is a Word editor that accepts multiple content formats as input. All content is normalized into Word’s document model internally.

Supported formats

Format	Import	Export	Round-Trip	Use Case
DOCX	Full	Full	Perfect	Word documents
JSON	Full	Full	Perfect	Programmatic control
HTML	Structure only	Structure only	Visual only	Web content, AI output
Markdown	CommonMark	CommonMark	Visual only	Documentation, AI output
Text	Plain text	Plain text	Perfect	Simple content

HTML and Markdown imports preserve structure (headings, lists, links, tables) but strip CSS styles.

Importing content

At initialization

Pass content when creating the SuperDoc instance.

// DOCX file — full fidelity
new SuperDoc({
  selector: '#editor',
  document: docxFile  // File, Blob, URL string, or config object
});

// HTML content — requires a base DOCX for styles
new SuperDoc({
  selector: '#editor',
  document: blankDocx,
  html: '<h1>Title</h1><p>Content</p>'
});

// Markdown content
new SuperDoc({
  selector: '#editor',
  document: blankDocx,
  markdown: '# Title\n\nContent with **formatting**'
});

// JSON (ProseMirror schema)
new SuperDoc({
  selector: '#editor',
  document: blankDocx,
  jsonOverride: documentSchema
});

document · string | File | Blob | Object

The document to load. Strings are treated as URLs. Files and Blobs are used directly.

html · string

HTML content to initialize the editor with. Requires a document for styles.

markdown · string

Markdown content to initialize the editor with. Requires a document for styles.

jsonOverride · Object

ProseMirror JSON to override the document content with.

After initialization

Insert content into an existing document using editor commands.

Usage

superdoc.activeEditor.commands.insertContent(content, {
  contentType: 'html'  // 'html' | 'markdown' | 'text' | 'schema'
});

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    superdoc.activeEditor.commands.insertContent(content, {
      contentType: 'html'  // 'html' | 'markdown' | 'text' | 'schema'
    });
  },
});

value · string | Object · required

The content to insert. String for html, markdown, and text. ProseMirror JSON object for schema.

options.contentType · string

Content type: 'html', 'markdown', 'text', or 'schema'

Exporting content

DOCX export

superdoc.export() triggers a browser download by default. If you need the raw Blob (e.g. to upload to a server), pass triggerDownload: false — otherwise you’ll get a duplicate download.

Usage

// Download as .docx file
await superdoc.export();

// Get blob without triggering download
const blob = await superdoc.export({ triggerDownload: false });

// Export without comments
await superdoc.export({ commentsType: 'clean' });

// Export as final document (applies tracked changes)
await superdoc.export({ isFinalDoc: true });

// Custom filename
await superdoc.export({ exportedName: 'Final Contract' });

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: async (superdoc) => {
    // Download as .docx file
    await superdoc.export();

    // Get blob without triggering download
    const blob = await superdoc.export({ triggerDownload: false });

    // Export without comments
    await superdoc.export({ commentsType: 'clean' });

    // Export as final document (applies tracked changes)
    await superdoc.export({ isFinalDoc: true });

    // Custom filename
    await superdoc.export({ exportedName: 'Final Contract' });
  },
});

exportType · string[] · default: "['docx']"

Formats to export

commentsType · string · default: "'external'"

'external' to include comments, 'clean' to remove all comments

exportedName · string

Custom filename without extension

triggerDownload · boolean · default: "true"

Whether to automatically trigger a file download. Set to false to get a Blob back instead.

isFinalDoc · boolean · default: "false"

Export as final version (applies tracked change mode)

fieldsHighlightColor · string

Color for field highlights in the exported document

additionalFiles · Blob[] · default: "[]"

Additional files to bundle. When multiple files are exported, they are zipped together.

additionalFileNames · string[] · default: "[]"

Filenames for additional files

HTML export

Usage

// Returns array of HTML strings (one per document)
const htmlArray = superdoc.getHTML();

// From the active editor (single string)
const html = superdoc.activeEditor.getHTML();

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    // Returns array of HTML strings (one per document)
    const htmlArray = superdoc.getHTML();

    // From the active editor (single string)
    const html = superdoc.activeEditor.getHTML();
  },
});

HTML export is structure-only. Custom CSS styling and Word-specific formatting are not included.

JSON export

Usage

// From the active editor
const json = superdoc.activeEditor.getJSON();

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: (superdoc) => {
    const json = superdoc.activeEditor.getJSON();
  },
});

JSON export preserves the full document structure and can be re-imported with jsonOverride.

Markdown export

Usage

// From the active editor
const markdown = await superdoc.activeEditor.getMarkdown();

import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';

const superdoc = new SuperDoc({
  selector: '#editor',
  document: yourFile,
  onReady: async (superdoc) => {
    const markdown = await superdoc.activeEditor.getMarkdown();
  },
});

HTML element mapping

HTML Element	Imported As	Notes
<h1> to <h6>	Word heading styles	Requires styles in the base document
<p>, <div>	Normal paragraph
<strong>, <b>	Bold
<em>, <i>	Italic
<a href="...">	Hyperlink
<ul>, <ol>	Word lists	Nesting supported
<table>	Word table	Structure only
<img src="...">	Image	URL preserved
<blockquote>	Quote style	If style exists in document
style="text-align: ..."	Alignment	Inline alignment is preserved

CSS classes, IDs, colors, fonts, margins, and other styling are stripped on import.

Markdown element mapping

Supported:

• Headings (# through ######)
• Bold/italic (**bold**, *italic*)
• Ordered and unordered lists
• Links [text](url)
• Images ![alt](url)
• Code blocks
• Blockquotes >

Not supported:

• Tables, footnotes, task lists, custom syntax extensions