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:

• https://stackblitz.com/edit/angular-docx
• https://stackblitz.com/edit/angular-wmd6k3

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.

Playground

Experience docx in action through Docx.js Editor, an interactive playground where you can code and preview the results in real-time.

Examples

Check the demo folder for examples.

Contributing

Read the contribution guidelines here.

Used by

...and many more!

---

Made with 💖