Render DrawingML in the DOCX editor

DOCX Editor 2.33 renders DrawingML diagrams and charts alongside your document text. Open a Word file with a workflow or financial chart, edit the text, and save it with its drawing parts preserved.

Support includes shapes, connectors, text boxes, groups, and saved SmartArt drawings. The Pro drawing module adds charts and calculates supported SmartArt layouts when the file has no saved drawing.

Try a SmartArt diagram

This workflow uses nested shapes, text, and fills. Edit the surrounding paragraph to see the diagram in a working document.

For another example, download the grouped tasks document.

Try a chart

This combination chart pairs columns with a line. It renders from values stored in the DOCX file.

The drawing module supports these chart families:

• Column, bar, line, and area.
• Scatter, bubble, radar, and stock.
• Pie, doughnut, pie-of-pie, and bar-of-pie.
• Surface, contour, and supported 3-D variants.
• Waterfall, funnel, histogram, Pareto, and box and whisker.

You can also download the doughnut chart document. Browse DrawingML compatibility for more drawing examples and supported variants.

Add drawing support

For version 2.33 or later, install @docx-editor.dev/pro and register the drawing module before opening a document. Advanced rendering requires the EigenPal Pro License.

import { DocxEditor } from "@docx-editor.dev/react";
import { drawingModule } from "@docx-editor.dev/pro/drawing";
import "@docx-editor.dev/core/styles/editor.css";
 
const modules = [
  drawingModule({ licenseKey: process.env.NEXT_PUBLIC_DOCX_LICENSE }),
];
 
export function DrawingEditor({ bytes }: { bytes: Uint8Array }) {
  return <DocxEditor document={bytes} modules={modules} />;
}

This example uses Next.js. In Vite, use import.meta.env.VITE_DOCX_LICENSE. If you already use reviewModule(), the drawing renderers are included.

Charts and SmartArt are read-only graphics. You can edit surrounding text, but you cannot change chart values or rearrange diagram nodes. Charts use cached values without refreshing workbooks or external data.

Unsupported charts, including treemap, sunburst, and map charts, use a saved fallback or a labeled placeholder. Their original parts remain in the saved DOCX.

For rendering limits and PDF behavior, see Advanced drawing rendering.