DOCX support has three directions: paste Word clipboard content into Plate, import a .docx file into Plate nodes, and export Plate nodes as a .docx file. Each direction has a focused package, while @platejs/docx reexports all three public APIs.
Paste, file import, and file download use browser APIs. Keep these operations in client code. DOCX export also uses React static rendering, so pass the same plugin descriptors and static components that define your document output.
| Surface | Owner | Use it for |
|---|---|---|
| DOCX facade | @platejs/docx | Importing paste, import, and export APIs from one package |
DocxPastePlugin | @platejs/docx-paste | Paste from Word |
DocxImportPlugin | @platejs/docx-import | Converting a .docx buffer into Plate nodes |
DocxExportPlugin, exportToDocx | @platejs/docx-export | Converting Plate nodes into a DOCX blob |
Registry DocxKit | App-local copied code | Choosing and ordering the complete DOCX plugin preset |
Registry DocxExportKit | App-local copied code | Providing DOCX-specific static renderers |
The registry kit is the fastest complete setup. The app-local array installs JuicePlugin, DocxPastePlugin, DocxImportPlugin, and DocxExportPlugin. JuicePlugin inlines pasted CSS before Plate decodes it.
'use client';
import {
DocxExportPlugin,
DocxImportPlugin,
DocxPastePlugin,
} from '@platejs/docx';
import { JuicePlugin } from '@platejs/juice';
export const DocxKit = [
JuicePlugin,
DocxPastePlugin,
DocxImportPlugin,
DocxExportPlugin,
] as const;'use client';
import {
DocxExportPlugin,
DocxImportPlugin,
DocxPastePlugin,
} from '@platejs/docx';
import { JuicePlugin } from '@platejs/juice';
export const DocxKit = [
JuicePlugin,
DocxPastePlugin,
DocxImportPlugin,
DocxExportPlugin,
] as const;import { createPlateEditor } from 'platejs/react';
import { DocxKit } from '@/components/editor/docx';
const editor = createPlateEditor({
plugins: [...DocxKit],
});import { createPlateEditor } from 'platejs/react';
import { DocxKit } from '@/components/editor/docx';
const editor = createPlateEditor({
Install only @platejs/docx-paste when clipboard input is the only DOCX capability you need. JuicePlugin preserves styles defined in Word's pasted HTML.
import { DocxPastePlugin } from '@platejs/docx-paste';
import { JuicePlugin } from '@platejs/juice';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [JuicePlugin, DocxPastePlugin],
});import { DocxPastePlugin } from '@platejs/docx-paste';
import { JuicePlugin } from '@platejs/juice';
import { createPlateEditor } from 'platejs/react';
const editor = createPlateEditor({
plugins: [JuicePlugin, DocxPastePlugin],
});Once installed, DocxPastePlugin detects Word HTML in clipboard data, cleans the HTML and RTF, and lets the installed Plate codecs decode the result.
DocxImportPlugin converts a DOCX ArrayBuffer into nodes, comments, and warnings. The editor's installed HTML codecs determine the resulting Plate nodes.
import { DocxImportPlugin } from '@platejs/docx-import';
import { createPlateEditor } from 'platejs/react';
import { BaseEditorKit } from '@/components/editor/plugins-static';
const editor = createPlateEditor({
plugins: [...BaseEditorKit, DocxImportPlugin],
});
export async function importDocx(file: File) {
const result = await editor
.plugin(DocxImportPlugin)
.api.import(await file.arrayBuffer());
editor.update.fragment.replace(result.nodes);
return {
comments: result.comments,
warnings: result.warnings,
};
}import { DocxImportPlugin } from '@platejs/docx-import';
import { createPlateEditor } from 'platejs/react';
import { BaseEditorKit } from '@/components/editor/plugins-static';
const editor = createPlateEditor({
plugins: [...BaseEditorKit, DocxImportPlugin],
});
export async function importDocx(file: File) {
const result = await editor
.plugin(DocxImportPlugin)
.api.import(await file.arrayBuffer());
editor.update.fragment.replace(result.nodes);
return
Each imported comment contains its Word comment id, extracted text, and references into the returned node snapshot.
DocxExportPlugin owns editor-bound export. Pass the document snapshot explicitly so the operation is deterministic.
import { DocxExportPlugin, downloadDocx } from '@platejs/docx-export';
import { createPlateEditor } from 'platejs/react';
import { BaseEditorKit } from '@/components/editor/plugins-static';
import { DocxExportKit } from '@/components/editor/docx-export';
const editorPlugins = [...BaseEditorKit, ...DocxExportKit] as const;
const editor = createPlateEditor({
plugins: [...editorPlugins, DocxExportPlugin],
});
export async function downloadEditorDocx() {
const blob = await editor
.plugin(DocxExportPlugin)
.api.toBlob(editor.read.children(), {
editorPlugins,
orientation: 'portrait',
});
downloadDocx(blob, 'document.docx');
}import { DocxExportPlugin, downloadDocx } from '@platejs/docx-export';
import { createPlateEditor } from 'platejs/react';
import { BaseEditorKit } from '@/components/editor/plugins-static';
import { DocxExportKit } from '@/components/editor/docx-export';
const editorPlugins = [...BaseEditorKit, ...DocxExportKit] as const;
const editor = createPlateEditor({
plugins: [...editorPlugins, DocxExportPlugin],
});
export async function downloadEditorDocx() {
const blob = await editor
.plugin(DocxExportPlugin)
Use exportToDocx when you do not need an installed plugin portal:
import { downloadDocx, exportToDocx } from '@platejs/docx-export';
const blob = await exportToDocx(editor.read.children(), {
editorPlugins,
margins: { bottom: 1440, left: 1440, right: 1440, top: 1440 },
});
downloadDocx(blob, 'document.docx');import { downloadDocx, exportToDocx } from '@platejs/docx-export';
const blob = await exportToDocx(editor.read.children(), {
editorPlugins,
margins: { bottom: 1440, left: 1440, right: 1440, top: 1440 },
});
downloadDocx(blob, 'document.docx');The app-local DocxExportKit supplies static renderers for code blocks, columns, equations, callouts, headings, and tables of contents.
import { BaseHeadingPlugin } from '@platejs/basic-nodes';
import { BaseCalloutPlugin } from '@platejs/callout';
import {
BaseCodeBlockPlugin,
BaseCodeHighlightPlugin,
BaseCodeLinePlugin,
} from '@platejs/code-block';
import { BaseColumnItemPlugin, BaseColumnPlugin } from '@platejs/layout';
import { BaseEquationPlugin, BaseInlineEquationPlugin } from '@platejs/math';
import { BaseTocPlugin } from '@platejs/toc';
import { CalloutElementDocx } from '@/components/editor/callout-static';
import {
CodeBlockElementDocx,
CodeLineElementDocx,
CodeSyntaxLeafDocx,
} from '@/components/editor/code-block-static';
import {
ColumnElementDocx,
ColumnGroupElementDocx,
} from '@/components/editor/column-static';
import { HeadingElementDocx } from '@/components/editor/heading-static';
import {
EquationElementDocx,
InlineEquationElementDocx,
} from '@/components/editor/math-static';
import { TocElementDocx } from '@/components/editor/toc-static';
/**
* 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)
* - Headings (bookmark anchors for TOC links)
* - TOC (anchor links with paragraph breaks)
*
* Tables use base version with juice CSS inlining.
*/
export const DocxExportKit = [
BaseCodeBlockPlugin.configure({
component: CodeBlockElementDocx,
}),
BaseCodeLinePlugin.configure({
component: CodeLineElementDocx,
}),
BaseCodeHighlightPlugin.configure({
component: CodeSyntaxLeafDocx,
}),
BaseColumnItemPlugin.configure({
component: ColumnElementDocx,
}),
BaseColumnPlugin.configure({
component: ColumnGroupElementDocx,
}),
BaseEquationPlugin.configure({
component: EquationElementDocx,
}),
BaseInlineEquationPlugin.configure({
component: InlineEquationElementDocx,
}),
BaseCalloutPlugin.configure({
component: CalloutElementDocx,
}),
BaseHeadingPlugin.configure({
component: HeadingElementDocx,
}),
BaseTocPlugin.configure({
component: TocElementDocx,
}),
];import { BaseHeadingPlugin } from '@platejs/basic-nodes';
import { BaseCalloutPlugin } from '@platejs/callout';
import {
BaseCodeBlockPlugin,
BaseCodeHighlightPlugin,
BaseCodeLinePlugin,
} from '@platejs/code-block';
import { BaseColumnItemPlugin, BaseColumnPlugin } from '@platejs/layout';
import { BaseEquationPlugin, BaseInlineEquationPlugin } from '@platejs/math';
import { BaseTocPlugin } from '@platejs/toc';
import { CalloutElementDocx } from '@/components/editor/callout-static';
import {
CodeBlockElementDocx,
CodeLineElementDocx,
CodeSyntaxLeafDocx,
} from '@/components/editor/code-block-static'
The facade reexports DocxPastePlugin, DocxImportPlugin, DocxExportPlugin, and the focused packages' operations and types. Applications own plugin membership and order through their local plugin arrays.
editor.plugin(DocxImportPlugin).api.import(arrayBuffer, options?) returns:
| Field | Type | Description |
|---|---|---|
nodes | Descendant[] | Plate nodes decoded by the installed HTML codecs |
comments | DocxComment[] | Comment text and references into nodes |
warnings | string[] | Conversion and decode warnings |
options.rtf accepts matching RTF clipboard data when the caller has it.
editor.plugin(DocxExportPlugin).api.toBlob(value, options?) returns a DOCX Blob for the explicit node snapshot.
exportToDocx(value, options?) returns a DOCX Blob without installing DocxExportPlugin.
| Option | Type | Description |
|---|---|---|
allowRemoteImages | boolean | Fetch remote HTTP images during export |
customStyles | string | Append CSS to the default DOCX styles |
editorPlugins | readonly BasePluginInput[] | Descriptors used for static HTML rendering |
editorStaticComponent | React.ComponentType<PlateStaticProps> | Static editor wrapper |
fontFamily | string | Document body font |
margins | DocxExportMargins | Page margins in twentieths of a point |
orientation | 'landscape' | 'portrait' | Page orientation |
pageSize | PageSize | Page width and height in twentieths of a point |
title | string | Document metadata title |
downloadDocx(blob, filename) triggers a browser download and appends .docx when needed.