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

Demo

Browser

With basic HTML/JS in a browser, load docx's browser build, which defines a global docx:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://unpkg.com/docx@9/dist/index.iife.js"></script>
    </head>
    <body>
        <button type="button" onclick="generate()">Download a Word document</button>

        <script>
            function generate() {
                const doc = new docx.Document({
                    sections: [
                        {
                            children: [
                                new docx.Paragraph({
                                    children: [new docx.TextRun("Hello World"), new docx.TextRun({ text: "Foo Bar", bold: true })],
                                }),
                            ],
                        },
                    ],
                });

                docx.Packer.toBlob(doc).then((blob) => {
                    const link = document.createElement("a");
                    link.href = URL.createObjectURL(blob);
                    link.download = "example.docx";
                    link.click();
                });
            }
        </script>
    </body>
</html>

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:

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.

HTML

HTML, such as what people write in a rich-text editor, becomes a document's paragraphs, lists, tables, images, links, equations and footnotes with docx/html, written in the document's own styles:

import { Document } from "docx";
import { htmlToContent } from "docx/html";

const doc = new Document({
    sections: [{ children: htmlToContent("<h1>Report</h1><p>Sales were <b>up 12%</b>.</p><ul><li>EMEA</li><li>APAC</li></ul>") }],
});

In a page without a bundler, load dist/html.umd.cjs after dist/index.umd.cjs and dist/math.umd.cjs. It adds the docxHtml global. See the HTML documentation.

Macros

VBA macros, written from their code, make a document a macro-enabled document (.docm), with docx/macros:

import { Document, Paragraph } from "docx";
import { createMacros } from "docx/macros";

const doc = new Document({
    macros: createMacros({
        modules: [{ name: "Greetings", code: 'Sub SayHello()\n    MsgBox "Hello"\nEnd Sub' }],
    }),
    sections: [{ children: [new Paragraph("Run SayHello from View > Macros")] }],
});

In a page without a bundler, load dist/macros.umd.cjs after dist/index.umd.cjs. It adds the docxMacros global. See the macros documentation.

Embedded Files

Workbooks, documents, presentations and any other file, such as a sound, a video or a PDF, are embedded in a document as OLE objects, which open from it, with docx/embedded-files:

import * as fs from "fs";
import { Document, Paragraph } from "docx";
import { EmbeddedFileRun } from "docx/embedded-files";

const doc = new Document({
    sections: [
        {
            children: [
                new Paragraph({
                    children: [
                        new EmbeddedFileRun({
                            fileName: "budget.xlsx",
                            data: fs.readFileSync("./budget.xlsx"),
                            preview: { type: "png", data: fs.readFileSync("./budget.png") },
                            transformation: { width: 240, height: 120 },
                        }),
                    ],
                }),
            ],
        },
    ],
});

In a page without a bundler, load dist/embedded-files.umd.cjs after dist/index.umd.cjs. It adds the docxEmbeddedFiles global. See the embedded files documentation.

Citations and Bibliography

Sources, citations of them in the text and a bibliography, in one of Word's styles of citation, such as APA, MLA or Chicago, written as Word writes them, with docx/bibliography:

import { Document, Paragraph, TextRun } from "docx";
import { Bibliography, Citation, CitationStyle, SourceType, createBibliography } from "docx/bibliography";

const doc = new Document({
    bibliography: createBibliography({
        style: CitationStyle.APA,
        sources: [
            {
                tag: "Bak10",
                type: SourceType.BOOK,
                authors: [{ lastName: "Baker", firstName: "Anna" }],
                title: "The Art of Pizza",
                year: 2010,
                city: "Naples",
                publisher: "Oven Press",
            },
        ],
    }),
    sections: [
        {
            children: [
                new Paragraph({ children: [new TextRun("Pizza has been baked in Naples for centuries "), new Citation("Bak10")] }),
                new Bibliography({ title: "References" }),
            ],
        },
    ],
});

In a page without a bundler, load dist/bibliography.umd.cjs after dist/index.umd.cjs. It adds the docxBibliography global. See the citations and bibliography documentation.