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.

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 💖