DOCX Import/Export

Import DOCX files and export Plate content to Word documents.

Features

  • Import DOCX files to Plate format with full content and comment extraction
  • Export to DOCX with support for all common formatting, tables, lists, and images
  • Support for headers, footers, page orientation, and margins
  • Configurable CSS styles and fonts for export

Looking for paste from Word support? See DOCX Paste.

Installation

pnpm add @platejs/docx-io

Import DOCX

Import DOCX File

Use importDocx to convert a DOCX file to Plate nodes:

import { importDocx } from '@platejs/docx-io';
 
const handleFileUpload = async (file: File) => {
  const arrayBuffer = await file.arrayBuffer();
  const result = await importDocx(editor, arrayBuffer);
 
  // Insert nodes into editor
  editor.tf.insertNodes(result.nodes);
 
  // Handle comments if needed
  for (const comment of result.comments) {
    console.log(`Comment ${comment.id}: ${comment.text}`);
  }
 
  // Check for conversion warnings
  if (result.warnings.length > 0) {
    console.warn('Conversion warnings:', result.warnings);
  }
};

Export DOCX

Basic Export

Use exportToDocx to convert Plate content to a DOCX file:

import { exportToDocx, downloadDocx } from '@platejs/docx-io';
 
const handleExport = async () => {
  const blob = await exportToDocx(editor.children, {
    orientation: 'portrait',
    margins: { top: 1440, bottom: 1440, left: 1440, right: 1440 },
    fontFamily: 'Calibri',
  });
 
  downloadDocx(blob, 'document.docx');
};

Or use the combined function:

import { exportEditorToDocx } from '@platejs/docx-io';
 
await exportEditorToDocx(editor.children, 'document', {
  orientation: 'portrait',
});

With Editor Plugins

For accurate serialization, provide your editor plugins:

import { exportToDocx } from '@platejs/docx-io';
import { BaseEditorKit } from '@/components/editor/editor-base-kit';
import { DocxExportKit } from '@/components/editor/plugins/docx-export-kit';
 
const blob = await exportToDocx(editor.children, {
  editorPlugins: [...BaseEditorKit, ...DocxExportKit],
});

Custom Styles

Customize the export styles:

import { exportToDocx, DOCX_EXPORT_STYLES } from '@platejs/docx-io';
 
const blob = await exportToDocx(editor.children, {
  customStyles: `
    .custom-highlight { background-color: #ffeb3b; }
    h1 { color: #1a1a1a; }
  `,
  fontFamily: 'Times New Roman',
});

Using DocxExportPlugin

For plugin-based API access:

import { DocxExportPlugin } from '@platejs/docx-io';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...otherPlugins,
    DocxExportPlugin.configure({
      options: {
        editorPlugins: myPlugins,
        editorStaticComponent: MyEditorStatic,
      },
    }),
  ],
});
 
// Export using plugin API
const blob = await editor.api.docxExport.exportToBlob({
  orientation: 'landscape',
});
 
editor.api.docxExport.download(blob, 'document');
 
// Or use transform for export + download
await editor.tf.docxExport.exportAndDownload('document', {
  orientation: 'portrait',
});

DOCX Export Kit

The DocxExportKit provides DOCX-optimized static components for elements that require special handling:

Components included:

  • Code blocks: Inline syntax highlighting with line breaks
  • Columns: Table layout instead of flexbox
  • Equations: Inline font styling (KaTeX doesn't work in DOCX)
  • Callouts: Table layout for icon + content
  • TOC: Anchor links with proper paragraph breaks

Plugins

DocxExportPlugin

Plugin providing DOCX export functionality with typed API methods.

Options

    Plugins to use for HTML serialization. If not provided, uses the editor's current plugins.

    React component to use for static rendering.

API

importDocx

Import a DOCX file and convert it to Plate nodes.

Parameters

    The Plate editor instance.

    The DOCX file as ArrayBuffer.

    Import options.

OptionsImportDocxOptions

    RTF data for image extraction.

ReturnsPromise<ImportDocxResult>

    Deserialized editor nodes.

    Comments extracted from the DOCX file.

    Warnings from mammoth conversion.

exportToDocx

Convert Plate content to a DOCX blob.

Parameters

    The Plate editor value (array of nodes).

    Export options.

OptionsDocxExportOptions

    Page orientation.

    • Default: 'portrait'

    Page margins in twentieths of a point (1 inch = 1440).

    • Default: { top: 1440, bottom: 1440, left: 1440, right: 1440, header: 720, footer: 720, gutter: 0 }

    Font family for the document body. Overrides default Calibri font.

    Additional CSS styles to include. Appended after default DOCX_EXPORT_STYLES.

    Document title for metadata.

    Plugins for HTML serialization.

    Component for static rendering.

ReturnsPromise<Blob>

    A Blob containing the DOCX file.

downloadDocx

Download a DOCX blob as a file.

Parameters

    The DOCX blob to download.

    The filename (with or without .docx extension).

exportEditorToDocx

Export and download editor content as a DOCX file in one call.

Parameters

    The Plate editor value.

    The filename for download.

    Export options (same as exportToDocx).

api.docxExport.exportToBlob

Convert editor content to a DOCX blob using the plugin API.

OptionsDocxExportOperationOptions

    Page orientation.

    Page margins.

    Font family.

    Additional CSS styles.

    Document title.

ReturnsPromise<Blob>

    A Blob containing the DOCX file.

api.docxExport.download

Download a DOCX blob as a file.

Parameters

    The DOCX blob.

    The filename.

Transforms

tf.docxExport.exportAndDownload

Export and download editor content as a DOCX file.

Parameters

    The filename for download.

    Export options.

Types

DocxComment

type DocxComment = {
  id: string;
  text: string;
};

DocxExportMargins

type DocxExportMargins = {
  top?: number;
  bottom?: number;
  left?: number;
  right?: number;
  header?: number;
  footer?: number;
  gutter?: number;
};

Constants

DOCX_EXPORT_STYLES

Default CSS styles optimized for Microsoft Word HTML rendering:

  • Calibri font (Microsoft Office default)
  • 11pt font size with 1.5 line height
  • Heading hierarchy (24pt to 10pt)
  • Table styles with borders
  • Code block styling with Courier New
  • Blockquote styling with left border

Known Limitations

  • Mobile browsers: Export may not work reliably on mobile browsers due to limitations with blob handling and downloads.
  • Complex layouts: Some complex CSS layouts (flexbox, grid) are converted to table-based layouts for Word compatibility.
  • Custom fonts: Only system fonts available in Word will render correctly.
DOCX Import/Export - Plate