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:
/**
* Editor kit optimized for DOCX export.
*
* Uses docx-specific static components for elements that require
* inline styles instead of Tailwind classes (which don't work in DOCX):
* - Code blocks: Need inline syntax highlighting colors and line breaks
* - Columns: Need table layout instead of flexbox
* - Equations: Need inline font styling (KaTeX doesn't work in DOCX)
* - Callouts: Need table layout for icon + content
* - TOC: Need anchor links with proper paragraph breaks
*
* Tables use base version with juice CSS inlining.
*/
import { CalloutElementDocx } from '@/components/ui/callout-node-static';
import {
CodeBlockElementDocx,
CodeLineElementDocx,
CodeSyntaxLeafDocx,
} from '@/components/ui/code-block-node-static';
import {
ColumnElementDocx,
ColumnGroupElementDocx,
} from '@/components/ui/column-node-static';
import {
EquationElementDocx,
InlineEquationElementDocx,
} from '@/components/ui/equation-node-static';
import { TocElementDocx } from '@/components/ui/toc-node-static';
import { DocxExportPlugin } from '@platejs/docx-io';
import { KEYS } from 'platejs';
/**
* Editor kit for DOCX export.
*
* Uses standard static components for most elements (with juice CSS inlining),
* but uses docx-specific components for elements that need special handling:
* - Code blocks (syntax highlighting, line breaks)
* - Columns (table layout instead of flexbox)
* - Equations (inline font instead of KaTeX)
* - Callouts (table layout for icon placement)
* - TOC (anchor links with paragraph breaks)
*
* Tables use base version with juice CSS inlining.
*/
export const DocxExportKit = [
DocxExportPlugin.configure({
override: {
components: {
[KEYS.codeBlock]: CodeBlockElementDocx,
[KEYS.codeLine]: CodeLineElementDocx,
[KEYS.codeSyntax]: CodeSyntaxLeafDocx,
[KEYS.column]: ColumnElementDocx,
[KEYS.columnGroup]: ColumnGroupElementDocx,
[KEYS.equation]: EquationElementDocx,
[KEYS.inlineEquation]: InlineEquationElementDocx,
[KEYS.callout]: CalloutElementDocx,
[KEYS.toc]: TocElementDocx,
},
},
}),
];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.
API
importDocx
Import a DOCX file and convert it to Plate nodes.
exportToDocx
Convert Plate content to a DOCX blob.
- Default:
'portrait' - Default:
{ top: 1440, bottom: 1440, left: 1440, right: 1440, header: 720, footer: 720, gutter: 0 }
Page orientation.
Page margins in twentieths of a point (1 inch = 1440).
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.
downloadDocx
Download a DOCX blob as a file.
exportEditorToDocx
Export and download editor content as a DOCX file in one call.
api.docxExport.exportToBlob
Convert editor content to a DOCX blob using the plugin API.
api.docxExport.download
Download a DOCX blob as a file.
Transforms
tf.docxExport.exportAndDownload
Export and download editor content as a DOCX file.
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.
On This Page
FeaturesInstallationImport DOCXImport DOCX FileExport DOCXBasic ExportWith Editor PluginsCustom StylesUsing DocxExportPluginDOCX Export KitPluginsDocxExportPluginAPIimportDocxexportToDocxdownloadDocxexportEditorToDocxapi.docxExport.exportToBlobapi.docxExport.downloadTransformstf.docxExport.exportAndDownloadTypesDocxCommentDocxExportMarginsConstantsDOCX_EXPORT_STYLESKnown Limitations