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

---

Demo

Browser

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

• https://codepen.io/dolanmiu/pen/RwNeObg
• https://jsfiddle.net/dolanmiu/onadx1gu/

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.

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 💖