docx

Easily generate and modify .docx files with JS/TS. Works for Node and on the Browser.

drawing

Demo

Browser

Here are examples of docx being used with basic HTML/JS in a browser environment:

Here are examples of docx working in Angular:

Here are examples of docx working in React:

https://stackblitz.com/edit/react-docx
https://stackblitz.com/edit/react-docx-images (adding images to Word Document)

Here is an example of docx working in Vue.js:

https://stackblitz.com/edit/vuejs-docx

Node

Press endpoint on the RunKit website:

RunKit Instructions

https://runkit.com/dolanmiu/docx-demo1 - Simple paragraph and text
https://runkit.com/dolanmiu/docx-demo2 - Advanced Paragraphs and text
https://runkit.com/dolanmiu/docx-demo3 - Bullet points
https://runkit.com/dolanmiu/docx-demo4 - Simple table
https://runkit.com/dolanmiu/docx-demo5 - Images
https://runkit.com/dolanmiu/docx-demo6 - Margins
https://runkit.com/dolanmiu/docx-demo7 - Landscape
https://runkit.com/dolanmiu/docx-demo8 - Header and Footer
https://runkit.com/dolanmiu/docx-demo10 - My CV generated with docx

More here

How to use & Documentation

Please refer to the documentation at https://docx.js.org/ for details on how to use this library, examples and much more!

Shapes, watermarks and charts

Shapes, groups of shapes and diagrams with connectors come with docx, from docx/shapes, watermarks from docx/watermarks, and native Word charts from docx/charts. They are left out of docx itself, so documents that don't use them don't carry their code:

import { Document, Header, Paragraph } from "docx";
import { ChartRun } from "docx/charts";
import { ShapeRun } from "docx/shapes";
import { TextWatermark } from "docx/watermarks";

const doc = new Document({
    sections: [
        {
            headers: { default: new Header({ children: [new Paragraph({ children: [new TextWatermark({ text: "DRAFT" })] })] }) },
            children: [
                new Paragraph({ children: [new ShapeRun({ type: "ellipse", transformation: { width: 100, height: 60 } })] }),
                new Paragraph({
                    children: [new ChartRun({ type: "column", categories: ["Q1", "Q2"], series: [{ name: "Sales", values: [10, 20] }] })],
                }),
            ],
        },
    ],
});

In a page without a bundler, load dist/shapes.umd.cjs, dist/watermarks.umd.cjs or dist/charts.umd.cjs after dist/index.umd.cjs. They add the docxShapes, docxWatermarks and docxCharts globals. See the shapes, watermarks and charts documentation.